<template>
  <div class="main_box">
    <navbar title="历史走访详情"></navbar>
    <div class="wrapper">
      <div class="item">
        <div class="item_top">
          <div class="item_top_left">
            <div
              :class="custGender == '男' ? 'userMan_box' : 'userWoMan_box'"
              v-if="custType == '0'"
            >
              <van-icon name="manager item_user"></van-icon>
            </div>
            <div class="icon_box" v-if="custType == '1'">
              <img
                src="../../images/home/sh.png"
                alt=""
                style="width: 20px; height: 20px"
              />
            </div>
            <div class="userMan_box" v-if="custType == '2'">
              <img
                src="../../images/part_one/icon_company.png"
                alt=""
                style="width: 15px; height: 15px"
              />
            </div>
            <div class="item_name">{{ custName }}</div>
          </div>
          <div class="zfr">{{ duration }}h</div>
        </div>
        <div class="zfr">
          走访人：<span class="khjl" style="margin-right: 12px;">{{ userName }}</span>
          行业名称：<span class="khjl">{{ industry }}</span>
        </div>
      </div>

      <div class="step_item" v-for="(item, index) in list" :key="index">
        <div calss="dkqd_box">
          <div class="dkqd">
            <div class="dian"></div>
            <div class="dkqd_top">打卡签到：</div>
            <div class="sign_time">{{ item.signInTime }}</div>
          </div>
          <div class="adress">
            <span class="sign_time">定位地址：</span>
            <span class="sign_time">{{ item.signInAddress }}</span>
          </div>
        </div>
        <div class="line"></div>
        <div class="dkqt_box">
          <div class="dkqd">
            <div class="dian"></div>
            <div class="dkqd_top">打卡签退：</div>
            <div class="sign_time">{{ item.signOutTime }}</div>
          </div>
          <div class="adress">
            <span class="sign_time">定位地址：</span>
            <span class="sign_time">{{ item.signOutAddress }}</span>
          </div>
          <div class="adress">
            <span class="sign_time">签退说明：</span>
            <span class="remark sign_time">{{ item.signOutRemark }}</span>
          </div>
        </div>
      </div>

      <div class="mian">
        <div class="photo_title">拍照</div>
        <div class="photo_box">
          <div
            class="photo_main"
            v-for="(item, index) in photoList"
            :key="index"
          >
            <img
              :src="`data:image/png;base64,${item}`"
              alt=""
              style="width: 50px; height: 50px; margin: 10px"
            />
          </div>
        </div>
      </div>
      <div class="mian">
        <div class="photo_title">信息反馈</div>
        <template v-if="isCustomTemplate">
          <div class="fk_main" v-if="feedBack">
            <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>
        </template>
        <template v-else>
          <div class="fk_main" v-if="feedBack">
            <div class="fk_main_item" v-if="'clientSuggestion' in feedBack">
              <span class="zfr"
                >客户反馈意见：{{ feedBack.clientSuggestion }}</span
              >
            </div>
            <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>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import navbar from "../../components/navbar/navbar.vue";
import { getRecordtDetail, getFeedbackTemplate } from "@/service/api/visiting";
import { Tab, Icon, Button, Uploader } from "vant";
export default {
  data() {
    return {
      custType: "",
      custName: "",
      userName: "",
      custGender: "",
      duration: "",
      list: [],
      baseInfo: {},
      photoList: [],
      feedBack: {},
      isCustomTemplate: false,
      templateList: [],
      industry: ''
    };
  },
  components: {
    navbar: navbar,
    VanTab: Tab,
    VanIcon: Icon,
    VanButton: Button,
    VanUploader: Uploader,
  },
  mounted() {
    this.custType = sessionStorage.getItem("custType");
    this.baseInfo = JSON.parse(sessionStorage.getItem("historyDetaiObj"));
    // this.custGender = this.baseInfo.custGender;
    this.initGetRecordtDetail();
  },
  methods: {
    initGetRecordtDetail() {
      const recordId = this.baseInfo.recordId;
      getRecordtDetail(recordId).then((res) => {
        if (res.code == 200) {
          this.custName = res.data.custName;
          this.userName = res.data.userName;
          this.industry = res.data.industry
          this.duration = res.data.duration.toFixed(2);
          this.list = res.data.signList;
          this.photoList = res.data.imageList;
          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
              );
            }
          }
        }
      });
    },
    getTemplateInfo(feedbackTemplateId) {
      getFeedbackTemplate({
        feedbackTemplateId: feedbackTemplateId,
      }).then((res) => {
        if (res.code == 200) {
          this.templateList = JSON.parse(res.data);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.wrapper {
  padding-top: 46px;
  min-height: 100vh;
  font-size: 16px;
  padding-bottom: 60px;
}

.item {
  background-color: #fff;
  padding: 15px;
  margin-top: 3px;
}

.item_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item_top_left {
  display: flex;
}

.item_name {
  margin-left: 10px;
}

.zfr {
  margin-top: 10px;
  color: rgb(140, 140, 140);
  font-size: 12px;
}

.khjl {
  color: black;
}

.main {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.main_item {
  background-color: rgb(249, 249, 250);
  width: 46%;
  padding: 15px;
}

.main_item_top {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.zc_tag {
  border: 1px solid rgb(70, 130, 255);
  color: rgb(70, 130, 255);
  font-size: 12px;
  padding: 3px 8px;
  margin-left: 10px;
  border-radius: 4px;
}

.userMan_box {
  background-color: rgb(35, 114, 235);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 5px;
  color: #fff;
}

.userWoMan_box {
  background-color: rgb(252, 123, 80);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 5px;
  color: #fff;
}

.dkqd {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.dkqd_top {
  color: black;
  font-size: 14px;
  margin-left: 10px;
}

.sign_time {
  font-size: 12px;
  color: rgb(140, 140, 140);
}

.remark {
  flex-wrap: wrap;
  word-break: break-all;
}

.adress {
  margin-bottom: 10px;
  padding-left: 18px;
}

.mian {
  background-color: #fff;
  padding: 15px;
  margin-top: 3px;
}

.fk_main_item {
  flex-wrap: wrap;
  word-break: break-all;
}

.photo_title {
  margin-bottom: 15px;
  font-weight: 600;
}

.dian {
  width: 7px;
  height: 7px;
  background-color: rgb(140, 140, 140);
  border-radius: 50%;
}

.step_item {
  position: relative;
  background-color: #fff;
  padding: 15px;
  margin-top: 3px;
}

.line {
  width: 3px;
  background-color: rgb(140, 140, 140);
  height: 58px;
  position: absolute;
  top: 25px;
  left: 17px;
}

.photo_box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  word-break: break-all;
}

.glr {
  margin-left: 15px;
}
</style>
