<!--
  @description: 添加证书/编辑弹框
  @Modifier: qk
  @routerPath:supplierDeclaration/supplier/enterpriseQualification
  @date: 2020-2-20 14:35
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="data.dialog"
    :close-on-click-modal="false"
    :title="dialogTitle"
    width="700px"
    custom-class="el-dialog__body-p0"
  >
    <div
      class="main mb10"
    >
      <el-form
        ref="form"
        :model="formDataDialog"
        :rules="rules"
        :inline-message="true"
      >
        <table class="from_table">
          <!-- 证书名称 -->
          <tr>
            <td><el-form-item ref="certificateName" :label="language.Certificatename" prop="certificateName" /></td>
            <td>
              <el-select
                v-model="formDataDialog.certificateType"
                :placeholder="language.Pleasechoose"
                filterable
                @change="getVendorId"
              >
                <el-option
                  v-for="(item,index) in supplierCertificateTypeList"
                  :key="index"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </td>
          </tr>
          <!-- 证书等级 -->
          <tr>
            <td><el-form-item ref="awardLevel" :label="language.CertificateLevel" prop="awardLevel" /></td>
            <td> <el-input v-model="formDataDialog.awardLevel" /></td>
          </tr>
          <!-- 证书编号 -->
          <tr>
            <td><el-form-item ref="certificateNo" :label="language.Certificatenumber" prop="certificateNo" /></td>
            <td><el-input v-model="formDataDialog.certificateNo" /></td>
          </tr>
          <!-- 发证单位 -->
          <tr>
            <td><el-form-item ref="issuingUnit" :label="language.Certificationunit" prop="issuingUnit" /></td>
            <td> <el-input v-model="formDataDialog.issuingUnit" /></td>
          </tr>
          <!-- 发证时间 -->
          <tr>
            <td><el-form-item ref="issuingTime" :label="language.Issuingtime" prop="issuingTime" /></td>
            <td>
              <el-date-picker
                v-model="formDataDialog.issuingTime"
                :picker-options="pickerOptionsEnd"
                type="date"
                placeholder="选择日期"
              />
            </td>
          </tr>
          <!-- 有效期至 -->
          <tr>
            <td><el-form-item ref="validityEndTime" :label="language.Validuntil" prop="validityEndTime" /></td>
            <td>
              <el-date-picker
                v-model="formDataDialog.validityEndTime"
                :disabled="formDataDialog.longTerm==='01'"
                :picker-options="pickerOptionsStart"
                type="date"
                placeholder="选择日期"
                style="width: calc(100% - 100px)"
              />
              <el-checkbox
                v-model="formDataDialog.longTerm"
                true-label="01"
                false-label="00"
                @change="businessLicenseCheckChange"
              >
                长期
              </el-checkbox>
            </td>
          </tr>
          <!-- 证书扫描件 -->
          <tr>
            <td>
              <el-form-item
                ref="certificateScanType"
                :label="language.Certificatescanningcopy"
                prop="certificateScanType"
              />
            </td>
            <td>
              <upload
                v-if="data.dialog"
                :on-change="fileChange"
                :data="certificateScanData"
                :auto-delete="true"
                :auto-upload="true"
                :limit="1"
                file-ref="fileRef"
                but-text="文件上传"
                title=""
                accept="application/msword,doc,docx,application/pdf,image/jpg,image/jpeg,image/png"
                tip-text="上传格式 (.doc .docx .pdf .jpg .png)"
              />
            </td>
          </tr>
        </table>
      </el-form>
    </div>
    <!--底部操作按钮-->
    <!-- 提交 -->
    <span slot="footer" class="dialog-footer">
      <el-button :loading="confirmLoading" type="primary" @click="ensure('form')">确 认</el-button>
      <el-button :loading="confirmLoading" @click="cancel()">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口*/
import { queryCertificateInfo, saveCertificateInfo } from '@api/supplier/supplierCertificate'
/* 公用方法*/
import { characters1_50, validateInput } from '@assets/js/validate'// 校验输入内容
import { randomData, restoreInitialValue } from '@assets/js/utils'// 清空value值

/* 混合开发*/
import { declareHegSupperGroupMixin } from '@views/supplier/editorDeclaration/mixins/declareHegSupperGroupMixin'// 供应商-字典
import { declareHegSupperMixins } from '@views/supplier/editorDeclaration/mixins/declareHegSupperMixins'// 供应商-公用方法参数
/* 组件*/
import upload from '@comp/common/updownload/upload'
import { mapGetters } from 'vuex'
export default {
  name: 'EnterpriseQualificationDialog',
  components: {
    upload
  },
  mixins: [declareHegSupperGroupMixin, declareHegSupperMixins],
  props: {
    // 弹框展示状态
    data: {
      type: Object,
      default: function() {
        return {
          dialog: false, // 展示状态
          id: '', // 编辑时才会有证书id
          oldId: '' // 修改时用的Id
        }
      }
    }
  },
  data() {
    return {
      dialogTitle: '', // 弹框标题
      confirmLoading: false, // Loading
      formDataDialog: {},
      // 不能选择开始之前的时间
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.formDataDialog.issuingTime) {
            return time.getTime() < this.formDataDialog.issuingTime
          }
        }
      },
      // 不能选择有效期至之后的时间
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.formDataDialog.validityEndTime) {
            return time.getTime() > this.formDataDialog.validityEndTime
          }
        }
      },
      // 校验输入内容
      rules: {
        certificateName: [{ required: true, message: '请选择', trigger: 'change' }], // 证书名称
        certificateNo: [{ required: true, validator: characters1_50, trigger: 'blur' }], // 证书编号
        issuingUnit: [{ required: true, validator: validateInput, trigger: 'blur' }], // 发证单位
        issuingTime: [{ required: true, message: '请选择', trigger: 'change' }], // 发证时间
        validityEndTime: [{ required: true, message: '请选择', trigger: 'blur' }], // 有效期至
        certificateScanType: [{ required: true, message: '请上传', trigger: 'change' }]// 证书扫描是否已上传
      }
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  watch: {
    // 弹框展示状态
    data: {
      handler(newVal) {
        // 判断是否为编辑
        if (newVal.dialog) { // 编辑时
          if (newVal.id) { // 编辑时
            this.dialogTitle = '编辑证书'
            this.seeData()// 获取证书详情
          } else {
            this.dialogTitle = '添加证书'// 添加证书
            if (this.formDataDialog.id) { // 非编辑时&&有上次的遗留信息时
              this.restoreInitial()// 恢复初始值
            }
            this.formDataDialog.changeType = '00' // 变更类型 00新增 01修改
            this.formDataDialog.id = randomData()// 主键id
            this.certificateScanData.bizId = this.formDataDialog.id// 证书扫描
          }
        }
      },
      deep: true
    }
  },
  created() {
    this.getCertificateDictionaries()// 获取字典信息
  },
  methods: {
    // 获取证书详情
    seeData() {
      const data = {
        id: this.data.id,
        oldId: this.data.oldId
      }
      queryCertificateInfo(data).then(res => {
        this.formDataDialog = res.data
        this.formDataDialog.changeType = '01'
        this.certificateScanData.bizId = this.formDataDialog.id
      })
    },
    // 证书名称
    getVendorId(val) {
      // 传进来的val是select组件选中的value值
      let obj = {}
      obj = this.supplierCertificateTypeList.find(function(item) {
        return item.typecode === val
      })
      // obj 就是被选中的那个对象，也就能拿到label值了。
      this.formDataDialog.certificateName = obj.typename
    },
    // 证书扫描
    fileChange(file, fileList) {
      if (fileList.length > 0) {
        this.formDataDialog.certificateScanType = 'true'// 上传了
      } else {
        this.formDataDialog.certificateScanType = '' // 未上传
      }
    },
    businessLicenseCheckChange() {
      if (this.formDataDialog.longTerm === '01') { // 选择时
        this.formDataDialog.validityEndTime = ''// 营业执照有效期
        // 取消校验空
        delete this.rules.validityEndTime// 营业执照有效期
      } else {
        // 打开校验
        this.rules.validityEndTime = [{ required: true, message: '请选择', trigger: 'change' }]// 营业执照有效期
      }
    },
    // 选择信息-确定
    ensure(formName) {
      // 校验输入内容
      this.$refs[formName].validate((valid, field) => {
        if (valid) { // 校验通过
          this.confirmLoading = true // Loading
          this.formDataDialog.issuingTime = this.$Moment(this.formDataDialog.issuingTime).format(this.momentSaveFormat)// 发证时间
          if (this.formDataDialog.validityEndTime) this.formDataDialog.validityEndTime = this.$Moment(this.formDataDialog.validityEndTime).format(this.momentSaveFormat)// 有效期至
          this.formDataDialog.status = '00' // 00保存 01提交
          saveCertificateInfo(this.formDataDialog).then(response => {
            this.data.dialog = false// 关闭弹框
            this.restoreInitial()// 恢复初始值
            this.$emit('consignContractInfo', this.formDataDialog)
            this.confirmLoading = false // Loading
          }).catch(() => {
            this.confirmLoading = false // Loading
          })
        }
      })
    },
    // 取消
    cancel() {
      this.data.dialog = false// 关闭弹框
    },
    // 恢复初始值
    restoreInitial() {
      // 恢复初始值
      restoreInitialValue(this.formDataDialog)
      this.formDataDialog.longTerm = '00' // 是否长期 00未选择 01选中
      this.certificateScanData.bizId = ''// 附件主键id
    }
  }
}
</script>

<style scoped lang="less">
</style>
