<!--
  @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="编辑证书"
    width="700px"
    custom-class="el-dialog__body-p0"
    top="calc((100vh - 611px) / 2)"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="150px" style="margin-top:20px;">
      <!-- 证书名称 -->
      <el-form-item ref="certificateName" :label="language.Certificatename" prop="certificateName">
        <el-select
          v-model="form.certificateType"
          :placeholder="language.Pleasechoose"
          filterable
          style="width: calc(50% - 4px);"
          @change="getVendorId"
        >
          <el-option
            v-for="(item,index) in supplierCertificateTypeGroup"
            :key="index"
            :label="item.typename"
            :value="item.typecode"
          />
        </el-select>
      </el-form-item>
      <!-- 证书等级 -->
      <el-form-item ref="awardLevel" :label="language.CertificateLevel" prop="awardLevel">
        <el-input v-model="form.awardLevel" style="width: calc(100% - 160px)" />
      </el-form-item>
      <!-- 证书编号 -->
      <el-form-item ref="certificateNo" :label="language.Certificatenumber" prop="certificateNo">
        <el-input v-model="form.certificateNo" style="width: calc(100% - 160px)" />
      </el-form-item>
      <!-- 发证单位 -->
      <el-form-item ref="issuingUnit" :label="language.Certificationunit" prop="issuingUnit">
        <el-input v-model="form.issuingUnit" style="width: calc(100% - 160px)" />
      </el-form-item>
      <!-- 发证时间 -->
      <el-form-item ref="issuingTime" :label="language.Issuingtime" prop="issuingTime">
        <el-date-picker
          v-model="form.issuingTime"
          :value-format="elValueSaveFormat"
          type="datetime"
          placeholder="选择日期"
          style="width: calc(100% - 220px)"
        />
      </el-form-item>
      <!-- 有效期至 -->
      <el-form-item ref="validityEndTime" :label="language.Validuntil" prop="validityEndTime">
        <el-date-picker
          v-model="form.validityEndTime"
          :disabled="form.longTerm==='01'"
          :picker-options="pickerOptions1"
          :value-format="elValueSaveFormat"
          type="datetime"
          placeholder="选择日期"
          style="width: calc(100% - 220px)"
          @change="businessLicenseChange"
        />
        <el-checkbox
          v-model="form.longTerm"
          true-label="01"
          false-label="00"
          @change="businessLicenseCheckChange"
        >
          长期
        </el-checkbox>
      </el-form-item>
      <!-- 证书扫描件 -->
      <el-form-item
        ref="principalFile"
        :label="language.Certificatescanningcopy"
        prop="principalFile"
      >
        <upload
          ref="upload"
          :on-change="principalFile"
          :data="principalData"
          :file-list="fileList"
          :auto-delete="true"
          :auto-upload="false"
          :limit="1"
          :action="importFileUrl"
          file-ref="fileRef"
          but-text="图片上传"
          title=""
          accept="image/jpg,image/jpeg,image/png"
          tip-text="上传格式 (.jpg .png)"
        />
      </el-form-item>
    </el-form>
    <!--底部操作按钮-->
    <!-- 提交 -->
    <span slot="footer" class="dialog-footer" style="display:flex;justify-content: center;">
      <el-button type="primary" icon="el-icon-document-checked" @click="ensure('form')">{{ language.Submission }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口*/
import { getCertificateDictionaries, saveCertificateInfo, queryCertificateInfo } from '@api/supplier/supplierCertificate'
/* 组件*/
import upload from '@comp/common/updownload/upload'
import { upLoadFileUrl } from '@/api/common/uploadCenter'
import { mapGetters } from 'vuex'
export default {
  name: 'EnterpriseQualificationDialog',
  components: {
    upload
  },
  props: {
    // 弹框展示状态
    data: {
      type: Object,
      default: function() {
      }
    }
  },
  data() {
    return {
      principalData: {
        bizId: '', // 业务主键Id
        fileType: 'supplier_certificate_scanning_copy_base' // 文件类型
      },
      fileList: [],
      supplierCertificateTypeGroup: [],
      importFileUrl: upLoadFileUrl,
      form: {
        certificateType: '', // 证书类型
        certificateName: '', // 证书名称
        awardLevel: '', // 证书等级
        certificateNo: '', // 证书编号
        issuingUnit: '', // 发证单位
        issuingTime: '', // 发证时间
        validityEndTime: '', // 有效期至
        longTerm: '00', // 是否长期 00未选择 01选中
        status: '00', // 00保存 01提交
        principalFile: ''
      },
      pickerOptions1: {
        disabledDate: (time) => {
          if (this.form.validityEndTime) {
            return time.getTime() < this.form.issuingTime
          }
        }
      },
      // 校验输入内容
      rules: {
        certificateName: [{ required: true, message: '请选择', trigger: 'change' }], // 证书名称
        certificateNo: [{ required: true, message: '请输入', trigger: 'change' }], // 证书编号
        issuingUnit: [{ required: true, message: '请输入', trigger: 'blur' }], // 发证单位
        issuingTime: [{ required: true, message: '请选择', trigger: 'change' }], // 发证时间
        validityEndTime: [{ required: true, message: '请选择', trigger: 'blur' }], // 有效期至
        principalFile: [{ required: true, message: '请上传', trigger: 'change' }]// 法人/负责人身份证号或护照号
      }
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  watch: {
    /* 营业执照扫描件文件列表-主要用于区分是否上传文件*/
    fileList(val) {
      if (val.length > 0) {
        this.form.principalFile = 'true'// 上传了
      } else {
        this.form.principalFile = '' // 未上传
      }
    }
  },
  created() {
    this.initData()
    this.seeData()
  },
  methods: {
    // 获取证书详情
    seeData() {
      queryCertificateInfo(this.data.id).then(res => {
        this.form = res.data
        this.principalData.bizId = this.form.id
        this.form.issuingTime = this.$Moment(this.form.issuingTime).valueOf()
        this.form.validityEndTime = this.$Moment(this.form.validityEndTime).valueOf()
      })
    },
    // 获取证书字典
    initData() {
      getCertificateDictionaries().then(res => {
        this.supplierCertificateTypeGroup = res.data.supplierCertificateTypeGroup.typeList
      })
    },
    // 当前选择的信息
    currentChange(val) {
      this.currentData = val
    },
    getVendorId(val) {
      // 传进来的val是select组件选中的value值，也就是一个fruitEnName
      let obj = {}
      obj = this.supplierCertificateTypeGroup.find(function(item) {
        return item.typecode === val
      })
      // obj 就是被选中的那个对象，也就能拿到label值了。
      this.form.certificateName = obj.typename
    },
    // 证书扫描
    principalFile(file, fileList) {
      this.fileList = fileList
    },
    businessLicenseChange() {
      if (this.form.longTerm) {
        this.form.longTerm = '00'// 00 未选中 营业执照有效期-复选框
      }
    },
    businessLicenseCheckChange() {
      if (this.form.longTerm === '01') { // 选择时
        this.form.validityEndTime = ''// 营业执照有效期
        // 取消校验空
        delete this.rules.validityEndTime// 营业执照有效期
      } else {
        // 打开校验
        this.rules.longTerm = [{ required: true, message: '请选择', trigger: 'change' }]// 营业执照有效期
      }
    },
    // 选择信息-确定
    ensure(formName) {
      // 校验输入内容
      this.$refs[formName].validate((valid, field) => {
        if (valid) { // 校验通过
          this.form.issuingTime = this.$Moment(this.form.issuingTime).format('YYYY-MM-DD hh:mm:ss')
          this.form.validityEndTime = this.$Moment(this.form.validityEndTime).format('YYYY-MM-DD hh:mm:ss')
          this.form.status = '00'
          saveCertificateInfo(this.form).then(response => {
            this.principalData.bizId = response.data
            this.$refs.upload.submitUpload()
            this.$emit('consignContractInfo', this.form)
            this.data.dialog = false
          })
        }
      })
    }
  }
}
</script>

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