<!--
  @description: 招标人代表信息库-修改/变更
  @Modifier: haofengxian
  @routerPath: /informationbase/representativeTendereeUpdate
  @date: 2020-5-8-11:21
-->
<template>
  <div>
    <div class="title p0-16 clearfix">
      <div class="title-back pointer" @click="back">
        <i class="iconfont icon-fanhui mr10" />招标人代表信息库
      </div>
    </div>
    <div class="p0-16">
      <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 label="证件类型" />
            </td>
            <td>
              身份证
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="birthday" label="出生日期" prop="birthday" />
            </td>
            <td>
              <el-date-picker
                v-model="formData.birthday"
                :format="elValueFormatDate"
                type="date"
                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>
          <tr>
            <td>
              <el-form-item ref="workCompany" label="工作单位" prop="workCompany" />
            </td>
            <td>
              <el-input v-model.trim="formData.workCompany" type="text" placeholder="请输入工作单位" />
            </td>
            <td>
              <el-form-item ref="age" label="年龄" prop="age" />
            </td>
            <td>
              <el-input v-model.trim="formData.age" type="text" placeholder="请输入年龄" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="departName" label="部门" prop="departName" />
            </td>
            <td>
              <el-input v-model.trim="formData.departName" type="text" placeholder="请输入部门" />
            </td>
            <td>
              <el-form-item ref="regionCompany" label="所属区域公司" prop="regionCompany" />
            </td>
            <td>
              <el-input
                v-model="formData.regionCompany"
                placeholder="请选择所属区域公司"
                style="width: calc(100% - 160px)"
                disabled
              />
              <el-button type="primary" class="ml10" @click="selectBelongCompanyDialogBtn('',false)">
                选择
              </el-button>
              <el-button @click="clearBelongCompany('',false)">
                清空
              </el-button>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="duty" label="职务" prop="duty" />
            </td>
            <td>
              <el-input v-model.trim="formData.duty" type="text" placeholder="请输入职务" />
            </td>
            <td>
              <el-form-item ref="technicalTitle" label="职称" prop="technicalTitle" />
            </td>
            <td>
              <el-select v-model="formData.technicalTitle" placeholder="请选择">
                <el-option
                  v-for="item in technicalTitleList"
                  :key="item.value"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="education" label="学历" prop="education" />
            </td>
            <td>
              <el-select v-model="formData.education" placeholder="请选择">
                <el-option
                  v-for="item in educationList"
                  :key="item.value"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </td>
            <td>
              <el-form-item ref="professionQualified" label="职业资格" prop="professionQualified" />
            </td>
            <td>
              <el-input v-model.trim="formData.professionQualified" type="text" placeholder="请输入职业资格" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="major" label="专业" prop="major" />
            </td>
            <td>
              <el-input v-model.trim="formData.major" type="text" placeholder="请输入专业" />
            </td>
            <td>
              <el-form-item ref="graduateInstitutions" label="毕业院校" prop="graduateInstitutions" />
            </td>
            <td>
              <el-input v-model.trim="formData.graduateInstitutions" type="text" placeholder="请输入毕业院校" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="industryName" label="行业" prop="industryName" />
            </td>
            <td>
              <el-input v-model.trim="formData.industryName" type="text" placeholder="请输入行业" />
            </td>
            <td>
              <el-form-item ref="joinWorkDate" label="参加工作日期" prop="joinWorkDate" />
            </td>
            <td>
              <el-date-picker
                v-model="formData.joinWorkDate"
                :format="elValueFormatDate"
                type="date"
                placeholder="选择参加工作日期"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="bankCard" label="银行卡号" prop="bankCard" />
            </td>
            <td>
              <el-input v-model.trim="formData.bankCard" type="text" placeholder="请输入银行卡号" />
            </td>
            <td>
              <el-form-item ref="departScale" label="单位规模" prop="departScale" />
            </td>
            <td>
              <el-input v-model.trim="formData.departScale" type="text" placeholder="请输入单位规模" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="bankAddress" label="开户银行地址" prop="bankAddress" />
            </td>
            <td>
              <el-input v-model.trim="formData.bankAddress" type="text" placeholder="请输入开户银行地址" />
            </td>
            <td>
              <el-form-item ref="bankName" label="开户银行名称" prop="bankName" />
            </td>
            <td>
              <el-input v-model.trim="formData.bankName" type="text" placeholder="请输入开户银行名称" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="单位审批附件" />
            </td>
            <td colspan="3">
              <upload
                ref="upload"
                :data="upLoadData"
                :auto-delete="true"
                :auto-upload="isAutoUpload"
                :action="importFileUrl"
                title=""
                file-ref="fileRef"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="工作经历" prop="workExperience" />
            </td>
            <td colspan="3">
              <el-input
                v-model="formData.workExperience"
                :autosize="{ minRows: 4, maxRows: 4 }"
                type="textarea"
                maxlength="4000"
                show-word-limit
                style="width: 96%"
              />
            </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="save('formBidderData')">
              保 存
            </el-button>
            <el-button :loading="confirmLoading" type="primary" @click="submit('formBidderData')">
              生 效
            </el-button>
            <el-button @click="back('form')">
              返 回
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!--所属公司选择弹框-->
    <subsidiaryOrganDialog
      ref="subsidiaryOrgan"
      @subsidiaryOrganDataInfo="subsidiaryOrganDataInfo"
    />
  </div>
</template>

<script>
/* api*/
import { upLoadFileUrl } from '@/api/common/uploadCenter' // 文件上传地址
import { saveOrUpdateRepresentInfo, queryRepresentInfoById } from '@api/common/user'
/* 公用方法*/
import { characters1_auto, phone, bankCardNumber, makeSureId } from '@/assets/js/validate'// 校验输入内容
import { validFn } from '@assets/js/utils'// 校验
import upload from '@comp/common/updownload/upload' // 附件上传组件
import subsidiaryOrganDialog from '@views/bidding/bidProject/bidProjectDepart/subsidiaryOrgan-dialog'
import { tendereeTypeGroup } from '../mixins/tendereeTypeGroup'
import { tendereeCommon } from '../mixins/tendereeCommon'

export default {
  name: 'RepresentativeTendereeUpdate',
  components: {
    upload, // 文件上传
    subsidiaryOrganDialog // 所属公司-选择弹框
  },
  mixins: [tendereeTypeGroup, tendereeCommon],
  data() {
    return {
      isAutoUpload: false, // 是否手动上传
      importFileUrl: upLoadFileUrl, // 文件上传地址
      confirmLoading: false, // 暂存Loding
      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' }], // 手机号码
        birthday: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 出生日期
        workCompany: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 工作单位
        regionCompany: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 所属区域公司
        duty: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 职务
        education: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 学历
        industryName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 行业
        bankCard: [{ required: true, validator: bankCardNumber, trigger: 'blur' }], // 银行卡号
        joinWorkDate: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 参加工作日期
        departScale: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 单位规模
        bankName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 开户银行名称
        bankAddress: [{ required: true, validator: characters1_auto, trigger: 'blur' }] // 开户银行地址
      }
    }
  },
  mounted() {
    this.formData.id = this.$route.params.id
    if (this.formData.id) {
      this.queryRepresentInfo()
      this.upLoadData.bizId = this.formData.id
      this.isAutoUpload = true
    }
  },
  methods: {
    // 根据id获取招标人代表详情
    queryRepresentInfo() {
      queryRepresentInfoById(this.formData.id).then(res => {
        this.formData = res.data
      }).catch(() => {

      })
    },
    // 保存组装数据
    assemblyData() {
      const data = {
        ...this.formData
      }
      // 出生日期
      if (data.birthday) {
        data.birthday = this.$Moment(data.birthday).format(this.momentDate)
      } else {
        data.birthday = null
      }
      // 参加工作日期
      if (data.joinWorkDate) {
        data.joinWorkDate = this.$Moment(data.joinWorkDate).format(this.momentDate)
      } else {
        data.joinWorkDate = null
      }
      return data
    },
    // 调用接口保存
    saveData(type) {
      this.formData.useStatus = type
      const data = this.assemblyData()// 保存组装数据
      this.confirmLoading = true// btnLoding
      saveOrUpdateRepresentInfo(data).then(res => {
        this.submitUploadFiles(res.data) // 手动上传附件
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        if (type === '01') {
          this.back()
        }
        this.confirmLoading = false// btnLoding
      }).catch(() => {
        this.confirmLoading = false// btnLoding
      })
    },
    // 保存
    save(formName) {
      // 校验输入内容
      this.$refs[formName].validate((valid, field) => {
        if (valid) { // 校验通过
          this.saveData('00')
        } else {
          validFn(field, this)// 校验》跳转到为通过的参数地点
        }
      })
    },
    // 生效
    submit(formName) {
      // 校验输入内容
      this.$refs[formName].validate((valid, field) => {
        if (valid) { // 校验通过
          this.$confirm('确认生效吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            confirmButtonClass: 'confirmBtn',
            cancelButtonClass: 'cancelBtn',
            type: 'warning'
          }).then(() => {
            this.saveData('01')
          }).catch(() => {
          })
        } else {
          validFn(field, this)// 校验》跳转到为通过的参数地点
        }
      })
    },
    // 手动上传附件
    submitUploadFiles(id) {
      this.upLoadData.bizId = id
      this.$refs.upload.submitUpload() // 手动上传附件
    },
    /* -----------------所属公司信息 start----------------*/
    // 挑选所属公司
    selectBelongCompanyDialogBtn(index, type) {
      // true 表示为添加多招标人挑选所属公司
      this.$refs.subsidiaryOrgan.openShowDialog(index, type)
    },
    // 清除所属公司
    clearBelongCompany(index, type) {
      // type 为真表示多招标人选择所谓公司 否则为主招标人
      if (type) {
        this.projectBuyersList[index].regionCompany = ''// 所属公司
        this.projectBuyersList[index].regionCompanyId = '' // 所属公司id
      } else {
        this.formData.regionCompany = ''//  所属公司
        this.formData.regionCompanyId = ''// 所属公司id
      }
    },
    // 所属公司已选信息
    subsidiaryOrganDataInfo(data, index, type) {
      // type 为真表示多招标人选择所谓公司 否则为主招标人
      if (type) {
        this.projectBuyersList[index].regionCompany = data.departName// 所属公司
        this.projectBuyersList[index].regionCompanyId = data.id // 所属公司id
      } else {
        this.formData.regionCompany = data.departName//  所属公司
        this.formData.regionCompanyId = data.id // 所属公司id
      }
    },
    /* -----------------所属公司信息 end----------------*/
    // 返回
    back() {
      this.$router.push({
        path: '/informationbase/representativeTendereeList'
      })
    }
  }
}
</script>

<style scoped>

</style>
