<template>
  <div class="app-container">
    <div class="title">
      拜访信息
      <el-button class="backBtn" type="primary" size="mini" @click="backFn">返回</el-button>
    </div>
    <el-form :model="visitForm" ref="visitForm" size="mini" :inline="true" label-width="110px">
      <el-row>
        <el-col :span="16">
          <el-form-item label="门店名称:">
            <span>{{ visitForm.storeName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="门店组织:">
            <span>{{ visitForm.deptName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上级门店组织:">
            <span>{{ visitForm.parentDeptName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="拜访人:">
            <span>{{ visitForm.nickName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="拜访日期:">
            <span>{{ visitForm.visitsTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="进店:">
            <span>{{ visitForm.startTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="离店:">
            <span>{{ visitForm.stopTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="拜访用时(分钟):">
            <span>{{ visitForm.dwellTime }}</span>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="定位城市:">
            <span>{{ visitForm.locationCity }}</span>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="定位省:">
            <span>{{ visitForm.province || '' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="定位市:">
            <span>{{ visitForm.city || '' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="定位区(县):">
            <span>{{ visitForm.district || '' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="定位描述:" class="w85">
            <span>{{ visitForm.locationRemark }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="异常事由:" class="w85">
            <span>{{ visitForm.abnormalReasonStr }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="updateTimeShow">
          <el-form-item label="更新时间:" class="w85">
            <span>{{ visitForm.updateTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注:" class="w85">
            <span>{{ visitForm.remark }}</span>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          v-if="visitForm.visitRemarks != null && visitForm.visitRemarks.length > 0">
          <el-form-item label="点评:" class="w85">
            <p style="margin: 0">
              {{ visitForm.visitRemarks[0].deptName }} - {{ visitForm.visitRemarks[0].postName }} -
              {{ visitForm.visitRemarks[0].nickName }}的点评
            </p>
            <p><span v-html="visitForm.visitRemarks[0].remarkContent"></span></p>
            <p>点评时间: {{ visitForm.visitRemarks[0].sendTime }}</p>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="title" v-if="visitForm.visitSource == 1">常规采集项</div>
    <el-table
      v-if="visitForm.visitSource == 1"
      v-loading="loading"
      :data="visitForm.itemCollectionAnswers">
      <el-table-column label="任务" prop="taskName" />
      <!--      <el-table-column label="页签" align="center" prop="nickName" width="100" />-->
      <el-table-column label="采集项名称" prop="itemName"></el-table-column>
      <el-table-column label="回答值" prop="answerValue">
        <template slot-scope="scope">
          <span>{{ optionNameFormats(scope.row, scope.column) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="title mt10" v-if="visitForm.visitSource == 1">竞品采集项</div>
    <el-table
      v-if="visitForm.visitSource == 1"
      v-loading="loading"
      :data="visitForm.productCollectionAnswers">
      <el-table-column label="任务" align="center" prop="taskName" />
      <!--      <el-table-column label="页签" align="center" prop="nickName" width="100" />-->
      <el-table-column label="采集项名称" align="center" prop="itemName"></el-table-column>
      <el-table-column label="采集项说明" align="center" prop="optionName">
        <template slot-scope="scope">
          <span>{{ optionNameFormat(scope.row, scope.column) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回答值" align="center" prop="answerValue" />
    </el-table>
    <div class="title" v-if="visitForm.visitSource == 1">物料领取</div>
    <el-table
      v-if="visitForm.visitSource == 1"
      v-loading="loading"
      :data="visitForm.wuliaoCollectionAnswers">
      <el-table-column label="任务" align="center" prop="taskName" />
      <el-table-column label="物料类型" align="center" prop="signDictype" />
      <el-table-column label="物料名称" align="center" prop="itemName" />
      <el-table-column label="使用量" align="center" prop="answerValue" />
    </el-table>
    <div class="title mt10" v-if="visitForm.visitSource == 1">
      照片类型
      <el-select
        v-model="photoType"
        clearable
        placeholder="请选择"
        size="mini"
        style="margin-left: 10px"
        @change="getQueryPhoto">
        <el-option
          v-for="item in photoTypeOptions"
          :key="item.dictValue"
          :label="item.dictLabel"
          :value="item.dictValue">
        </el-option>
      </el-select>
    </div>
    <el-row class="mt10" :gutter="20" style="padding: 0 20px">
      <el-col :span="4" v-for="(item, index) in imgList" :key="index">
        <el-image :src="item.fileUrl" :preview-src-list="previewsrcList" class="imagePic">
        </el-image>
      </el-col>
    </el-row>
    <div v-if="ListHistoryList.length > 0">
      <div class="title mt10">审批历史</div>
      <div v-for="(item, index) in ListHistoryList" :key="index" style="margin: 0 14px">
        <p>{{ item.modelName }}</p>
        <el-table :data="item.processList">
          <el-table-column label="审批人" align="center" prop="assigneeName" width="150" />
          <el-table-column label="审批意见" align="center" prop="comment" />
          <el-table-column label="审批时间" align="center" prop="endTime" width="150">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.endTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- <zmap :mapdata="mapdata" @centerFn="centerFn" :showMap="showMap"></zmap> -->
  </div>
</template>

<script>
import { getVisitResultsDetail, getQueryPhoto, visitListHistory } from '@/api/sfa/visitResults';
import request from '@/utils/request';
import { format, formatTotalDateSub } from '@/utils/activiti/myUtil';
// import zmap from '@/components/map/index';
export default {
  // name: "VisitResultsDetail",
  // components: { zmap },
  data() {
    return {
      loading: true,
      updateTimeShow: false,
      photoType: '',
      photoTypeOptions: [],
      visitForm: {},
      imgList: [],
      previewsrcList: [],
      productAnswerOptions: [],
      abnormalReasonTypeOptions: [],
      ListHistoryList: [],
      showMap: false,
      // mapdata: {},
    };
  },
  created() {
    // 照片类型
    this.getDicts('sfa_task_photo_type').then((response) => {
      this.photoTypeOptions = response.data;
    });
    // this.getDicts("sfa_abnormal_reason").then(response => {
    //   this.abnormalReasonTypeOptions = response.data;
    // });
    // 竞品采集项说明sfa_product_answer_type
    // sfa_product_answer_type
    this.getDicts('sfa_product_answer_type').then((response) => {
      this.productAnswerOptions = response.data;
    });
    this.getDetailData();
    this.getQueryPhoto();
  },
  methods: {
    centerFn(val) {
      // this.visitForm.locationRemark=val.address
      this.visitForm.locationCity = val.addressComponents;
    },
    getListHistoryListFn() {
      visitListHistory({ visitsId: this.$route.query.id }).then((response) => {
        this.ListHistoryList = response.data;
      });
    },
    getDetailData() {
      let query = this.$route.query;
      this.showMap = false;
      getVisitResultsDetail(query.id).then((responses) => {
        this.visitForm = responses.data;
        if (responses.data.stopTime != responses.data.updateTime) {
          this.updateTimeShow = true;
        } else {
          this.updateTimeShow = false;
        }
        if (this.visitForm.visitRemarks != null && this.visitForm.visitRemarks.length > 0) {
          this.visitForm.visitRemarks[0].remarkContent =
            this.visitForm.visitRemarks[0].remarkContent.replace(/\n/g, '<br>');
        }
        this.mapdata = {
          lng: responses.data.lon,
          lat: responses.data.lat,
        };
        this.showMap = true;
        this.loading = false;
        this.getListHistoryListFn();
      });
    },
    optionNameFormat(row, column) {
      return this.selectDictLabel(this.productAnswerOptions, row.optionName);
    },
    optionNameFormats(row, column) {
      if (row.answerType != 'sm') {
        return row.answerValue;
      } else {
        if (row.answerValue != null && row.answerValue != '') {
          return (
            '系统编码:' +
            row.answerValue.split(',')[0] +
            ',条形码编号:' +
            row.answerValue.split(',')[1]
          );
        }
        return '';
      }
    },
    // abnormalReasonFormat(column){
    //   return this.selectDictLabel(this.abnormalReasonTypeOptions, column);
    // },
    getQueryPhoto() {
      let query = this.$route.query;
      let obj = {
        visitId: query.id,
        photoType: this.photoType,
      };
      this.previewsrcList = [];
      this.imgList = [];
      getQueryPhoto(obj).then((response) => {
        this.imgList = response.data;
        // let url = '';
        // process.env.NODE_ENV == 'development' ? url = process.env.VUE_APP_Target : url = process.env.VUE_APP_BASE_API;
        this.imgList.forEach((item, index) => {
          item.fileUrl = item.fileUrl;
          this.previewsrcList.push(item.fileUrl);
        });
      });
    },
    backFn() {
      this.$router.push({ path: '/route/visitResults' });
    },
  },
};
</script>
<style lang="scss">
.w85 {
  width: 100%;
  .el-form-item__content {
    width: 80%;
    word-break: break-all;
  }
}
</style>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  .backBtn {
    float: right;
  }
}
.mt10 {
  margin-top: 10px;
}
.imagePic {
  width: 100%;
  border-radius: 6px;
}
</style>
