<!--
  @description: 发起评审费报销-发放明细-编辑专家信息弹框
  @Modifier: sunxinman
  @routerPath:
  @date: 2020/04/14-16: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">
      <el-form
        ref="fromData"
        :rules="rules"
        :model="evalfeeGrantData"
        :inline-message="true"
      >
        <table class="from_table">
          <tr>
            <td>
              <el-form-item label="姓名" />
            </td>
            <td>{{ evalfeeGrantData.expertName }}</td>
          </tr>
          <tr>
            <td>
              <el-form-item label="身份证号" />
            </td>
            <td>{{ evalfeeGrantData.idCard }}</td>
          </tr>
          <tr>
            <td>
              <el-form-item label="手机号" />
            </td>
            <td>{{ evalfeeGrantData.monile }}</td>
          </tr>
          <tr>
            <td>
              <el-form-item
                ref="bankName"
                label="开户银行"
                prop="bankName"
              />
            </td>
            <td>
              <el-input
                v-model="evalfeeGrantData.bankName"
                maxlength="200"
                show-word-limit
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="bankCard" label="卡号" prop="bankCard" />
            </td>
            <td>
              <el-input
                v-model="evalfeeGrantData.bankCard"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="bankAddress" label="开户地址" prop="bankAddress" />
            </td>
            <td>
              <el-input
                v-model="evalfeeGrantData.bankAddress"
                show-word-limit
                maxlength="1000"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="系统内/外" />
            </td>
            <td>
              <span v-for="(item,index) in systemSourceList" v-if="evalfeeGrantData.systemAbout===item.typecode" :key="index">
                {{ item.typename }}
              </span>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="评标人员类型" />
            </td>
            <td>
              <span v-for="(item,index) in evalPersonTypeList" v-if="evalfeeGrantData.expertType===item.typecode" :key="index">
                {{ item.typename }}
              </span>
            </td>
          </tr>
        </table>
      </el-form>
    </section>
    <!--操作按钮-->
    <div class="but_footer">
      <div class="but_footer-h" />
      <div class="but_footer-but">
        <el-button type="primary" @click="saveData">
          生效
        </el-button>
        <el-button @click="dialogData.dialog=false">
          取消
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
/* 接口*/
import { queryByIdEvalFeeDetailInfo, updateExpertInfo } from '@api/fee/evalfee'
/* 公用方法*/
import { restoreInitialValue } from '@/assets/js/utils' // 常用方法
/* 常用方法 */
import { characters1_50, validateInput, bankCardNumber } from '@/assets/js/validate'// 校验输入内容
/* 混入 */
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: 'EditExpertDialog',
  mixins: [evalFeeMixin, evalFeeGroupMixin, groupMixin],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {
        return {
          dialog: false,
          data: {}, // 编辑时需要的参数
          datailId: ''// 发放明细id
        }
      }
    }
  },
  data() {
    return {
      title: '编辑专家信息',
      rules: {
        bankName: [{ required: true, validator: characters1_50, trigger: 'blur' }], // 开户银行
        cardNumber: [{ required: true, validator: bankCardNumber, trigger: 'blur' }], // 卡号
        bankAddress: [{ required: true, validator: validateInput, trigger: 'blur' }]// 开户地址
      }
    }
  },
  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
        })
      } 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 }
      }
    },
    // 提交
    saveData() {
      // 校验输入内容
      this.$refs.fromData.validate((valid, field) => {
        if (valid) { // 校验通过
          this.confirmLoading = true
          updateExpertInfo(this.evalfeeGrantData).then(res => {
            this.dialogData.data.id = res.data// 更新专家明细id
            this.$message.success(res.header.msg)
            this.confirmLoading = false
            this.dialogData.dialog = false
            this.$emit('GetByMeetingIdStageId')
          }).catch(() => {
            this.confirmLoading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
