<template>
  <div class="visitPage">
    <div class="storeType" v-for="(item, index) in contentData" :key="index">
      <div class="title" :style="{ background: item.bagColor }">{{ item.title }}</div>
      <div class="itemContent">
        <div class="temList" v-for="(list, ind) in item.visitDetail" :key="ind" v-if="resData">
          <div class="itemLeft">
            <div class="label">{{ list.leftTable }}</div>
            <div class="label">
              <template v-if="fromType == 'noVisit'">
                {{ resData[item.titleProp][list.leftProp] }}
              </template>
              <template v-if="fromType == 'createStore'">
                {{ Micrometer(resData[item.titleProp][list.leftProp]) }}
                <span class="unit">{{ list.leftUnit }}</span>
              </template>
            </div>
          </div>
          <div class="itemRight" :style="{ width: fromType == 'noVisit' ? '150px' : '160px' }">
            <div class="label">{{ list.rightTable }}</div>
            <div
              class="label"
              :style="labelStyle(list)"
              @click="onClick(item, list, resData[item.titleProp][list.rightProp])">
              <span v-if="list.rightProp">
                {{ Micrometer(resData[item.titleProp][list.rightProp]) }}
              </span>
              {{ list.rightUnit }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mask" v-if="maskShow"><van-loading type="spinner" color="#1989fa" /></div>
  </div>
</template>

<script>
import store from '@/store';
import { buryingPoint } from '@/api/index';
export default {
  name: 'visitPage',
  props: {
    // 折叠数据label
    contentData: {
      type: Array,
      default: [],
    },
    // 遮罩层
    maskShow: {
      type: Boolean,
      default: false,
    },
    // 接口返回折叠数据
    resData: {
      type: Object,
      default: () => {},
    },
    // 用户等级
    empLevel: {
      type: String,
    },
    // 来源类型 'noVisit':拜访(实时); 'createStore':建店;
    fromType: {
      type: String,
    },
  },
  data() {
    return {};
  },
  methods: {
    labelStyle(list) {
      return {
        'text-decoration': list.rightIsClick ? 'underline' : 'none',
        color: list.rightIsClick ? '#0057ba' : '#666666',
      };
    },
    // 跳转详情
    onClick(item, list, value) {
      // 埋点
      buryingPoint({
        systemModel: '提示类',
        buryingPointType: 7,
        buryingPointValue: value,
        buryingPointName: item.title + '-' + list.rightTable,
        buryingPointPosition: this.fromType == 'noVisit' ? '拜访(实时)' : '建店',
      });
      // 等级3（销售员）：点击未拜访；进入未拜访列表（noVIsit）；点击建店：进入我的-我的客户（storemanagementlist）
      // 等级2或1（销售部主管和大区负责人）：进入统页面（hintDetail）
      if (this.empLevel == '3') {
        if (this.fromType == 'noVisit') {
          // 进入未拜访列表（noVIsit）
          // 获取移动端获取用户信息接口
          store.dispatch('setActivaTypeStore', item.titleProp);
          // this.$router.push({ path: '/noVisit', query: { activeName: item.titleProp } });
          this.$router.push({ path: '/noVisit' });
        } else if (this.fromType == 'createStore') {
          // 进入我的-我的客户（storemanagementlist）
          // 1：未完工；2：未结案
          // let storeStatus = list.rightTable.indexOf('未完工') != -1 ? '1' : '2';
          // localStorage.setItem('storeStatus', storeStatus);
          // this.$router.push({ path: '/storemanagementlist', query: { storeStatus: storeStatus } });
          // 2025.01.16 销售员 建店进入新建页面 unCreateStore
          store.dispatch('activaCreateTypeStore', list.rightProp);
          this.$router.push({ path: '/unCreateStore' });
        }
      } else {
        // 销售部主管和大区负责人跳转统计页面
        this.$router.push({ path: '/hintDetail', query: { fromType: this.fromType } });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.visitPage {
  position: relative;
  .storeType {
    display: flex;
    /* padding: 8px 0; */
    flex-direction: column;
    .title {
      color: #fff;
      height: 21px;
      margin-right: 6px;
      /* width: 50px; */
      text-align: center;
      line-height: 21px;
      border-radius: 2px;
      margin: 4px 0;
      width: max-content;
      padding: 0 3px;
    }
    .itemContent {
      /* display: flex; */
      color: #666666;
      flex: 1;
      .temList {
        display: flex;
        justify-content: space-between;
        .itemLeft {
          display: flex;
          flex: 1;
        }
        .itemRight {
          /* width: 120px; */
          display: flex;
        }
      }
    }
  }
  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
