<!--
  @description: 发起评审费报销-发放明细-查看专家信息弹框
  @Modifier: sunxinman
  @routerPath:
  @date: 2020/04/14-15:25
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.dialog"
    :close-on-click-modal="false"
    :title="title"
    width="600px"
    custom-class="el-dialog__body-p0"
    top="calc((100vh - 611px) / 2)"
  >
    <section class="main mb10">
      <table class="tableData">
        <tr>
          <td>姓名</td>
          <td>{{ evalfeeGrantData.expertName }}</td>
        </tr>
        <tr>
          <td>身份证号</td>
          <td>{{ evalfeeGrantData.idCard }}</td>
        </tr>
        <tr>
          <td>手机号</td>
          <td>{{ evalfeeGrantData.monile }}</td>
        </tr>
        <tr>
          <td>开户银行</td>
          <td>{{ evalfeeGrantData.bankName }}</td>
        </tr>
        <tr>
          <td>卡号</td>
          <td>{{ evalfeeGrantData.bankCard }}</td>
        </tr>
        <tr>
          <td>开户地址</td>
          <td>{{ evalfeeGrantData.bankAddress }}</td>
        </tr>
        <tr>
          <td>系统内/外</td>
          <td>
            <span v-for="(item,index) in systemSourceList" v-if="evalfeeGrantData.systemAbout===item.typecode" :key="index">
              {{ item.typename }}
            </span>
          </td>
        </tr>
        <tr>
          <td>评标人员类型</td>
          <td>
            <span v-for="(item,index) in evalPersonTypeList" v-if="evalfeeGrantData.expertType===item.typecode" :key="index">
              {{ item.typename }}
            </span>
          </td>
        </tr>
      </table>
    </section>
  </el-dialog>
</template>

<script>
/* api */
import { queryByIdEvalFeeDetailInfo } from '@api/fee/evalfee'
/* 公用方法*/
import { restoreInitialValue } from '@/assets/js/utils' // 常用方法
/* 混入 */
import { evalFeeMixin } from '../mixins/evalFeeMixin'
import { evalFeeGroupMixin } from '@views/fee/evalfee/mixins/evalFeeGroupMixin.js'// 字典
import { groupMixin } from '@views/intensiveeval/mixins/intensiveevalGroupMixin.js'// 集约化评标-字典
export default {
  name: 'ViewExpertDialog',
  mixins: [evalFeeMixin, evalFeeGroupMixin, groupMixin],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {
        return {
          dialog: false,
          datailId: ''// 发放明细id
        }
      }
    }
  },
  data() {
    return {
      title: '查看专家信息'
    }
  },
  watch: {
    // 弹框展示状态
    'dialogData.dialog'(val) {
      if (val) { // 弹框打开时
        this.initData()
      } else {
        restoreInitialValue(this.evalfeeGrantData)// 初始化内容
      }
    }
  },
  methods: {
    // 查询数据
    initData() {
      const datailId = this.dialogData.datailId// 发放明细ID
      if (datailId) { // 如果有详情明细id则调用接口
        queryByIdEvalFeeDetailInfo(datailId).then(res => {
          this.evalfeeGrantData = res.data
          this.evalfeeGrantData.id = datailId// 主键id
          this.evalfeeGrantData.expertType = res.data.evalPersonType // 评标人员类型
          this.evalfeeGrantData.bankAddress = res.data.openAddress // 开户地址
          this.evalfeeGrantData.bankCard = res.data.cardNumber // 银行卡号
        })
      } else { // 没有明细id时
        const data = {
          expertName: this.dialogData.data.expertName, // 姓名
          expertId: this.dialogData.data.expertId, // 专家id/招标人代表id
          idCard: this.dialogData.data.idCard, // 身份证号
          monile: this.dialogData.data.monile, // 手机号
          systemAbout: this.dialogData.data.systemAbout, // 系统内外
          expertType: this.dialogData.data.evalPersonType, // 评标人员类型
          bankAddress: this.dialogData.data.bankAddress, // 开户地址
          bankCard: this.dialogData.data.bankCard, // 银行卡号
          bankName: this.dialogData.data.bankName// 开户银行
        }
        // 合并参数
        this.evalfeeGrantData = { ...this.evalfeeGrantData, ...data }
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
