<!--
  @description: 抽取申请-录入招标方代表-新增招标方代表
  @Modifier: 杨胜国
  @routerPath:
  @date: 2021-1-6-11:21
-->
<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="dialogData.dialog"
      :close-on-click-modal="false"
      :title="title"
      width="800px"
      custom-class="el-dialog__body-p0"
    >
      <div class="p16">
        <el-form
          ref="formBidderData"
          :rules="rules"
          :model="formData"
          :inline-message="true"
        >
          <table class="from_table">
            <tr>
              <td>
                <el-form-item ref="name" label="姓名" prop="name" />
              </td>
              <td>
                <el-input v-model.trim="formData.name" type="text" placeholder="请输入姓名" />
              </td>
              <td>
                <el-form-item ref="sex" label="性别" prop="sex" />
              </td>
              <td>
                <el-radio-group v-model="formData.sex">
                  <el-radio label="00">
                    男
                  </el-radio>
                  <el-radio label="01">
                    女
                  </el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item ref="idCard" label="身份证号" prop="idCard" />
              </td>
              <td>
                <el-input v-model.trim="formData.idCard" type="text" placeholder="请输入身份证号" />
              </td>
              <td>
                <el-form-item ref="mobilePhone" label="手机" prop="mobilePhone" />
              </td>
              <td>
                <el-input v-model.trim="formData.mobilePhone" type="text" placeholder="请输入手机" />
              </td>
            </tr>
          </table>
        </el-form>
        <!--提交按钮-->
        <div class="but_footer">
          <div class="but_footer-h">
            <div class="but_footer-but">
              <el-button :loading="confirmLoading" type="primary" @click="submit('formBidderData')">
                提 交
              </el-button>
              <el-button @click="dialogData.dialog = false">
                取消
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* api*/
import { saveOrUpdateRepresentInfo } from '@api/common/user'
/* 公用方法*/
import { characters1_auto, phone, makeSureId } from '@/assets/js/validate'// 校验输入内容
import { validFn } from '@assets/js/utils'// 校验
import { tendereeTypeGroup } from '@views/informationbase/mixins/tendereeTypeGroup'
// import { tendereeCommon } from '@views/informationbase/mixins/tendereeCommon'

export default {
  name: 'ExtractBidAddDialog',
  mixins: [tendereeTypeGroup],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {

      }
    }
  },
  data() {
    return {
      confirmLoading: false, // 暂存Loding
      title: '新增招标方代表',
      formData: {
        name: '', // 姓名
        sex: '00', // 性别（00男 01女）
        idCard: '', // 身份证号
        mobilePhone: ''// 手机号
      },
      rules: {
        name: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 姓名
        sex: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 性别
        idCard: [{ required: true, validator: makeSureId, trigger: 'blur' }], // 身份证号
        mobilePhone: [{ required: true, validator: phone, trigger: 'blur' }] // 手机号码
      }
    }
  },
  watch: {
    // 监听-弹框展示状态
    'dialogData.dialog'(val) {
      if (val) {
        // 弹框已打开
      }
    }
  },
  methods: {
    // 调用接口保存
    saveData(type) {
      this.confirmLoading = true// btnLoding
      const data = {
        ...this.formData,
        useStatus: type
      }
      saveOrUpdateRepresentInfo(data).then(res => {
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.confirmLoading = false// btnLoding
        this.dialogData.dialog = false
        this.formData.name = ''
        this.formData.sex = '00'
        this.formData.idCard = ''
        this.formData.mobilePhone = ''
        this.$emit('expertRefresh')
      }).catch(() => {
        this.confirmLoading = false// btnLoding
      })
    },
    // 提交
    submit(formName) {
      // 校验输入内容
      this.$refs[formName].validate((valid, field) => {
        if (valid) { // 校验通过
          this.saveData('01')
        } else {
          validFn(field, this)// 校验》跳转到为通过的参数地点
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
