<!--
  @description:  专家入库-完善基本信息-基本信息表格
  @Modifier: 徐媛媛
  @routerPath: expert/expertEssentialInfo
  expert/perfectInfo/expertEssentialInfo
  @date: 2020/8/16-12:56
-->
<template>
  <div>
    <el-form ref="form" :model="formData" :rules="rules" :inline-message="true">
      <div class="bankTop">
        <h3>1.基本信息</h3>
      </div>
      <table class="from_table">
        <!--姓名--身份证号--->
        <tr>
          <td>
            <el-form-item label="真实姓名 " prop="realName" />
          </td>
          <td>
            <gx-input
              v-model.trim="formData.realName"
              gx-maxlength="varchar50"
              style="width: 90%"
            />
          </td>
          <td>
            <el-form-item label="身份证号" prop="certificateCode" />
          </td>
          <td>
            <gx-input
              v-model.trim="formData.certificateCode"
              gx-maxlength="varchar20"
              style="width: 90%"
              @blur="changeCertificateCode"
            />
          </td>
        </tr>
        <!--性别--手机号码--->
        <tr>
          <td>
            <el-form-item label="性别" prop="sex" />
          </td>
          <td>
            <el-radio-group v-model="formData.sex" disabled>
              <el-radio
                v-for="(item,index) in sex"
                :key="index"
                :label="item.typecode"
              >
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </td>
          <td>
            <el-form-item label="手机号码 " prop="mobile" />
          </td>
          <td>
            <el-input v-model="formData.mobile" maxlength="200" placeholder="请输入手机号码" />
          </td>
        </tr>
        <tr>
          <!--健康状况 中铸暂时注释----->
          <!-- <td>
            <el-form-item label="健康状况" prop="health" />
          </td>
          <td>
            <el-radio-group v-model="formData.health">
              <el-radio
                v-for="(item,index) in health"
                :key="index"
                :label="item.typecode"
              >
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </td> -->
          <!--是否退休--中铸暂时注释--->
          <!-- <td>
            <el-form-item label="是否退休" prop="retired" />
          </td>
          <td>
            <el-radio-group v-model="formData.retired">
              <el-radio
                v-for="(item,index) in retired"
                :key="index"
                :label="item.typecode"
              >
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </td> -->
          <!-- 电子邮箱 -->
          <td>
            <el-form-item label="电子邮箱" />
          </td>
          <td>
            <el-input v-model="formData.mail" maxlength="200" placeholder="请输入电子邮箱" />
          </td>
          <td>
            <el-form-item ref="expPerProName" label="常驻地区" prop="expPerProName" />
          </td>
          <td colspan>
            <!--地区组件-->
            <cascader
              ref="expPerCascader"
              :region-text="formData.expPerProName"
              style="width: 100%"
              filterable
              @regionData="permregionData"
            />
          </td>
          <!-- <td>
            <el-form-item label="是否愿意成为应急专家" prop="willingToEmergency" />
          </td>
          <td>
            <el-radio-group v-model="formData.willingToEmergency">
              <el-radio
                v-for="(item,index) in willingToEmergency"
                :key="index"
                :label="item.typecode"
              >
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </td> -->
        </tr>
        <!--工作单位--组织机构代码-->
        <tr>
          <td>
            <el-form-item label="工作单位 " prop="comName" />
          </td>
          <td colspan="3">
            <el-input v-model="formData.comName" style="width:calc(100% - 140px)" />
            <!-- <el-button type="primary" @click="selectBuyersShowDialogBtn('10')">
              选择
            </el-button>
            <el-button @click="clearUnit">
              清空
            </el-button> -->
          </td>
        <!-- <td>
            <el-form-item label="统一社用信用代码" prop="comCode" />
          </td>
          <td>
            <gx-input
              v-model.trim="formData.comCode"
              gx-maxlength="varchar20"
              style="width: 90%"
            />
          </td>
        </tr>
        <! -- 办公电话--家庭电话-->
        </tr><tr>
          <!-- <td>
            <el-form-item label="办公电话 " prop="workTelphone" />
          </td>
          <td>
            <el-input v-model="formData.workTelphone" maxlength="200" placeholder="请输入办公电话" />
          </td> -->
        </tr>
        <!--通讯地址--->
        <tr>
          <td>
            <el-form-item label="通讯地址 " prop="expProName" />
          </td>
          <td colspan="3">
            <cascader
              ref="expAreaCascader"
              :region-text="formData.expProName"
              style="width: 220px"
              filterable
              @regionData="commregionData"
            />
            <gx-input
              v-model.trim="formData.expArea"
              gx-maxlength="varchar1000"
              style="width: calc(96% - 220px );"
            />
          </td>
        </tr>
        <!--家庭电话-->
        <tr>
          <td>
            <el-form-item label="家庭电话 " prop="homeTelphone" />
          </td>
          <td>
            <gx-input
              v-model.trim="formData.homeTelphone"
              gx-maxlength="varchar20"
              style="width: 90%"
            />
          </td>
          <td>
            <el-form-item label="邮编" prop="postCode" />
          </td>
          <td>
            <gx-input
              v-model.trim="formData.postCode"
              gx-maxlength="varchar6"
              style="width: 90%"
            />
          </td>
        </tr>
      </table>
      <div class="bankTop">
        <h3>2.银行信息</h3>
        <!-- <p style="float:left;color:red">
          以下信息用于接收评审费，请认真填写！
        </p> -->
      </div>
      <table class="from_table">
        <!--开户行--银行卡号--->
        <tr>
          <td>
            <el-form-item label="开户行 " prop="openingBank" />
          </td>
          <td>
            <gx-input
              v-model.trim="formData.openingBank"
              gx-maxlength="varchar50"
              style="width: 90%"
            />
          </td>
          <td>
            <el-form-item label="银行卡号" prop="creditCard" />
          </td>
          <td>
            <gx-input
              v-model.trim="formData.creditCard"
              gx-maxlength="varchar20"
              style="width: 90%"
            />
          </td>
        </tr>
      </table>

      <div class="bankTop">
        <h3>3.证照</h3>
      </div>
      <table class="from_table">
        <!--开户行--银行卡号--->
        <tr>
          <td>
            <el-form-item ref="idImportFileUrl" label="身份证扫描证件 " prop="idImportFileUrl" />
          </td>
          <td>
            <upload
              :on-change="principalFile"
              :data="bprincipalType"
              :auto-delete="true"
              :auto-upload="true"
              :limit="1"
              file-ref="fileRefs"
              but-text="图片上传"
              title=""
              accept="image/jpg,image/jpeg,image/png"
              tip-text="上传附件格式(*.png;*.jpg;*.jpeg;*.pdf)"
            />
          </td>
          <td>
            <el-form-item ref="photoId" label="证件照" prop="photoId" />
          </td>
          <td>
            <upload
              :on-change="photoIdFile"
              :data="photoIdType"
              :auto-delete="true"
              :auto-upload="true"
              :limit="1"
              file-ref="fileRefs"
              but-text="图片上传"
              title=""
              accept="image/jpg,image/jpeg,image/png"
              tip-text="上传附件格式(*.png;*.jpg;*.jpeg;*.pdf)"
            />
          </td>
        </tr>
      </table>
      <expertSelectworkunitDialog
        ref="expertSelectworkunitDialog"
        @dialogDataBuyersInfo="dialogDataBuyersInfo"
      />
    </el-form>
  </div>
</template>

<script>
// mixins混入公共方法
import { expertBase } from './mixins/expertBase'
import { expertEssentialInfo } from './mixins/expertEssentialInfo'
// 组件
import upload from '@comp/common/updownload/upload'
import expertSelectworkunitDialog from '@views/expert/expertInfo/expertWorkPerience/selectworkunit-dialog' // 选择工作单位弹窗
import cascader from '@comp/common/cascader' // 地区三级联动
export default {
  name: 'EssentialInfoForm',
  components: {
    cascader,
    expertSelectworkunitDialog, // 选择工作单位弹窗
    upload
  },
  mixins: [expertBase, expertEssentialInfo],
  data() {
    return {
      rules: {

      }
    }
  },
  methods: {

  }
}
</script>
<style lang="less" scoped>
/deep/ .show-word-limit-padding {
  .el-input__inner {
    padding-right: 70px;
  }
}
.bankTop h3 {
  line-height: 50px;
  float: left;
  font-size: 16px;
}
/deep/.show-word-limit-padding {
  .el-input__inner {
    padding-right: 70px;
  }
}
.bankTop p {
  font-size: 12px;
  float: left;
  padding-left: 16px;
  line-height: 49px;
  color: red;
}
</style>
