<!--
 * @Author: 曹捷
 * @Date: 2019-08-19 15:24:34
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-03-19 14:19:44
 * @Description: file content
 -->
<template>
  <a-modal class="obit-modal-default" v-if="showModal" :maskClosable="false" :title="showTitle" v-model:visible="showModal"
    @cancel="closeDialog" @ok="saveInfo" cancelText="取消" okText="确认" width="40%">
    <a-form :inline="true" :model="formData" :rules="rules" ref="formRef" :label-col="{span: 4}"
      :wrapper-col="{span:18}">
      <a-form-item label="字典类型" name="dictType">
        <a-input :maxlength="20" placeholder="请输入字典类型" show-word-limit v-model:value="formData.dictType" disabled>
        </a-input>
      </a-form-item>
      <a-form-item label="数据标签" name="dictLabel">
        <a-input :maxlength="20" placeholder="请输入数据标签" show-word-limit v-model:value="formData.dictLabel"></a-input>
      </a-form-item>
      <a-form-item label="数据键值" name="dictValue">
        <a-input :maxlength="20" placeholder="请输入数据键值" show-word-limit v-model:value="formData.dictValue">
        </a-input>
      </a-form-item>
      <a-form-item label="样式属性" name="cssClass">
        <a-input :maxlength="20" placeholder="请输入样式属性" show-word-limit v-model:value="formData.cssClass">
        </a-input>
      </a-form-item>
      <a-form-item label="显示排序" name="dictSort">
        <a-input-number id="inputNumber" placeholder="排序" v-model:value.number="formData.dictSort" :min="1"
          :max="999999999999999" style="width: 150px;" />
      </a-form-item>
      <a-form-item label="回显样式" name="listClass">
        <a-select v-model:value="formData.listClass" placeholder="请选择">
          <a-select-option :key="item.id" :value="item.id" v-for="item in options">
            {{item.label}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="状态" name="status">
        <obit-dict dictCode="sys_normal_disable" type="radio" placeholder="请选择" v-model:value="formData.status">
        </obit-dict>
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-textarea :maxlength="100" placeholder="请输入备注" show-word-limit v-model:value="formData.remark">
        </a-textarea>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { computed, inject, reactive, toRefs, watch } from 'vue'
import { util } from '../../../entery'
export default {
  // inheritAttrs: false,
  props: {
    open: {
      type: Boolean
    },
    addType: {
      type: String,
    },
    detailsInfo: {
      type: Object,
    },
    selectCode: {
      type: String
    },
    appId: {
      type: String
    },
  },
  setup (props, context) {
    let http = inject('http')
    let _data = reactive({
      showModal: props.open,
      formData: {},
      formRef: null,
      status: '1',
      options: [
        { id: 1, label: "默认" },
        { id: 2, label: "主要" },
        { id: 3, label: "成功" },
        { id: 4, label: "信息" },
        { id: 5, label: "警告" },
        { id: 6, label: "危险" },
      ],
      rules: {
        dictLabel: [
          { required: true, message: '请输入数据标签', trigger: 'blur' }
        ],
        dictValue: [
          { required: true, message: '请输入数据键值', trigger: 'blur' }
        ],
        dictSort: [
          { required: true, message: '请输入排序', trigger: 'blur', type: 'number' },
        ],
      },
    })
    let _computed = {
      showTitle: computed(() => props.addType === 'add' ? '新增字典数据' : '修改字典数据')
    }
    let _methods = {
      saveInfo () {
        _data.formRef.validate().then(() => {
          _data.formData.appId = props.appId
          let param = util.util.cloneObj(_data.formData)
          http.saveSystemCodeValue(param, props.addType).then((res) => {
            context.emit('reload')
            _methods.closeDialog()
          })
        })
      },
      closeDialog () {
        util.util.cleanObj(_data.formData)
        context.emit('update:open', false)
      },
    }
    watch(() => props.open, (value) => {
      if (value && props.addType === 'edit') {
        _data.formData = util.util.cloneObj(props.detailsInfo)
      } else {
        util.util.cleanObj(_data.formData)
        _data.formData.status = '0'
      }
      _data.formData.dictType = props.selectCode
    })
    return {
      ..._computed,
      ...toRefs(_data),
      ..._methods
    }
  },
}
</script>
<style lang="less">
</style>