<!--
  @description: 专家-完善基本信息-职称信息弹窗
  @Modifier: 徐媛媛
  @routerPath: /expert/expertTitleInfo
  @date: 2020/8/12-18:20
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="organizationDialog"
    :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="certificateName" />
            </td>
            <td>
              <el-input
                v-model="formData.certificateName"
                placeholder="证书名称"
              />
            </td>
          </tr>
          <!--职称等级-->
          <tr>
            <td>
              <el-form-item label="职称等级" prop="titleLevel" />
            </td>
            <td>
              <el-select v-model="formData.titleLevel" placeholder="请选择职称等级" style="width: 100%">
                <el-option
                  v-for="item in titleLevelList"
                  :key="item.typecode"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </td>
          </tr>
          <!--颁发机构--->
          <tr>
            <td>
              <el-form-item label="颁发机构" prop="authorityName" />
            </td>
            <td>
              <el-input
                v-model.trim="formData.authorityName"
                placeholder="颁发机构"
                class="show-word-limit-padding"
              />
            </td>
          </tr>

          <!--证书编号-->
          <tr>
            <td>
              <el-form-item label="证书编号" prop="certificateNo" />
            </td>
            <td>
              <el-input
                v-model.trim="formData.certificateNo"
                placeholder="证书编号"
                class="show-word-limit-padding"
              />
            </td>
          </tr>
          <!--获得时间-->
          <tr>
            <td>
              <el-form-item label="获得时间 " prop="acquisitionDate" />
            </td>
            <td>
              <el-date-picker
                v-model="formData.acquisitionDate"
                :value-format="elValueFormatDate"
                type="date"
                placeholder="选择日期"
              />
            </td>
          </tr>
        </table>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="ensure()">提交</el-button>
      <el-button @click="organizationDialog = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口*/
import { submitOrUpdateExptExpertTitles } from '@/api/expert/expertInfo' // 获取用户任职经历信息 提交
import { saveOrUpdateExpertTitle } from '@/api/expert/expertChange' // 新增或修改专家某个职称信息
import { commonMxin } from '@/mixins/commonMxin'
import { expertInfo } from '../mixins/expertInfo'
import { filterDictText } from '@/assets/js/utils'// 常用方法
/* 组件*/
import { mapGetters } from 'vuex'
export default {
  name: 'BidWorkExperienceDialog',
  mixins: [commonMxin, expertInfo],
  inject: ['type'],
  data() {
    return {
      formData: {
        certificateNo: '', // 证书编号
        authorityName: '', // 颁发机构
        certificateName: '', // 证书名称
        acquisitionDate: '', // 颁发时间
        titleLevel: '', // 职称
        projectBuyersList: [],
        userId: '', // 用户id
        id: ''
      },
      rules: {
        certificateNo: [{ required: true, message: '请填写证书编号' }], // 证书编号
        authorityName: [
          { required: true, message: '颁发机构不能为空', trigger: 'blur' }
        ], // 颁发机构
        certificateName: [{ required: true, message: '请填写证书名称' }], // 证书名称
        acquisitionDate: [
          { required: true, message: '颁发时间不能为空', trigger: 'blur' }
        ], // 颁发时间
        titleLevel: [
          { required: true, message: '职称不能为空', trigger: 'blur' }
        ] // 职称
      },
      loading: true,
      confirmLoading: 'true',
      organizationDialog: false // 弹框打开状态
    }
  },
  computed: {
    ...mapGetters(['info'])
  },
  methods: {
    filterDictText,
    // 打开弹框
    openOrganizationDialog(typeData, index) {
      this.typeData = typeData
      this.index = index
      if (typeData === 'add') {
        this.formData = {
          certificateNo: '', // 证书编号
          authorityName: '', // 颁发机构
          certificateName: '', // 证书名称
          acquisitionDate: '', // 颁发时间
          titleLevel: '' // 职称
        }
      }
      this.organizationDialog = true // 打开弹框
    },
    ensure() {
      this.$refs.form.validate((valid, field) => {
        if (valid) {
          const userId = this.info.id
          this.formData.userId = userId
          const data = { ...this.formData }
          if (this.type === 'declarationChange') {
            saveOrUpdateExpertTitle(data)
              .then(res => {
                this.organizationDialog = false
                this.$emit('dialogDataBuyersInfo', res.data, this.typeData, this.index)
                this.confirmLoading = false // btnLoding
              })
              .catch(() => {
                this.confirmLoading = true // btnLoding
              })
          } else {
            const expertId = this.$route.query.id
            if (expertId) {
              data.expertId = expertId
              delete data.userId
            }
            submitOrUpdateExptExpertTitles(data)
              .then(res => {
                this.organizationDialog = false
                this.$emit('dialogDataBuyersInfo', res.data, this.typeData, this.index)
                this.confirmLoading = false // btnLoding
              })
              .catch(() => {
                this.confirmLoading = true // btnLoding
              })
          }
        } else {
          this.$message({
            message: '请选择任职信息',
            type: 'warning'
          })
        }
      })
    }
  }
}
</script>

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