<!--
  @description: 专家-完善基本信息-基本信息查看
  @Modifier: wxy
  @routerPath:
  @date:  2020-09-07 16:41:26
-->
<template>
  <div class="projectInfoDetail">
    <table class="tableData">
      <div class="page-title">
        1.基本信息
        <template v-if="tableData.auditStatus === '02'">
          <el-button type="primary" @click="onModify">
            修改
          </el-button>
        </template>
      </div>
      <tr>
        <td>姓名</td>
        <td>{{ tableData.realName }}</td>
        <td>身份证号</td>
        <td>{{ tableData.certificateCode }}</td>
      </tr>
      <tr>
        <td>性别</td>
        <td>{{ filterDictText(sexList, tableData.sex) }}</td>
        <td>手机号</td>
        <td>{{ tableData.mobile }}</td>
      </tr>
      <!-- 暂时注释2020、12.03 -->
      <!-- <tr>
        <td>是否退休</td>
        <td>{{ filterDictText(retired, tableData.retired) }}</td>
        <td>健康状况</td>
        <td>{{ filterDictText(health, tableData.health) }}</td>
      </tr> -->
      <tr>
        <!-- <td>是否愿意成为应急专家</td>
        <td>{{ filterDictText(willingToEmergency, tableData.willingToEmergency) }}</td> -->
      </tr>
      <tr>
        <td>工作单位</td>
        <td>{{ tableData.comName }}</td>
        <td>统一社用信用代码</td>
        <td>{{ tableData.comCode }}</td>
      </tr>
      <tr>
        <td>电子邮箱</td>
        <td>{{ tableData.mail }}</td>
        <!-- <td>办公电话</td>
        <td>{{ tableData.workTelphone }}</td> -->
        <td>
          常住地区
        </td>
        <td>
          <!--地区组件-->
          <cascader
            ref="expPerCascader"
            :region-text="tableData.expPerProName"
            style="width: 100%"
            filterable
            class="expertCascader"
            @regionData="permregionData"
          />
          <!-- {{ tableData.expPerProName }}{{ tableData.expPerCityName }} -->
        </td>
      </tr>
      <tr>
        <td>通讯地址</td>
        <td>
          <cascader
            ref="expAreaCascader"
            style="width: 100%"
            class="expertCascader"
            :region-text="tableData.expProName"
            filterable
            @regionData="commregionData"
          />
          <!-- {{ tableData.expProName }}
          {{ tableData.expCountyName }} -->
        </td>
        <td>
          详细地址
        </td>
        <td>          {{ tableData.expArea }}</td>
      </tr>
      <tr>
        <td>家庭电话</td>
        <td>{{ tableData.homeTelphone }}</td>
        <td>邮政编码</td>
        <td>{{ tableData.postCode }}</td>
      </tr>
      <tr>
        <td>开户行</td>
        <td>{{ tableData.openingBank }}</td>
        <td>银行卡号</td>
        <td>{{ tableData.creditCard }}</td>
      </tr>
      <tr>
        <td>身份证扫描</td>
        <td>
          <downloadFile :data="idCards" />
        </td>
        <td>证件照</td>
        <td>
          <downloadFile :data="idPhoto" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import cascader from '@comp/common/cascader' // 地区三级联动
import { queryExpertBaseInfo } from '@/api/expert/expertInfo'
import { queryTBExpertInfoHistoryByApplyId } from '@/api/expert/expertChange' // 申请变更专家基本信息——查询
/* 公共方法 */
import { filterDictText } from '@/assets/js/utils'
import { expertBaseInfoMixins } from './mixins/expertBaseInfoMixins'
/* 公共组件*/
import downloadFile from '@comp/common/updownload/downloadFile'

export default {
  name: 'ExpertBaseInfoDetail',
  components: {
    cascader,
    downloadFile
  },
  mixins: [expertBaseInfoMixins],
  data() {
    return {
      tableData: {
        type: this.$route.query.type,
        realName: '', // 姓名
        certificateCode: '', // 身份证号
        sex: '', // 性别
        mobile: '', // 手机号
        mail: '', // 电子邮箱
        health: '', // 健康状况
        retired: '', // 是否退休
        willingToEmergency: '', // 是否愿意成为应急专家
        comName: '', // 工作单位
        comCode: '', // 统一社用信用代码
        workTelphone: '', // 办公电话
        expPerCityCode: '', // 常住地址
        expArea: '', // 通讯地址
        homeTelphone: '', // 家庭电话
        postCode: '', // 邮编
        openingBank: '', // 开户行
        creditCard: '', // 银行卡号
        auditStatus: '',
        expPerProName: '',
        expPerCityName: '',
        expPerCountyCode: ''
      }, // 基本信息
      modifyDetail: '',
      retiredList: [] // 退休字典信息
    }
  },
  created() {
    // 获取基本信息
    this.initData()
  },
  methods: {
    commregionData(projectAreaName, location) {
      this.tableData.expCityCode = location[1]
      this.tableData.expCountyCode = location[2]
      this.tableData.expProCode = location[0]
      this.tableData.expProName = projectAreaName
      // this.$set(this.formData, 'expProName', projectAreaName)
    },
    // 所在区域三级联动组件使用 常驻地区1
    permregionData(projectAreaName, location) {
      this.tableData.expPerCityCode = location[1]
      this.tableData.expPerProCode = location[0]
      this.tableData.expPerCountyCode = location[2]
      this.tableData.expPerProName = projectAreaName
      // this.$set(this.formData, 'expPerCityName', projectAreaName)
    },
    filterDictText, // 引入字典值替换文本通用方法
    initData() {
      const data = {
        expertId: this.$route.params.expertId
      } // 专家id
      if (this.type === 'declarationChange') {
        queryTBExpertInfoHistoryByApplyId(data).then(res => {
          this.tableData = res.data.returnData
          this.idCards.bizId = this.tableData.id // 身份证附件id
          this.idPhoto.bizId = this.tableData.id // 证件照附件id
        }).catch(() => {})
      } else {
        const expertId = this.$route.query.id
        if (expertId) {
          data.expertId = expertId
        }
        queryExpertBaseInfo(data).then(res => {
          this.tableData = res.data.returnData
          this.idCards.bizId = this.tableData.id // 身份证附件id
          this.idPhoto.bizId = this.tableData.id // 证件照附件id
          const location = [this.tableData.expProCode, this.tableData.expCityCode, this.tableData.expCountyCode]
          const perLocation = [this.tableData.expPerProCode, this.tableData.expPerCityCode, this.tableData.expPerCountyCode]
          this.$refs.expAreaCascader.addressChange(location)
          this.$refs.expPerCascader.addressChange(perLocation)
        }).catch(() => {})
      }
    },
    onModify() {
      this.modifyDetail = true
      const data = this.modifyDetail
      this.$emit('noAudit', data)
    }
  }
}
</script>

<style lang='less' scoped>
.baseInfo{
   font-weight: bolder;
}
.expertCascader {
  pointer-events: none;

}
 /deep/ .expertCascader .el-input__inner{
border:1px solid transparent;
  font-size: 13px;
  margin-left: -20pxs;

}
 /deep/ .expertCascader .el-icon-arrow-down:before{
  content: '';
}
</style>
