<template>
  <!-- 详情 -->
  <el-dialog
    title="历史客诉线索详情"
    :visible.sync="openEdit"
    width="1200px"
    append-to-body
    @close="canceleiti">
    <el-descriptions title="" border>
      <el-descriptions-item label="客资线索">{{
        fillObjectFormat(formv, '')
      }}</el-descriptions-item>
      <el-descriptions-item label="公司名称">{{ formv.companyName }}</el-descriptions-item>
      <el-descriptions-item label="大区名称">{{ formv.regionName }}</el-descriptions-item>
      <el-descriptions-item label="部门">{{ formv.deptName }}</el-descriptions-item>
      <el-descriptions-item label="省">{{ formv.provinceName }}</el-descriptions-item>
      <el-descriptions-item label="市">{{ formv.cityName }}</el-descriptions-item>
      <el-descriptions-item label="县/区">{{ formv.countryName }}</el-descriptions-item>
      <el-descriptions-item label="客户姓名">{{ formv.name }}</el-descriptions-item>
      <el-descriptions-item label="归属人">{{ form.belongingUserName }}</el-descriptions-item>
      <el-descriptions-item label="来电电话">{{ tell(formv.phone) }}</el-descriptions-item>
      <el-descriptions-item label="跟进状态" v-if="formv.isClose"
        ><span v-if="formv.isClose == 1">跟进完成</span><span v-if="formv.isClose == 0">跟进中</span
        ><span v-if="formv.isClose == -1">未跟进</span></el-descriptions-item
      >
      <el-descriptions-item label="跟进结果" v-if="form.followUpResult">{{
        form.followUpResult
      }}</el-descriptions-item>
      <el-descriptions-item label="接入时间">{{ formv.createTime }}</el-descriptions-item>
    </el-descriptions>
    <el-divider>答题内容</el-divider>
    <el-form ref="form" :model="form" size="mini" class="el-label-form">
      <el-row v-for="(customItem, index) in formv.customerClue.customerClueItemList">
        <el-col :span="24" v-if="customItem.answerType == 'dx'">
          <el-form-item :label="index + 1 + '、' + customItem.customerClueName">
            <el-radio
              disabled
              v-for="(customOption, index) in customItem.customerClueOptionList"
              v-model="customItem.answerValue"
              :label="customOption.customerClueOptionId"
              >{{ customOption.customerClueOption }}</el-radio
            >
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="customItem.answerType == 'duox'">
          <el-form-item :label="index + 1 + '、' + customItem.customerClueName">
            <el-checkbox-group disabled>
              <el-checkbox
                v-for="(customOption, index) in customItem.customerClueOptionList"
                v-model="customOption.checked"
                :label="customOption.customerClueOption"
                >{{ customOption.customerClueOption }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="customItem.answerType == 'zp'">
          <el-form-item :label="index + 1 + '、' + customItem.customerClueName">
            <div class="demo-image__preview">
              <el-image
                v-for="(fileInfo, index) in customItem.fileInfoList"
                class="imgPreview"
                :src="fileInfo.fileUrl"
                :preview-src-list="fileInfoLists"
                @click="previewFn(customItem)"></el-image>
            </div>
            <p style="text-align: right; font-size: 12px; color: #999">
              备注：{{ customItem.remark }}
            </p>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="customItem.answerType == 'wb' && viewTextShow">
          <el-form-item :label="index + 1 + '、' + customItem.customerClueName">
            <el-input type="textarea" disabled v-model="customItem.answerValue"></el-input>
            <el-row>
              <el-col :span="12">
                <p style="text-align: left; font-size: 12px; color: #999">
                  备注：{{ customItem.remark }}
                </p></el-col
              >
              <el-col :span="12"
                >&nbsp;&nbsp;
                <p
                  v-if="customItem.updateBy"
                  style="text-align: right; font-size: 12px; color: #999">
                  修改人：{{ customItem.updateBy
                  }}<span style="width: 40px; display: inline-block"></span>修改时间：{{
                    customItem.updateTime
                  }}
                </p></el-col
              >
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="customItem.answerType == 'sz'">
          <el-form-item :label="index + 1 + '、' + customItem.customerClueName">
            <el-input type="textarea" disabled v-model="customItem.answerValue"></el-input>
            <el-row>
              <el-col :span="12">
                <p style="text-align: left; font-size: 12px; color: #999">
                  备注：{{ customItem.remark }}
                </p></el-col
              >
              <el-col :span="12"
                >&nbsp;&nbsp;
                <p
                  v-if="customItem.updateBy"
                  style="text-align: right; font-size: 12px; color: #999">
                  修改人：{{ customItem.updateBy
                  }}<span style="width: 40px; display: inline-block"></span>修改时间：{{
                    customItem.updateTime
                  }}
                </p></el-col
              >
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="customItem.answerType == 'rq'">
          <el-form-item :label="index + 1 + '、' + customItem.customerClueName">
            <el-date-picker
              v-model="customItem.answerValue"
              type="date"
              disabled
              value-format="yyyy-MM-dd"
              placeholder="选择日期"></el-date-picker>
            <el-row>
              <el-col :span="12">
                <p style="text-align: left; font-size: 12px; color: #999">
                  备注：{{ customItem.remark }}
                </p></el-col
              >
              <el-col :span="12"
                >&nbsp;&nbsp;
                <p
                  v-if="customItem.updateBy"
                  style="text-align: right; font-size: 12px; color: #999">
                  修改人：{{ customItem.updateBy
                  }}<span style="width: 40px; display: inline-block"></span>修改时间：{{
                    customItem.updateTime
                  }}
                </p></el-col
              >
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="canceleiti" size="mini">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'complaint',
  props: {
    formv: {
      type: Object,
      default: {},
    },
    form: {
      type: Object,
      default: {},
    },
    viewTextShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      openEdit: true,
      fileInfoLists: '',
      summaryTaskOptions: [],
    };
  },
  created() {
    this.getDicts('customer_clue').then((response) => {
      this.summaryTaskOptions = response.data;
    });
  },
  methods: {
    // 填写对象
    fillObjectFormat(row, column) {
      if (row.cid != null) {
        return this.selectDictLabels(this.summaryTaskOptions, row.cid);
      } else {
        return '';
      }
    },
    previewFn(val) {
      this.fileInfoLists = val.fileInfoLists;
    },
    canceleiti() {
      this.$emit('complaintCancel');
    },
    tell(params) {
      if (params != null && params.length == 11) {
        return params.substr(0, 3) + '****' + params.substr(7);
      } else {
        return '';
      }
    },
  },
};
</script>
<style scped lang="scss"></style>
