<!--
  @description: 专家-任职经历/添加任职经历弹窗
  @Modifier: 徐媛媛
  @routerPath:
  @date: 2020/8/12-13:27
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="data.dialog"
    :close-on-click-modal="false"
    :title="dialogTitle"
    width="650px"
    append-to-body
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <div>
      <el-form ref="form" :model="formData" :rules="rules" :inline-message="true">
        <table key="index" class="from_table">
          <!--单位名称--->
          <tr>
            <td>
              <el-form-item label="单位名称" prop="comName" />
            </td>
            <td>
              <gx-input
                v-model="formData.comName"
                gx-maxlength="varchar50"
                placeholder="请输入单位名称"
                style="width:calc(100% - 174px)"
              />
              <el-button type="primary" @click="selectBuyersShowDialogBtn()">
                选择
              </el-button>
              <el-button @click="clearUnit">
                清空
              </el-button>
            </td>
          </tr>
          <!--机构代码--->
          <tr>
            <td>
              <el-form-item label="统一社会信用代码" prop="comCode" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.comCode"
                gx-maxlength="varchar20"
                placeholder="请输入统一社会信用代码"
                class="show-word-limit-padding"
              />
            </td>
          </tr>
          <!--入职时间-->
          <tr>
            <td>
              <el-form-item label="入职时间 " prop="startDate" />
            </td>
            <td>
              <el-date-picker
                v-model="formData.startDate"
                :value-format="elValueFormatDate"
                type="date"
                placeholder="选择日期"
              />
            </td>
          </tr>
          <!--职务-->
          <tr>
            <td>
              <el-form-item label="职务" prop="postName" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.postName"
                gx-maxlength="varchar20"
                placeholder="请输入职务"
                class="show-word-limit-padding"
              />
            </td>
          </tr>
          <!--从事专业-->
          <tr>
            <td>
              <el-form-item label="从事专业 " prop="specialty" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.specialty"
                gx-maxlength="varchar20"
                placeholder="请输入从事专业"
                class="show-word-limit-padding"
              />
            </td>
          </tr>
          <!--单位电话-->
          <tr>
            <td>
              <el-form-item label="单位电话" prop="telOffice" />
            </td>
            <td>
              <gx-input
                v-model.trim="formData.telOffice"
                gx-maxlength="varchar20"
                placeholder="请输入单位电话"
                class="show-word-limit-padding"
              />
            </td>
          </tr>
          <!--回避单位-->
          <tr>
            <td>
              <el-form-item label="回避单位" prop="isAvoidCompany" />
            </td>
            <td>
              <el-radio-group v-model="formData.isAvoidCompany">
                <el-radio label="00">
                  是
                </el-radio>
                <el-radio label="01">
                  否
                </el-radio>
              </el-radio-group>
            </td>
          </tr>
          <!--证明文件-->
          <tr>
            <td>
              <el-form-item ref="workExperienceType" label="证明文件" prop="workExperienceType" />
            </td>
            <td>
              <upload
                ref="upload"
                :on-change="workExperienceChange"
                :data="workExperienceData"
                :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>
      </el-form>
      <!--选择工作单位弹窗-->
      <expertSelectworkunitDialog
        ref="expertSelectworkunitDialog"
        @dialogDataBuyersInfo="dialogDataBuyersInfo"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button :loading="confirmLoading" type="primary" @click="ensure('form')">提交</el-button>
      <el-button :loading="confirmLoading" @click="data.dialog = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口*/
import { submitOrUpdateExptExpertCareer } from '@/api/expert/expertInfo' // 获取用户任职经历信息 提交
import { saveOrUpdateTBExpertCareerHistory } from '@/api/expert/expertChange.js' //  变更提交所有信息接口
import { upLoadFileUrl } from '@/api/common/uploadCenter'
import { queryTBExpertCareerById } from '@/api/expert/expertscloud'

/* 混合开发方法-参数字段*/
import { creditCode, checkNum } from '@/assets/js/validate'
import { mapGetters } from 'vuex'
import { commonMxin } from '@/mixins/commonMxin'
import { randomData, restoreInitialValue } from '@assets/js/utils'// 清空value值
import { expertWorkPerience } from '@/views/expert/expertInfo/expertWorkPerience/mixins/expertWorkPerience'

/* 组件*/
import expertSelectworkunitDialog from './selectworkunit-dialog' // 选择工作单位弹窗
import upload from '@comp/common/updownload/upload'
export default {
  name: 'WorkExperienceDialog',
  components: {
    expertSelectworkunitDialog,
    upload
  },
  mixins: [commonMxin, expertWorkPerience],
  props: {
    // 弹框展示状态
    data: {
      type: Object,
      default: function() {
        return {
          dialog: false, // 展示状态
          id: '', // 编辑时才会有证书id
          oldId: '' // 修改时用的Id
        }
      }
    },
    projectData: {
      type: Object,
      default: function() {
        return {
        }
      }
    }
  },
  data() {
    return {
      dialogTitle: '', // 标题名称
      openOrganizationData: {
        type: '',
        index: '',
        data: ''
      },
      formData: {
        comName: '', // 单位名称
        comCode: '', // 社会统一信用代码
        startDate: '', // 入职时间
        postName: '', // 职务
        specialty: '', // 从事专业
        telOffice: '', // 单位电话
        isAvoidCompany: '01,' // 回避单位
      },
      // 任职经历证明文件
      workExperienceData: {
        bizId: '', // 业务主键Id
        fileType: 'EXPERT_UPLOAD_CAREER_PROVE' // 文件类型
      },
      rules: {
        comName: [
          { required: true, message: '请填写工作单位', trigger: 'blur' }
        ], // 所在部门
        comCode: [
          { required: true, validator: creditCode, trigger: 'blur' }
        ], // 组织机构代码
        startDate: [
          { required: true, message: '开始时间不能为空', trigger: 'blur' }
        ],
        isAvoidCompany: [{ required: true, message: '请填写回避单位', trigger: 'blur' }], // 所在部门
        postName: [
          { required: true, message: '职务不能为空', trigger: 'blur' }
        ], // 组织机构代码
        telOffice: [
          { required: true, validator: checkNum, message: '单位电话不能为空', trigger: 'blur' }
        ],
        specialty: [
          { required: true, message: '从事专业不能为空', trigger: 'blur' }
        ]
      },
      idImportFileUrl: upLoadFileUrl,
      confirmLoading: false, // Loading
      title: '' // 标题
    }
  },
  computed: {
    ...mapGetters(['info'])
  },
  created() {
    // 生成附件bizId
    if (this.data.id === '') {
      this.dialogTitle = '添加任职经历'
      this.formData.id = randomData()// 主键id
      // this.formData.changeType = '00'
      this.workExperienceData.bizId = this.formData.id// 财务审计报告扫描件
    } else {
      this.dialogTitle = '编辑任职经历'
      const data = {
        id: this.data.id
      }
      this.seeData(data)
    }
  },
  methods: {
    // 获取证书详情
    seeData(data) {
      queryTBExpertCareerById(data).then(res => {
        this.formData = res.data
        this.workExperienceData.bizId = this.formData.id
      })
    },
    // 恢复初始值
    restoreInitial() {
      restoreInitialValue(this.formData)
      this.workExperienceData.bizId = ''// 附件主键id
    },
    dialogDataBuyersInfo(currentData) {
      this.formData.comName = currentData.comName
      this.formData.comCode = currentData.comCode
    },
    //  证件扫描件
    workExperienceChange(file, fileList) {
      if (fileList.length > 0) {
        this.formData.workExperienceType = 'true'// 上传了
      } else {
        this.formData.workExperienceType = '' // 未上传
      }
    },
    selectBuyersShowDialogBtn() {
      this.$refs.expertSelectworkunitDialog.openOrganizationDialog()
    },
    // 清空工作单位
    clearUnit() {
      this.ruleForm.comName = ''
      this.ruleForm.comCode = ''
      this.ruleForm.comId = ''
    },
    // 提交信息
    ensure(formName) {
      this.$refs[formName].validate((valid, field) => {
        if (valid) {
          this.confirmLoading = true // Loading
          const experId = this.info.id
          this.formData.experId = experId
          const data = { ...this.formData }
          if (this.projectData.type === 'declarationChange') {
            saveOrUpdateTBExpertCareerHistory(data).then(res => {
              this.data.dialog = false
              this.restoreInitial()// 恢复初始值
              this.$emit('workPerienceInfo', this.formData)
              this.confirmLoading = false // Loading
            }).catch(() => {
              this.confirmLoading = false // Loading
            })
          } else {
            const expertId = this.$route.query.id
            if (expertId) {
              data.expertId = expertId
            }
            submitOrUpdateExptExpertCareer(data).then(res => {
              this.data.dialog = false
              this.restoreInitial()// 恢复初始值
              this.$emit('workPerienceInfo', this.formData)
              this.confirmLoading = false // Loading
            }).catch(() => {
              this.confirmLoading = false // Loading
            })
          }
        } else {
          this.$message({
            message: '请填写完整任职经历信息',
            type: 'warning'
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.el-dialog__body {
  height: 55vh;
}
</style>
