<template>
  <div
    class="container linep containertext followUpHistory"
    style="
      background-color: #fff;
      width: 94%;
      margin: 0px auto;
      border-radius: 6px;
      font-size: 14px;
    ">
    <van-form ref="tabstoreVal">
      <div v-for="(item, index) in customItemList" :key="index">
        <div
          class="formLabel z-cell z-cells z-celly"
          v-if="item.answerType == 'sz' || item.answerType == 'rq'">
          <van-cell>
            <template #title
              >{{ index + 1 }}.{{ item.customerClueName }}
              <span
                style="color: #444; font-size: 12px; margin: 0; padding: 10px 0; text-align: right"
                >{{ item.remark }}</span
              ></template
            >
          </van-cell>
          <p class="mg0" style="word-break: break-all">{{ item.answerValue }}</p>
        </div>
        <div class="formLabel z-cell z-cells z-celly" v-if="item.answerType == 'zp'">
          <van-cell>
            <template #title>{{ index + 1 }}.{{ item.customerClueName }}</template>
          </van-cell>
          <delete-upload-imgv :imgs="item.fileInfoList"></delete-upload-imgv>
        </div>
        <div
          class="formLabel z-cell z-cells z-celly"
          v-if="item.answerType == 'wb' && viewTextShow">
          <van-cell>
            <template #title>{{ index + 1 }}.{{ item.customerClueName }}</template>
          </van-cell>
          <div class="selesetText">
            <p class="mg0" style="word-break: break-all">{{ item.answerValue }}</p>
          </div>
          <!-- <p style="color: #444; font-size: 12px; margin: 0; padding: 10px 0; text-align: right">
            {{ item.remark }}
          </p> -->
          <delete-upload-imgv :imgs="item.fileInfoList"></delete-upload-imgv>
        </div>

        <div class="formLabel z-cell z-cells z-celly" v-if="item.answerType == 'duox'">
          <van-cell>
            <template #title>{{ index + 1 }}.{{ item.customerClueName }}</template>
          </van-cell>
          <div class="selesetText">
            <div class="mg0" v-for="(item1, index1) in item.customerClueOptionList" :key="index1">
              <p style="color: #0057ba" v-if="item1.checked">
                <i
                  style="
                    border: 1px solid #0057ba;
                    margin-right: 10px;
                    border-radius: 2px;
                    padding: 2px;
                  "
                  class="van-icon van-icon-success"></i>
                <span>{{ item1.customerClueOption }}</span>
              </p>
              <p v-if="!item1.checked">
                <i
                  style="
                    border: 1px solid #ccc;
                    margin-right: 10px;
                    border-radius: 2px;
                    color: #fff;
                    padding: 2px;
                  "
                  class="van-icon van-icon-success"></i>
                <span>{{ item1.customerClueOption }}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="formLabel z-cell z-cells z-celly" v-if="item.answerType == 'dx'">
          <van-cell>
            <template #title> {{ index + 1 }}.{{ item.customerClueName }} </template>
          </van-cell>
          <div class="selesetText">
            <div class="mg0" v-for="(item2, index2) in item.customerClueOptionList" :key="index2">
              <p style="color: #0057ba" v-if="item2.checked">
                <i
                  style="
                    border: 1px solid #0057ba;
                    border-radius: 40px;
                    margin-right: 10px;
                    padding: 2px;
                  "
                  class="van-icon van-icon-success"></i>
                <span>{{ item2.customerClueOption }}</span>
              </p>
              <p v-if="!item2.checked">
                <i
                  style="
                    border: 1px solid #ccc;
                    border-radius: 40px;
                    margin-right: 10px;
                    color: #fff;
                    padding: 2px;
                  "
                  class="van-icon van-icon-success"></i>
                <span>{{ item2.customerClueOption }}</span>
              </p>
            </div>
          </div>
          <delete-upload-imgv :imgs="item.fileInfoList"></delete-upload-imgv>
        </div>
      </div>
    </van-form>
  </div>
</template>
<script>
import deleteUploadImg from '@/components/deleteUploadImg2';
import deleteUploadImgv from '@/components/deleteUploadImg';
import { getCustomerClueAnswerById } from '@/api/clew';
export default {
  components: { deleteUploadImg, deleteUploadImgv },
  props: {
    historyId: {
      type: [String, Number],
      default: '',
    },
    showView: {
      type: Boolean,
      default: '',
    },
  },
  data() {
    return {
      customItemList: [],
      viewTextShow: false,
    };
  },
  watch: {
    showView: {
      handler(val) {
        if (val) this.getFollowUpHistory();
      },
      immediate: true,
    },
  },
  methods: {
    getFollowUpHistory(val) {
      this.toastLoading(0, '加载中...', true);
      getCustomerClueAnswerById({ userCustomerClueId: this.historyId }).then((res) => {
        this.toastLoading().clear();
        this.customItemList = res.data.customerClue.customerClueItemList;
        for (var pl = 0; pl < this.customItemList[1].customerClueOptionList.length; pl++) {
          if (
            this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
              '跟进中'
            ) != -1
          ) {
            if (this.customItemList[1].customerClueOptionList[pl].value == 'Y') {
              this.viewTextShow = true;
              if (
                this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
                  '跟进'
                ) != -1
              ) {
                this.customItemList[2].customerClueName =
                  '具体合作意向反馈(拜访时间、合同方向、预估合作时间)';
              }
            }
          } else {
            if (this.customItemList[1].customerClueOptionList[pl].value == 'Y') {
              this.viewTextShow = true;
              if (
                this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
                  '意向'
                ) != -1
              ) {
                this.customItemList[2].customerClueName = '没有意向原因';
                this.customItemList[2].remark = '请输入';
              }
              if (
                this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
                  '开户'
                ) != -1
              ) {
                this.customItemList[2].customerClueName = '开户经销商代码(例:0110067321)';
                this.customItemList[2].remark = '请输入';
              }
              if (
                this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
                  '开店'
                ) != -1
              ) {
                this.customItemList[2].customerClueName = '开户门店代码(例:0190129032)';
                this.customItemList[2].remark = '请输入';
              }
              if (
                this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
                  '出货'
                ) != -1
              ) {
                this.customItemList[2].customerClueName = '填写具体的产品和数量';
              }
            }
          }
        }
      });
    },
  },
};
</script>
<style lang="scss">
.followUpHistory {
  .formLabel {
    margin: 0 16px;
    border-bottom: 1px solid #f1f1f1;
  }
  .formLabel .van-cell {
    padding: 10px 0;
    font-size: 14px;
  }
  .formLabel .van-cell::after {
    border: 0;
  }
  .formLabeltext .van-field {
    border: 1px solid #f1f1f1;
    padding: 6px;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
  }
  .formLabel .van-field__control {
    padding: 0 10px;
  }
  .z-checkbox .van-radio {
    padding: 6px 0;
  }
  .z-cell .van-cell__title {
    font-size: 14px;
  }
  .formLabel .van-radio__label,
  .formLabel .van-checkbox__label {
    font-size: 14px;
  }
}
</style>
