<template>
  <a-modal :visible="visible" :title="modalTitle" :width="720" @cancel="onCancel">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row>
        <a-col :span="12">
          <a-form-model-item ref="name" label="词典项名称" prop="name">
            <a-input v-if="operable" v-model="form.name"/>
            <span v-else>{{ form.name }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item ref="value" label="词典项值" prop="value">
            <a-input-number v-if="operable" v-model="form.value"/>
            <span v-else>{{ form.value }}</span>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item ref="parentid" label="所属上级" prop="parentid">
            <a-input-number v-if="operable" v-model="form.parentid" :min="0"/>
            <span v-else>{{ form.parentid }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item ref="sortid" label="排序" prop="sortid">
            <a-input-number v-if="operable" v-model="form.sortid" :min="0"/>
            <span v-else>{{ form.sortid }}</span>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item ref="description" label="描述" prop="description" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-textarea :autoSize="{ minRows: 3, maxRows: 10 }" v-model="form.description" v-if="operable"/>
            <span v-else>{{ form.description }}</span>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <div class="draw-button-container align-center">
      <a-button @click="onCancel">取消</a-button>
      <a-button type="primary" @click="onSubmit" :disabled="!operable">保存</a-button>
    </div>
  </a-modal>
</template>

<script>
import { dictionaryItemAdd, dictionaryItemUpdate } from '@/api/sys/dictionaryItem'

export default {
  props: {
    id: {
      type: String,
      default: undefined
    }
  },
  data () {
    return {
      modalTitle: '新增',
      visible: false,
      operable: false,
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      form: {
        name: '',
        value: '',
        parentid: 0,
        sortid: 0,
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入词典项名称', trigger: 'blur' }
        ],
        value: [
          { required: true, message: '请输入词典项值', trigger: 'blur' }
        ],
        parentid: [
          { required: true, message: '请输入所属上级', trigger: 'blur' }
        ],
        sortid: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    add () {
      console.log(this.form)
      this.modalTitle = '新增'
      this.visible = true
      this.operable = true
      this.form.id = undefined
    },
    edit (obj) {
      this.modalTitle = '修改'
      this.visible = true
      this.operable = true 
      this.form = obj
    },
    detail (obj) {
      this.modalTitle = '详情'
      this.visible = true
      this.operable = false
      this.form = obj
    },
    onSubmit (e) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.form.dictionaryCode = this.$route.params.id
          console.log(this.form)
          if (this.form.id) {
            dictionaryItemUpdate(this.form).then(data => {
              this.$emit('ok')
              this.onCancel()
            })
          } else {
            dictionaryItemAdd(this.form).then(data => {
              this.$emit('ok')
              this.onCancel()
            })
          }
        } else {
          return false
        }
      })
    },
    onCancel () {
      this.form = {}
      this.visible = false
    }
  }
}
</script>

<style>
</style>
