<template>
  <base-model :config="dictionary_model">
    <template slot="dialog-body">
      <el-form ref="dictionaryForm" size="small" :model="form" :rules="rules" class="demo-ruleForm" label-width="90px">
        <el-form-item label="Type: " prop="Type">
          <el-input :maxLength="$inputMax" v-model="form.Type" readonly />
        </el-form-item>
        <el-form-item label="Key: " prop="KeyName">
          <el-input :maxLength="$inputMax" v-model="form.KeyName" readonly />
        </el-form-item>
        <el-form-item label="Value: " prop="Value">
          <el-input :maxLength="$inputMax" v-model="form.Value" />
        </el-form-item>
        <el-form-item v-show="type=== 'Employment' || type=== 'Specialty'" label="Value CN: " prop="ValueCN">
          <el-input :maxLength="$inputMax" v-model="form.ValueCN" />
        </el-form-item>

        <el-form-item label="Order: " prop="ShowOrder">
          <el-input-number v-model="form.ShowOrder" :min="0"  style="width:100%;" />
        </el-form-item>
        <el-form-item label="Description: ">
          <el-input :maxLength="$inputMax" v-model="form.Description" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" />
        </el-form-item>
      </el-form>
    </template>
    <template slot="dialog-footer">
      <el-button :disabled="btnLoading" size="small" type="primary" @click="dictionary_model.visible = false">Cancel</el-button>
      <el-button size="small" type="primary" :loading="btnLoading" @click="handleSave">Save</el-button>
    </template>
  </base-model>
</template>
<script>
import { addOrUpdateDictionary } from '@/api/dictionary'
import { dictionary_model } from '../dictionary'
import BaseModel from '@/components/BaseModel'
export default {
  name: 'DictionaryForm',
  components: { BaseModel },
  props: {
    data: {
      type: Object,
      default() { return {} }
    },
    type: {
      type: String,
      required: true
    },
    currentKeyName: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      dictionary_model,
      form: {
        Type: '',
        KeyName: '',
        Value: '',
        ValueCN: '',
        ShowOrder: '',
        Description: ''
      },
      rules: {
        Value: [{ required: true, message: '请注明', trigger: 'blur' }, { max: 50, message: '最大长度为 50' }],
        ValueCN: [{ max: 50, message: '最大长度为 50' }],
        ShowOrder: [{ required: true, message: 'Please enter number', trigger: 'blur' }],
        KeyName: [{ required: true, message: 'Please select', trigger: ['blur', 'change'] }],
        Type: [{ required: true, message: 'Please select', trigger: ['blur', 'change'] }]
      },
      btnLoading: false
    }
  },
  mounted() {
    if (Object.keys(this.data).length && this.data.Id) {
      this.form = { ...this.data }
    } else {
      this.form.KeyName = this.currentKeyName
      this.form.Type = this.type
    }
  },
  methods: {
    handleSave() {
      this.$refs.dictionaryForm.validate(valid => {
        if (!valid) return
        this.btnLoading = true
        this.dictionary_model.showClose = false
        addOrUpdateDictionary(this.form).then(res => {
          this.btnLoading = false
          if (res.IsSuccess) {
            this.$message.success('Saved successfully')
            this.$store.dispatch('global/setDictionary', {})
            this.$refs['dictionaryForm'].resetFields()
            this.$emit('closeDialog')
            this.dictionary_model.showClose = true
          }
        }).catch(() => {
          this.btnLoading = false
          this.dictionary_model.showClose = true
        })
      })
    }
  }
}
</script>
