<!-- 企业收款账户信息维护 -->
<template>
  <div>
    <dialog-edit :api="api" :form="form" :visible.sync="dialogVisible" :editModel="editModel" :width="width" :formRules="formRules" :autoSave="false" @onSaved="save"
                 :title="$t('enterpriseInfoManage.supplierInfoManage.accountMaintain')" :labelWidth="labelWidth" :loading="saveLoading"
                 :menuCode="menuId" savePerms="reEditSave">
      <dym-form :formValue="form" :componentList="componentList"></dym-form>
      <!-- 账户证明 -->
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="8">
          <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.accountProve')">
            <el-input v-model="form.certificateFileName" :placeholder="$t('common.pleaseUpload')" class="dymForm" :disabled="disabled"></el-input>
          </el-form-item>
        </el-col>
        <!-- 上传 / 重新上传 / 下载 -->
        <el-col :xs="24" :sm="24" :md="24" :lg="16">
          <btn-upload :xhr="$xhr" :type="type" :store="$store" :uploadApi="uploadApi" :btnSize="size"
                      :fileID="form.certificateFileId" @uploadSuccess="uploadSuccess"
                      :menuCode="menuId" perms="reDownload" :openPerms="true"></btn-upload>
          <btn-download :xhr="$xhr" :store="$store" :classType="classType" :type="type" :size="size"
                        :downloadButtonMsg="$t('enterpriseInfoManage.supplierInfoManage.down')"
                        :fileID="form.certificateFileId"
                        :menuCode="menuId" perms="reEditDownload" :openPerms="true"></btn-download>
        </el-col>
      </el-row>
      <!-- 备注 -->
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="16">
          <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.remark')">
            <el-input v-model="form.memo" class="dymForm" maxlength="1000" :placeholder="$t('common.pleaseInput')"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </dialog-edit>
  </div>
</template>

<script>
import BaseEdit from '@/pages/baseEditPage.js'
import { regExp } from '@/validator/index.js'
import { UPLOAD_API } from '@/constant.js'
import { dymForm, btnDownload, btnUpload, DialogEdit, validate } from 'newepoch-components'
import supplierInfoManageApi from '@/api/enterpriseInfoManage/companyApi.js'
import * as format from '@/filters/index.js'
export default {
  extends: new BaseEdit(),
  name: 'enterpriseAccountInfoEdit',
  components: {
    dymForm,
    DialogEdit,
    btnDownload,
    btnUpload
  },
  data () {
    return {
      width: '1480px',
      labelWidth: '110px',
      disabled: true,
      classType: true,
      type: 'primary',
      size: 'medium',
      uploadApi: UPLOAD_API,
      saveLoading: false,
      componentList: [
        // 收款人名称
        {
          value: 'payeeName',
          disabled: false,
          componentName: 'el-input',
          maxlength: 100,
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.payeeName,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          cols: [24, 24, 24, 8],
          prop: 'payeeName'
        },
        // 开户行
        {
          value: 'openingBank',
          disabled: false,
          componentName: 'el-input',
          maxlength: 20,
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.openingBank,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          cols: [24, 24, 24, 8],
          prop: 'openingBank'
        },
        // 账号
        {
          value: 'bankNo',
          disabled: false,
          componentName: 'el-input',
          maxlength: 30,
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.account,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          cols: [24, 24, 24, 8],
          prop: 'bankNo'
        },
        // 大额行名
        {
          value: 'bankLargeName',
          disabled: false,
          componentName: 'el-input',
          maxlength: 100,
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.bigBankName,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          cols: [24, 24, 24, 8],
          prop: 'bankLargeName'
        },
        // 大额行号
        {
          value: 'bankLargeNo',
          disabled: false,
          componentName: 'el-input',
          maxlength: 30,
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.bigBankNumber,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          cols: [24, 24, 24, 8],
          prop: 'bankLargeNo'
        },
        // 账户性质
        {
          value: 'bankType',
          disabled: false,
          componentName: 'SelectDictionary',
          store: this.$store,
          dictTypeCode: 'bank_type',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.accountNature,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          cols: [24, 24, 24, 8],
          prop: 'bankType'
        }
      ],
      formRules: {
        bankType: [{ required: true, message: this.$i18n.messages[this.$i18n.locale].regMsg.enterpriseInfoManage.bankType }],
        payeeName: [{ required: true, message: this.$i18n.messages[this.$i18n.locale].regMsg.enterpriseInfoManage.payeeName }, { validator: validate.nameValidate, trigger: 'blur' }],
        openingBank: [{ required: true, message: this.$i18n.messages[this.$i18n.locale].regMsg.enterpriseInfoManage.openingBank }, { validator: validate.openingBankNameValidate, trigger: 'blur' }],
        bankNo: [{ required: true, message: this.$i18n.messages[this.$i18n.locale].regMsg.enterpriseInfoManage.bankNo }, { validator: validate.openingBankAccountValidate, trigger: 'blur' }],
        bankLargeName: [{ required: true, message: this.$i18n.messages[this.$i18n.locale].regMsg.enterpriseInfoManage.bankLargeName }, { validator: validate.largeBankNameValidate, trigger: 'blur' }],
        bankLargeNo: [{ required: true, message: this.$i18n.messages[this.$i18n.locale].regMsg.enterpriseInfoManage.bankLargeNo }, { validator: validate.largeBankNumValidate, trigger: 'blur' }]
      }
    }
  },
  computed: {
    api () {
      return supplierInfoManageApi.bank
    }
  },
  methods: {
    // 上传成功
    uploadSuccess (returnData) {
      this.form.certificateFileId = returnData.fileID
      this.$set(this.form, 'certificateFileName', returnData.fileName)
    },
    // 收款人名称校验
    payeeNameCheck: function (rule, value, callback) {
      if (!this.UtilJs.isEmpty(value)) {
        if (regExp.name.test(value)) {
          callback()
        } else {
          callback(new Error(this.$i18n.messages[this.$i18n.locale].regMsg.enterpriseInfoManage.correctPayeeName))
        }
      } else {
        callback(new Error(this.$i18n.messages[this.$i18n.locale].regMsg.enterpriseInfoManage.payeeName))
      }
    },
    // 开户行校验
    openingBankCheck: function (rule, value, callback) {
      callback()
    },
    // 账号校验
    bankNoCheck: function (rule, value, callback) {
      if (!this.UtilJs.isEmpty(value)) {
        if (regExp.account.test(value)) {
          callback()
        } else {
          callback(new Error(this.$i18n.messages[this.$i18n.locale].regMsg.enterpriseInfoManage.correctBankNo))
        }
      } else {
        callback(new Error(this.$i18n.messages[this.$i18n.locale].regMsg.enterpriseInfoManage.bankNo))
      }
    },
    // 大额行名校验
    bankLargeNameCheck: function (rule, value, callback) {
      callback()
    },
    // 大额行号校验
    bankLargeNoCheck: function (rule, value, callback) {
      if (!this.UtilJs.isEmpty(value)) {
        if (regExp.account.test(value)) {
          callback()
        } else {
          callback(new Error(this.$i18n.messages[this.$i18n.locale].regMsg.enterpriseInfoManage.correctBankLargeNo))
        }
      } else {
        callback(new Error(this.$i18n.messages[this.$i18n.locale].regMsg.enterpriseInfoManage.bankLargeNo))
      }
    },
    // 保存
    save () {
      this.saveLoading = true
      let $this = this
      // 账号性质默认值处理
      $this.form.bankType = format.formatFindDictDefoult($this.form.bankType)
      if (this.editModel === 'C') {
        this.api.create($this.form).then(res => {
          if (res && res.data) {
            $this.success(this.$i18n.messages[this.$i18n.locale].regMsg.enterpriseInfoManage.accountInfoSuc)
            $this.dialogVisible = false
            $this.$emit('handleFilter')
          }
        }).finally(() => {
          this.saveLoading = false
        })
      } else if (this.editModel === 'E') {
        this.api.updateBank($this.form).then(res => {
          if (res && res.data) {
            $this.success(this.$i18n.messages[this.$i18n.locale].regMsg.enterpriseInfoManage.accountInfoSuc)
            $this.dialogVisible = false
            $this.$emit('handleFilter')
          }
          this.saveLoading = false
        }).finally(() => {
          this.saveLoading = false
        })
      }
    }
  },
  watch: {
    dialogVisible (val) {
      if (val) {
        this.saveLoading = false
        if (this.editModel === 'E') {
          this.$set(this.componentList[2], 'disabled', true)
        } else {
          this.$set(this.componentList[2], 'disabled', false)
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
