<!--
  @description: 专家-教育经历/添加历史评标记录弹窗
  @Modifier: 徐媛媛
  @routerPath:/expert/expertHistorEvaluation
  @date: 2020/8/12-13:27
-->
<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="projectName" />
            </td>
            <td>
              <el-input
                v-model="formData.projectName"
                placeholder="项目名称"
              />
            </td>
          </tr>
          <!--* 金额(元)--->
          <tr>
            <td>
              <el-form-item label="金额(元)" prop="money" />
            </td>
            <td>
              <!--金额组件-->
              <money :thousands="true" :money-value="formData" name="money" width="90%" />
            </td>
          </tr>
          <!--评标时间-->
          <tr>
            <td>
              <el-form-item label="评标时间 " prop="theDate" />
            </td>
            <td>
              <el-date-picker
                v-model="formData.theDate"
                :value-format="elValueFormatDate"
                type="date"
                placeholder="选择日期"
              />
            </td>
          </tr>
          <!--证明人-->
          <tr>
            <td>
              <el-form-item label="证明人" prop="certifier" />
            </td>
            <td>
              <el-input
                v-model.trim="formData.certifier"
                placeholder="证明人"
                class="show-word-limit-padding"
              />
            </td>
          </tr>
          <!--证明人联系方式-->
          <tr>
            <td>
              <el-form-item label="证明人联系方式 " prop="certifierPhone" />
            </td>
            <td>
              <el-input
                v-model.trim="formData.certifierPhone"
                placeholder="证明人联系方式"
                class="show-word-limit-padding"
              />
            </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 { submitOrUpdateExptExpertEvaluationHistory } from '@/api/expert/expertHistorEvaluation' // 获取用户任职经历信息 提交
import { saveOrUpdateTBExpertEvaluationHistoryHistory } from '@/api/expert/expertChange'//  完善基本信息提交接口
/* 公用方法*/
import { commonMxin } from '@/mixins/commonMxin'
import { upLoadFileUrl } from '@/api/common/uploadCenter'
import { mapGetters } from 'vuex'
import { validateInput, phoneAndText, linkerName } from '@/assets/js/validate'
/* 组件 */
import money from '@/components/common/money/money.vue'
export default {
  name: 'BidWorkExperienceDialog',
  components: {
    money
  },
  mixins: [commonMxin],
  inject: ['type'],
  data() {
    return {
      formData: {
        money: '', // 金额（单位万元）
        theDate: '', // 评标时间
        certifier: '', // 证明人
        projectName: '', // 项目名称
        certifierPhone: '', // 证明人联系方式
        projectBuyersList: [],
        id: ''
      },
      rules: {
        money: [{ required: true, message: '请填写金额', trigger: 'blur' }], // 金额（单位万元）
        theDate: [{ required: true, message: '评标时间不能为空', trigger: 'blur' }], // 评标时间
        certifier: [{ required: true, validator: linkerName, trigger: 'blur' }], // 证明人
        projectName: [{ required: true, validator: validateInput, trigger: 'blur' }], // 项目名称
        certifierPhone: [{ required: true, validator: phoneAndText, trigger: 'blur' }] // 证明人联系方式
      },
      loading: true,
      confirmLoading: 'true',
      idImportFileUrl: upLoadFileUrl,
      organizationDialog: false // 弹框打开状态
    }
  },
  computed: {
    ...mapGetters(['info'])
  },
  methods: {
    // 打开弹框
    openOrganizationDialog(typeData, index) {
      this.typeData = typeData
      this.index = index
      if (typeData === 'add') {
        this.formData = {
          money: '', // 金额（单位万元）
          theDate: '', // 评标时间
          certifier: '', // 证明人
          projectName: '', // 项目名称
          certifierPhone: '' // 证明人联系方式
        }
      }
      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 }
          this.confirmLoading = true // btnLoding
          if (this.type === 'declarationChange') {
            saveOrUpdateTBExpertEvaluationHistoryHistory(data).then(res => {
              this.$emit('dialogDataBuyersInfo', res.data, this.typeData, this.index)
              this.organizationDialog = false // 关闭弹窗
            }).catch(() => {
              this.confirmLoading = false // btnLoding
            })
          } else {
            const expertId = this.$route.query.id
            if (expertId) {
              data.expertId = expertId
              delete data.userId
            }
            submitOrUpdateExptExpertEvaluationHistory(data).then(res => {
              this.$emit('dialogDataBuyersInfo', res.data, this.typeData, this.index)
              this.organizationDialog = false // 关闭弹窗
            }).catch(() => {
              this.confirmLoading = false // btnLoding
            })
          }
        } else {
          this.$message({
            message: '请选择历史评标记录',
            type: 'warning'
          })
        }
      })
    }
  }
}
</script>

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