<!--
 @description: 专家-完善基本信息-职业资格弹窗
  @Modifier: 徐媛媛
  @routerPath: /expert/expertOccupation
  @date: 2020/8/12-18:20
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.dialog"
    :close-on-click-modal="false"
    title="添加职业资格"
    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 class="from_table">
          <!--职业资格证书--->
          <tr>
            <td>
              <el-form-item label="职业资格证书" prop="practiceQualificationId" />
            </td>
            <td>
              <el-select
                v-model="formData.practiceQualificationId"
                placeholder="职业资格证书"
                style="width:100%"
                @change="selectChange"
              >
                <el-option
                  v-for="item in queryAllTBExpertList"
                  :key="item.typecode"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </td>
          </tr>
          <!--颁发机构--->
          <tr>
            <td>
              <el-form-item label="颁发机构" prop="certificateCompany" />
            </td>
            <td>
              <el-input
                v-model.trim="formData.certificateCompany"
                placeholder="颁发机构"
                class="show-word-limit-padding"
              />
            </td>
          </tr>
          <!--注册证书编号-->
          <tr>
            <td>
              <el-form-item label="注册证书编号 " prop="certificateNo" />
            </td>
            <td>
              <el-input
                v-model="formData.certificateNo"
                placeholder="注册证书编号"
              />
            </td>
          </tr>
          <!--获得时间-->
          <tr>
            <td>
              <el-form-item label="获得时间" prop="acquisitionDate" />
            </td>
            <td>
              <el-date-picker
                v-model="formData.acquisitionDate"
                :value-format="elValueSaveFormat"
                type="date"
                placeholder="选择日期"
              />
            </td>
          </tr>
          <!--* 有效期至-->
          <tr>
            <td>
              <el-form-item label="有效期至" prop="invalidDate" />
            </td>
            <td>
              <el-date-picker
                v-model="formData.invalidDate"
                :value-format="elValueSaveFormat"
                :disabled="formData.longTerm==='01'"
                style="width:75%"
                type="date"
                placeholder="选择日期"
              />
              <el-checkbox
                v-model="formData.longTerm"
                true-label="01"
                false-label="00"
              >
                长期
              </el-checkbox>
            </td>
          </tr>
          <!--证明文件-->
          <tr>
            <td>
              <el-form-item label="证明文件" prop="credentialsId" />
            </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>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="ensure()">提交</el-button>
      <el-button @click="dialogData.dialog = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口*/
import {
  checkTSUserInfoOnlyIDCard
} from '@/api/expert/expertOccupation' // 获取评标专业 提交
import { queryTBExpertCertificationById } from '@/api/expert/expertscloud'
import { queryTBExpertCertificationHistoryById } from '@/api/expert/expertChange'//  完善基本信息提交接口
import { filterDictText } from '@/assets/js/utils'// 常用方法

import { upLoadFileUrl } from '@/api/common/uploadCenter'
import upload from '@comp/common/updownload/upload'
/* 混合开发方法-参数字段*/
import { commonMxin } from '@/mixins/commonMxin'
import { expertInfo } from '../mixins/expertInfo'
import { randomData, restoreInitialValue } from '@assets/js/utils'// 清空value值
/* 组件*/
import { mapGetters } from 'vuex'
export default {
  name: 'BidWorkExperienceDialog',
  components: {
    upload
  },
  mixins: [commonMxin, expertInfo],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {
        return {
          dialog: false, // 展示状态
          id: '', // 编辑时才会有财务状况id
          oldId: '' // 修改时用的Id
        }
      }
    }
  },
  data() {
    return {
      type: this.$route.meta.type,
      formData: {
        acquisitionDate: '', // 取得时间
        certificateCompany: '', // 颁发机构
        certificateNo: '', // 证书编号
        invalidDate: '', // 有效期至
        practiceQualificationId: '', // 职业资格id
        practiceQualificationName: '', // 职业资格name
        longTerm: '',
        id: ''
      },
      photoIdType: {
        bizId: '', // 业务主键Id
        fileType: 'EXPERT_UPLOAD_PROFESSIONAL_PROVE' // 文件类型
      },
      openOrganizationData: {
        type: '',
        index: '',
        data: ''
      },
      queryAllTBExpertBasePracticeQualificationList: [],
      rules: {
        acquisitionDate: [{ required: true, message: '请选择获得时间' }], // 取得时间
        certificateCompany: [
          { required: true, message: '颁发机构不能为空', trigger: 'blur' }
        ], // 颁发机构
        certificateNo: [{ required: true, message: '证书编号不能为空' }], // 证书编号
        practiceQualificationId: [
          { required: true, message: '请选择职业资格证书', trigger: 'blur' }
        ], // 职业资格id
        invalidDate: [
          { required: true, message: '请选择有效期', trigger: 'blur' }
        ] // 有效期至
      },
      idImportFileUrl: upLoadFileUrl,
      organizationDialog: false // 弹框打开状态
    }
  },
  computed: {
    ...mapGetters(['info'])
  },
  watch: {
    // 营业执照有效期-复选框
    'formData.longTerm'() {
      this.businessLicenseCheckChange()// 营业执照有效期-复选框
    }
  },
  created() {
    // 生成附件bizId
    if (this.dialogData.id === '') {
      this.dialogTitle = '添加职业资格'
      this.formData.id = randomData()// 主键id
      // this.formData.changeType = '00'
      this.photoIdType.bizId = this.formData.id// 财务审计报告扫描件
    } else {
      this.dialogTitle = '编辑职业资格'
      const data = {
        id: this.dialogData.id
      }
      this.seeData(data)
    }
  },
  methods: {
    filterDictText,
    //  证件扫描件
    photoIdFile(file, fileList) {
      if (fileList.length > 0) {
        this.$set(this.formData, 'businessLicenseType', 'true')// 上传了
      } else {
        this.$set(this.formData, 'businessLicenseType', '')// 未上传
      }
    },
    // 打开弹框
    // openOrganizationDialog(type, data, index) {
    //   // this.type = type
    //   // this.index = index
    //   // this.organizationDialog = true // 打开弹框
    //   // queryAllTBExpertBasePracticeQualification().then(res => {
    //   //   this.queryAllTBExpertBasePracticeQualificationList = res.data
    //   // })
    //   this.openOrganizationData.type = type
    //   this.openOrganizationData.index = index
    //   this.openOrganizationData.data = data
    //   if (this.openOrganizationData.type === 'edit') {
    //     this.dialogTitle = '编辑任职经历'
    //     this.seeData(data)
    //   } else if (this.openOrganizationData.type === 'add') {
    //     this.dialogTitle = '添加任职经历'
    //     if (this.formData.id) { // 非编辑时&&有上次的遗留信息时
    //       this.restoreInitial()// 恢复初始值
    //     }
    //     this.formData.id = randomData()
    //     this.photoIdType.bizId = this.formData.id// 证书扫描
    //   }
    //   this.organizationDialog = true // 打开弹框
    // },
    seeData(data) {
      if (this.type === 'declarationChange') {
        queryTBExpertCertificationHistoryById(data).then(res => {
          this.formData = res.data
          this.photoIdType.bizId = this.formData.id
        })
      } else {
        queryTBExpertCertificationById(data).then(res => {
          this.formData = res.data
          this.photoIdType.bizId = this.formData.id
        })
      }
    },
    // 恢复初始值
    restoreInitial() {
      restoreInitialValue(this.formData)
    },
    // 职业资格证书-复选框
    businessLicenseCheckChange() {
      /* 与后面的复选框"长期"不可同时选中*/
      if (this.formData.longTerm === '01') { // 选择时
        this.formData.invalidDate = ''
        // 取消校验空
        delete this.rules.invalidDate// 职业资格证书有效期
      } else {
        // 打开校验
        this.rules.invalidDate = [{ required: true, message: '请选择', trigger: 'change' }]// 职业资格证书有效期
      }
    },
    // 职业资格证书changge
    selectChange(val) {
      let obj = {}
      obj = this.queryAllTBExpertList.find((item) => { // 这里的queryAllTBExpertList就是上面遍历的数据源
        return item.typecode === val // 筛选出匹配数据
      })
      // 获取name值
      this.formData.practiceQualificationName = obj.typename
    },
    // 提交信息
    ensure() {
      this.$refs.form.validate((valid, field) => {
        if (valid) {
          const userId = this.info.id
          this.formData.userId = userId
          const data = { ...this.formData }
          const expertId = this.$route.query.id
          if (expertId) {
            data.expertId = expertId
            delete data.userId
          }
          checkTSUserInfoOnlyIDCard(data).then(res => {
            this.$emit('dialogDataBuyersInfo', this.formData)
            this.dialogData.dialog = false
          })
        } else {
          this.$message({
            message: '请选择任职信息',
            type: 'warning'
          })
        }
      })
    }
  }
}
</script>

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