<style>
  .customRightDialog .drawerTop {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    background-color: #f0f5fb;
    padding: 5px 10px;
    align-items: center;
  }

  .customRightDialog .className {
    margin-left: 10px;
  }

  .customRightDialog .classFirst {
    color: #000000;
    font-weight: bold;
  }

  .customRightDialog .role_Line {
    width: 3px;
    height: 11px;
    margin-right: 10px;
    background-color: #3fc4ff;
    display: inline-block;
  }

  .info_Item {
    margin: 20px 0;
  }

  .customHeader {
    display: inline-block;
    width: 55px;
    height: 55px;
  }

  .saleRightTable thead {
    background-color: #eeeeef;
    height: 40px;
  }

  .saleRightTable td {
    padding: 0 5px;
  }

</style>
<template>
  <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeperForm">
    <q-card style="margin-top:61px;width:600px" class="no-border-radius customRightDialog">
      <div class="drawerTop">
        <div style="display: flex; align-items: center">
          <div class="className">
            <div class="classFirst">客户任务</div>
          </div>
        </div>
      </div>
      <div style="margin:20px">
        <div class="classFirst">
          <span class="role_Line"></span>基本信息
        </div>
        <div class="row info_Item">
          <div class="col-6">
            <span class="backInfo_Title">任务名称：</span>
            <span class="backOtherInfo" v-if="objOption.TaskName">
              {{ objOption.TaskName }}
            </span>
          </div>
          <div class="col-6">
            <span class="backInfo_Title">任务子标题：</span>
            <span class="backOtherInfo">{{ objOption.TaskSubTitle }}</span>
          </div>
        </div>
        <div class="row info_Item">
          <div class="col-6">
            <span class="backInfo_Title">奖品名称：</span>
            <span class="backOtherInfo" v-if="objOption.TaskKudo">
              {{ objOption.TaskKudo }}
            </span>
          </div>
          <div class="col-6">
            <span class="backInfo_Title">任务开始时间：</span>
            <span class="backOtherInfo">{{ objOption.TaskStartTimeStr }}</span>
          </div>
        </div>
        <div class="row info_Item">
          <div class="col-6">
            <span class="backInfo_Title">任务结束时间：</span>
            <span class="backOtherInfo" v-if="objOption.TaskEndTimeStr">
              {{ objOption.TaskEndTimeStr }}
            </span>
          </div>
        </div>
        <template v-if="objOption.TaskImageList.length>0">
          <div class="row wrap" style="margin-top:20px;">
            <div class="classFirst">
              <span class="role_Line"></span>任务图片
            </div>
          </div>
          <div class="row wrap" style="margin-top:20px;">
            <div class="row col-12">
              <div class="sale_ImgDiv" v-for="(sItem,sIndex) in objOption.TaskImageList" :key="sIndex">
                <img :src="sItem" />
              </div>
            </div>
          </div>
        </template>
        <template v-if="objOption.TaskKudoImgList.length>0">
          <div class="row wrap" style="margin-top:20px;">
            <div class="classFirst">
              <span class="role_Line"></span>奖品图片
            </div>
          </div>
          <div class="row wrap" style="margin-top:20px;">
            <div class="row col-12">
              <div class="sale_ImgDiv" v-for="(sItem,sIndex) in objOption.TaskKudoImgList" :key="sIndex">
                <img :src="sItem" />
              </div>
            </div>
          </div>
        </template>
        <div class="row wrap" style="margin-top:20px;" v-if="objOption.DetailsList.length>0">
          <div class="row col-12">
            <table class="saleRightTable" style="border-collapse:collapse;">
              <thead>
                <tr>
                  <td style="width:150px">
                    任务类型
                  </td>
                  <td style="width:400px">
                    任务条件
                  </td>
                  <td style="width:100px">
                    完成类型
                  </td>
                  <td style="width:100px">
                    完成值
                  </td>
                </tr>
              </thead>
              <tbody v-for="(sItem, sIndex) in objOption.DetailsList" :key="sIndex">
                <tr>
                  <td style="height:30px">
                    {{sItem.TaskTypeName}}
                  </td>
                  <td>
                    <template v-if="sItem.TargetList">
                      <template v-if="sItem.TargetList.length==1">
                        {{sItem.TargetList[0].TargetName}}
                      </template>
                      <template v-if="sItem.TargetList.length>1">
                        {{sItem.TargetList[0].TargetName}}
                        <span class="otherTask">
                          {{sItem.TargetList.length}}
                          <q-popup-proxy>
                            <q-banner>
                              <div style="width:100%;max-height:400px;overflow:auto;">
                                <table class="saleTaskTable" style="border-collapse:collapse;">
                                  <tr>
                                    <th>任务条件</th>
                                  </tr>
                                  <tr v-for="(dItem,dIndex) in sItem.TargetList" :key="dIndex"
                                    style="border-bottom:1px dashed #d1d1d1;">
                                    <td>{{dItem.TargetName}}</td>
                                  </tr>
                                </table>
                              </div>
                            </q-banner>
                          </q-popup-proxy>
                        </span>
                      </template>
                      <template v-if="sItem.TargetList.length==0">
                        无
                      </template>
                    </template>
                  </td>
                  <td>
                    {{sItem.TaskFinishType==1?'人数':'成交金额'}}
                  </td>
                  <td>
                    {{sItem.TaskFinishValue}}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="row wrap" style="margin-top:20px;" v-if="objOption.TaskDesc">
          <div class="row col-12">
            <span class="backInfo_Title">任务描述：</span>
            <span class="backOtherInfo" v-if="objOption.TaskDesc">
              {{ objOption.TaskDesc }}
            </span>
          </div>
        </div>
      </div>
      <div style="margin:30px 10px 0 0;text-align:right;">
        <q-btn flat color="grey-10" class="q-mr-md" label="取消" @click="closeperForm()" />
      </div>
    </q-card>
    <div class="dialog-out-close" @click="closeperForm"
      style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
      <q-icon name="iconfont icon-jujue1" size="26px" />
    </div>
  </q-dialog>
</template>
<script>
  import {
    GetCustomerTask
  } from "../../api/sale/peemanagement";
  export default {
    components: {},
    props: {
      taskOption: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        objOption: {},
      }
    },
    created() {},
    mounted() {
      this.initObj()
    },
    methods: {
      //初始化表单
      initObj() {
        if (this.taskOption && this.taskOption.Id > 0) {
          let msg = {
            Id: this.taskOption.Id
          }
          GetCustomerTask(msg).then(res => {
            if (res.Code == 1) {
              this.objOption = res.Data;
            }
          })
        }
      },
      //关闭弹窗
      closeperForm() {
        this.$emit('close');
      },
    },
  }

</script>
