<template>
  <dialog-edit :width="width"
               :visible.sync="dialogVisible" :editModel="editModel"
               :appendToBody="true"
               :footerBtnShow="false"
               :formRules="rulesForm"
               :form="form" :title="$t('documentSealingConfig.coustomfileadd')" :api="api">
    <el-form :rules="rulesForm" :model="form" ref="formName" @submit.native.prevent>
<!--      <el-form-item :label="$t('documentSealingConfig.materialSouce')" label-width="80px" class="dymForm" prop="materialSouce">-->
<!--        <select-dictionary :xhr="$xhr" :store="$store"-->
<!--                           v-model="form.materialSouce"-->
<!--                           :multiple="true"-->
<!--                           :name="'materialSouce'"-->
<!--                           :clearable="true" :dictTypeCode="'ZD0080'"-->
<!--                           :placeholder="$t('common.pleaseSelect')"></select-dictionary>-->
<!--      </el-form-item>-->
      <el-form-item :label="$t('documentSealingConfig.materialName')" label-width="80px" prop="assetName">
        <el-input :clearable="true" v-model="form.assetName" :placeholder="$t('common.pleaseInput')" class="dymForm"></el-input>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <auth-button size="medium" type="primary" :label="$t('common.save')"
                   :openPerms="true" :menuCode="menuCode" perms="btnSaveFilePerms" @click="save"></auth-button>
      <auth-button size="medium" :label="$t('common.close')" @click="dialogVisible = false" :openPerms="false"></auth-button>
    </template>
  </dialog-edit>
</template>

<script>
import BasePage from '@/pages/baseEditPage'
import { SelectDictionary, DialogEdit, dymForm, authButton } from 'newepoch-components'
import uninvoiceApi from '@/api/uninvoiceApi'
export default {
  extends: new BasePage(),
  name: 'documentSealingConfigAddFile',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    SelectDictionary,
    DialogEdit,
    dymForm,
    authButton
  },
  props: {
    menuCode: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      width: '600px',
      rulesForm: {
        materialSouce: [
          {
            trigger: 'change',
            required: true,
            message: this.$i18n.messages[this.$i18n.locale].documentSealingConfig.rulesmaterialSouce
          }
        ],
        assetName: [
          {
            trigger: 'blur',
            required: true,
            message: this.$i18n.messages[this.$i18n.locale].documentSealingConfig.rulesMaterialNameInput
          }
        ]
      }
    }
  },
  computed: {
    api () {
      return uninvoiceApi.customconfigpage
    }
  },
  methods: {
    save () {
      this.$refs['formName'].validate((valid) => {
        if (valid) {
          uninvoiceApi.customconfigpage.createFileName(this.form).then(res => {
            if (res.data) {
              this.success(this.$i18n.messages[this.$i18n.locale].documentSealingConfig.addseccessinfo)
              this.$emit('add-datum')
              this.dialogVisible = false
            } else {
              this.error(this.$i18n.messages[this.$i18n.locale].documentSealingConfig.addfialinfo)
            }
          })
        } else {
          this.error(this.$i18n.messages[this.$i18n.locale].common.formrulesMessage)
        }
      })
    }
  },
  watch: {
    visible (val) {
      if (!val) {
        this.$refs.formName.clearValidate()
      } else {
        console.log(JSON.stringify(this.form))
      }
    }
  }
}
</script>

<style scoped>
</style>
