<!--
  @description: 组件委员会-添加专家
  @Modifier: yf
  @routerPath:
  @date: 2020/7/7-17:16
-->
<template>
  <div>
    <el-dialog
      v-dialogDrag
      v-loading="loading"
      :visible.sync="dialogData.dialog"
      :close-on-click-modal="false"
      title="录入专家"
      width="750px"
      custom-class="el-dialog__body-p0"
    >
      <div class="main mb10 ">
        <el-form
          ref="fromData"
          :model="expertFormData"
          :rules="inputExpertRules"
          :inline-message="true"
        >
          <table class="from_table">
            <tr>
              <td><el-form-item prop="expertName" label="姓名" /></td>
              <td>
                <!-- <el-input v-model="expertFormData.expertName" />-->
                <gx-input
                  v-model.trim="expertFormData.expertName"
                  :disabled="selectExpertInfo"
                  placeholder="姓名"
                  style="width: calc(100% - 165px)"
                  gx-maxlength="varchar100"
                  @keyup.enter.native="searchExpert"
                />
                <el-button :disabled="queryButtonDisabled" type="primary" @click="searchExpert">
                  查询
                </el-button>
                <el-button :disabled="disabledClear" @click="clear">
                  清空
                </el-button>
              </td>
            </tr>
            <tr>
              <td> <el-form-item prop="idcardNo" label="身份证号" /></td>
              <td> <el-input v-model="expertFormData.idcardNo" :disabled="selectExpertInfo" /></td>
            </tr>
            <tr>
              <td><el-form-item prop="expertTelephone" label="手机号" /></td>
              <td> <el-input v-model="expertFormData.expertTelephone" /></td>
            </tr>
            <tr>
              <td><el-form-item prop="company" label="工作单位" /></td>
              <td> <el-input v-model="expertFormData.company" /></td>
            </tr>
            <tr>
              <td><el-form-item label="性别" prop="sex" /></td>
              <td>
                <el-radio
                  v-for="(item, index) in sexList"
                  :key="index"
                  v-model="expertFormData.sex"
                  :label="item.typename"
                >
                  {{ item.typename }}
                </el-radio>
              </td>
            </tr>
            <tr>
              <td><el-form-item label="专家类型" prop="personType" /></td>
              <td>
                <el-radio
                  v-for="(item, index) in personTypeList"
                  :key="index"
                  v-model="expertFormData.personType"
                  :label="item.typecode"
                >
                  {{ item.typename }}
                </el-radio>
              </td>
            </tr>
            <tr>
              <td><el-form-item label="评标类别" prop="expertTypes" /></td>
              <td>
                <el-checkbox-group v-model="expertFormData.expertTypes">
                  <el-checkbox
                    v-for="(item, index) in expertType"
                    :key="index"
                    :label="item.typecode"
                  >
                    {{ item.typename }}
                  </el-checkbox>
                </el-checkbox-group>
              </td>
            </tr>
          </table>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="entryExpertsClick">
          确 定
        </el-button>
        <el-button @click="dialogData.dialog=false">
          取 消
        </el-button>
      </div>
    </el-dialog>
    <!--选择专家弹框-->
    <procurementSearchExpertDialog :select-expert-dialog="selectExpertDialog" @selectExpert="selectExpert" />
  </div>
</template>
<script>
import { linkerName, phone, makeSureId } from '@assets/js/validate'
import { restoreInitialValue } from '@assets/js/utils'
// 公共字典
import { probidCommitteeMixin } from './mixins/procurementCommitteeMixins'
import { procurementCommitteeGroupMixin } from './mixins/procurementCommitteeGroupMixins'
// api
import {
  getProcurementExpertdrawOffByDrawOffId,
  saveOrUpdateProcurementExpertdrawOff
} from '@/api/procurement/procurementEvaluation'
// 弹框
import procurementSearchExpertDialog from './procurementSearchExpert-dialog.vue'
export default {
  components: {
    procurementSearchExpertDialog
  },
  mixins: [probidCommitteeMixin, procurementCommitteeGroupMixin],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {
        return {
          dialog: false,
          id: '' // 抽取id
        }
      }
    },
    getTenderBase: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      // 录入专家-直接直接指定
      expertFormData: {
        expertName: '', // 姓名
        idcardNo: '', // 身份证号
        expertTelephone: '', // 手机号
        company: '', // 公司
        sex: '', // 性别
        personType: '', // 专家类型
        expertTypes: [] // 评标类别
      },
      inputExpertRules: {
        expertName: [
          { required: true, validator: linkerName, trigger: 'blur' }
        ], // 姓名
        expertTelephone: [
          { required: true, validator: phone, trigger: 'blur' }
        ], // 联系方式
        idcardNo: [{ required: true, validator: makeSureId, trigger: 'blur' }], // 身份证
        expertTypes: [{ required: true, message: '请选择', trigger: 'blur' }], // 专家类型
        personType: [{ required: true, message: '请选择', trigger: 'blur' }], // 评标类别
        sex: [{ required: true, message: '请选择', trigger: 'blur' }], // 性别
        company: [{ required: true, message: '请输入', trigger: 'blur' }] // 工作单位
      },
      selectExpertDialog: {
        dialog: false,
        expertName: '', // 专家姓名
        packId: '' // 标段id
      }, // 选择专家弹框
      selectExpertInfo: false, // 选择专家信息
      disabledClear: false, // 是否禁用清空按钮
      queryButtonDisabled: false // 是否禁用查询按钮
    }
  },
  watch: {
    // 弹框打开状态
    'dialogData.dialog'(val) {
      if (val) {
        // 初始化禁用功能
        this.disabledClear = false
        this.selectExpertInfo = false
        this.initData()
      } else {
        // 清空 value
        restoreInitialValue(this.expertFormData)
        // 清空校验
        this.$refs.fromData.clearValidate()
      }
    }
  },
  methods: {
    // 初始数据
    initData() {
      // 数据回显i
      if (!this.dialogData.id) return
      getProcurementExpertdrawOffByDrawOffId(this.dialogData.id).then(res => {
        this.expertFormData = res.data
        this.expertFormData.expertTypes = Array.isArray(this.expertFormData.expertTypes) ? this.expertFormData.expertTypes : typeof this.expertFormData.expertTypes === 'string' ? this.expertFormData.expertTypes.join(',') : []
        // 姓名和身份证禁用
        this.selectExpertInfo = true
        this.disabledClear = true

        // 如果是 抽取专家的情况下 禁用 查询按钮
        if (this.expertFormData.personCometype === '02') {
          this.queryButtonDisabled = true
        }
      })
    },
    // 录入专家-添加-提交
    entryExpertsClick() {
      this.$refs.fromData.validate(valid => {
        if (valid) {
          const data = {
            ...this.expertFormData,
            personCometype: this.expertFormData === '' ? '01' : this.expertFormData.personCometype, // 人员来源方式 01 经办人录入
            packId: this.getTenderBase.packId, // 标段id
            tenderId: this.getTenderBase.tenderId, // 项目id
            useStatus: '00' // 专家状态 00 未生效 01已生效
          }
          this.loading = true
          saveOrUpdateProcurementExpertdrawOff(data)
            .then(res => {
              this.loading = false
              this.dialogData.dialog = false
              this.$emit('reload')
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    },
    // 搜索专家
    searchExpert() {
      // 判断姓名是否有值
      if (!this.expertFormData.expertName) {
        this.$message.warning('请输入专家姓名')
        return
      }
      // 弹框中保存专家姓名
      this.selectExpertDialog.expertName = this.expertFormData.expertName
      // 弹框中保存标段id
      this.selectExpertDialog.packId = this.getTenderBase.packId
      this.selectExpertDialog.dialog = true
    },
    // 选择专家信息
    selectExpert(data) {
      // 数据回显
      this.expertFormData.expertName = data.expertName
      this.expertFormData.idcardNo = data.idcardNo
      this.expertFormData.expertTelephone = data.expertTelephone
      this.expertFormData.sex = data.sex
      this.expertFormData.company = data.company
      this.selectExpertInfo = true
    },
    // 清空
    clear() {
      // 不在禁用专家信息修改
      this.selectExpertInfo = false
      restoreInitialValue(this.expertFormData)
    }
  }
}
</script>
