<template>
  <el-drawer
    title="走访详情"
    :visible.sync="showDetail"
    :size="850"
    direction="rtl"
    :append-to-body="true"
  >
    <div class="main">
      <el-skeleton v-if="showLoading" :rows="5" animated />
      <el-form
        v-else
        ref="detailForm"
        :model="detailForm"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="任务名称" prop="custName">
          {{ detailForm.campaignName }}
        </el-form-item>
        <el-form-item label="客户名称" prop="custName">
          {{ detailForm.custName }}
        </el-form-item>
        <el-form-item label="走访人" prop="custName">
          {{ detailForm.userName }}
        </el-form-item>
        <el-form-item label="行业名称" prop="industry">
          {{ detailForm.industry }}
        </el-form-item>
        <el-form-item label="持续时间" prop="custName">
          {{ detailForm.duration }}h
        </el-form-item>
        <el-form-item label="打卡情况">
          <el-timeline
            v-for="(item, index) in detailForm.signList"
            :key="index"
          >
            <el-timeline-item>
              <template #default>
                <p class="title">
                  打卡签到：<span class="content">{{ item.signInTime }}</span>
                </p>
                <p class="content">定位地址：{{ item.signInAddress }}</p>
              </template>
            </el-timeline-item>
            <el-timeline-item>
              <template #default>
                <p class="title">
                  打卡签退：<span class="content">{{
                    item.signOutTime || "-"
                  }}</span>
                </p>
                <p class="content">
                  定位地址：{{ item.signOutAddress || "-" }}
                </p>
                <p v-if="item.signOutRemark" class="content">
                  签退说明：{{ item.signOutRemark || "-" }}
                </p>
              </template>
            </el-timeline-item>
          </el-timeline>
        </el-form-item>
        <el-form-item label="拍照">
          <div class="imageList">
            <el-image
              v-for="(item, index) in detailForm.imageList"
              :key="index"
              :src="`data:image/png;base64,${item}`"
              :preview-src-list="previewList"
              fit="contain"
            />
          </div>
        </el-form-item>
        <el-form-item label="信息反馈">
          <div class="fk_main">
            <div v-if="!isCustomTemplate">
              <div class="fk_main_item" v-if="'statusFlag' in feedBack">
                <span class="zfr"
                  >是否经营：
                  <span v-if="feedBack.statusFlag">是</span>
                  <span v-if="!feedBack.statusFlag">否</span>
                </span>
              </div>
              <div class="fk_main_item" v-if="'addressConsist' in feedBack">
                <span class="zfr"
                  >地址是否一致：
                  <span v-if="feedBack.addressConsist">是</span>
                  <span v-if="!feedBack.addressConsist">否</span>
                </span>
              </div>
              <div class="fk_main_item" v-if="'address' in feedBack">
                <span class="zfr">地址：{{ feedBack.address }}</span>
              </div>
              <div class="fk_main_item" v-if="'scopeConsist' in feedBack">
                <span class="zfr"
                  >经营范围是否一致：
                  <span v-if="feedBack.scopeConsist">是</span>
                  <span v-if="!feedBack.scopeConsist">否</span>
                </span>
              </div>
              <div class="fk_main_item" v-if="'relatePerson' in feedBack">
                <span class="zfr"
                  >关联人：<span
                    class="glr"
                    v-for="(el, index) in feedBack.relatePerson"
                    >{{ el.custName }},</span
                  ></span
                >
              </div>
              <div class="fk_main_item" v-if="'intendProduct' in feedBack">
                <span class="zfr">意向产品：{{ feedBack.intendProduct }}</span>
              </div>
              <div class="fk_main_item" v-if="'otherIntend' in feedBack">
                <span class="zfr">其他意向：{{ feedBack.otherIntend }}</span>
              </div>
            </div>
            <div v-else>
              <div
                class="fk_main_item"
                v-for="(item, index) in templateList"
                :key="index"
              >
                <span class="zfr">
                  {{ item.options.label }}：{{
                    feedBack[item.model]
                      ? item.type === "checkbox"
                        ? feedBack[item.model].join("、")
                        : feedBack[item.model]
                      : "-"
                  }}
                </span>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import {
  getVisitRecordDetail,
  getFeedbackTemplate,
} from "@/api/task/taskList.js";
export default {
  data() {
    return {
      showLoading: true,
      showDetail: false,
      detailForm: {},
      previewList: [],
      isCustomTemplate: false,
      feedBack: {},
      templateList: [],
    };
  },
  methods: {
    openDrawer(val) {
      this.showDetail = true;
      this.showLoading = true;
      getVisitRecordDetail({ recordId: val })
        .then((res) => {
          this.detailForm = res.data || {};
          this.detailForm.signList = res.data.signList || [];
          this.detailForm.imageList = res.data.imageList || [];
          this.previewList = res.data.imageList?.map(
            (item) => `data:image/png;base64,${item}`
          );
          this.feedBack = res.data.feedback || {};
          if (res.data.feedbackType === "2") {
            this.isCustomTemplate = true;
            this.getTemplateInfo(res.data.feedbackTemplateId);
          } else {
            if (res.data.feedback) {
              this.feedBack.relatePerson = JSON.parse(
                res.data.feedback.relatePerson
              );
            }
          }
          console.log(res.data);
        })
        .finally(() => {
          this.showLoading = false;
        });
    },
    getTemplateInfo(feedbackTemplateId) {
      getFeedbackTemplate({
        feedbackTemplateId: feedbackTemplateId,
      }).then((res) => {
        if (res.code == 200) {
          this.templateList = JSON.parse(res.data);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__body {
  .main {
    padding: 0 32px;

    .title {
      color: black;
      font-size: 14px;
    }

    .content {
      font-size: 12px;
      color: #8c8c8c;
    }

    .el-timeline-item {
      padding-bottom: 0;
    }

    .el-timeline-item__wrapper {
      top: -12px;
    }

    .imageList {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .el-image {
        width: 30%;
        height: 200px;
        margin-bottom: 24px;
      }
    }

    .fk_main {
      .fk_main_item {
        flex-wrap: wrap;
        word-break: break-all;
        .zfr {
          margin-top: 10px;
          color: rgb(140, 140, 140);
          font-size: 14px;
        }
      }
    }
  }
}
</style>
