<!--
 * @Author: 曹捷
 * @Date: 2019-08-19 15:24:34
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-04-28 17:08:45
 * @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="menuName">
        <a-input :maxlength="20" placeholder="请输入菜单权限名称" show-word-limit v-model:value="formData.menuName"></a-input>
      </a-form-item>
      <a-form-item label="菜单权限编码" name="menuCode">
        <a-input :maxlength="20" placeholder="请输入菜单权限编码" show-word-limit v-model:value="formData.menuCode"></a-input>
      </a-form-item>
      <a-form-item label="类型" name="permissionType">
        <obit-dict dictCode="menuType" placeholder="请选择类型" v-model:value="formData.permissionType"></obit-dict>
      </a-form-item>
      <a-form-item label="菜单路径" name="path" v-if="formData.permissionType ==1">
        <a-input placeholder="请输入菜单路径" show-word-limit v-model:value="formData.path"></a-input>
      </a-form-item>
      <a-form-item label="排序" name="orderNo">
        <a-input :maxlength="20" placeholder="排序" show-word-limit v-model:value.number="formData.orderNo"></a-input>
      </a-form-item>
      <a-form-item label="图标">
        <a-input placeholder="请选择图标" readonly v-model:value="formData.iconName">
          <template #prefix>
            <i class="iconfont " :class="'icon-'+formData.iconName"></i>
          </template>
          <template #suffix>
            <obitIconShow v-model:icon="formData.iconName"></obitIconShow>
          </template>
        </a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { computed, inject, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { util } from '../../../entery'
import obitOrg from '../../../components/obit-org/obit-org.vue'
import ObitDict from '../../../components/obit-dict/obit-dict.vue'
import obitIconShow from '../../../components/obit-icon-show/obit-icon-show.vue'

export default {
  // inheritAttrs: false,
  components: { obitOrg, ObitDict, obitIconShow },
  props: {
    open: {
      type: Boolean
    },
    addType: {
      type: String,
    },
    detailsInfo: {
      type: Object,
    },
  },
  setup (props, context) {
    let http = inject('http')

    let _data = reactive({
      showModal: props.showModal,
      formData: {},
      formRef: null,
      menuList: [],
      rules: {
        menuName: [
          { required: true, message: '请输入菜单权限名称', trigger: 'blur' },
        ],
        menuCode: [
          { required: true, message: '请输入菜单权限编码', trigger: 'blur' },
        ],
        permissionType: [
          { required: true, message: '请选择类型', trigger: 'change' },
        ],
        orderNo: [
          { required: true, message: '请输入排序', trigger: 'blur', type: 'number' },
        ],
        path: [
          { required: true, message: '请输入菜单路径', trigger: 'blur' },
        ],
      },
    })
    let _computed = {
      showTitle: computed(() => props.addType === 'add' ? '新增菜单权限' : '修改菜单权限')
    }
    let _methods = {
      getMenuTree () {
        http.getSystemMenuTree().then((res) => {
          _data.menuList = res
        })
      },
      saveInfo () {
        _data.formRef.validate().then(() => {
          let param = util.util.cloneObj(_data.formData)
          http.saveSystemMenu(param).then((res) => {
            context.emit('reload')
            _methods.closeDialog()
          })
        })
      },
      closeDialog () {
        util.util.cleanObj(_data.formData)
        context.emit('update:open', false)
      },
    }
    watch(() => props.open, (value) => {
      if (value) {
        console.log(1, props.detailsInfo)
        _data.formData = util.util.cloneObj(props.detailsInfo)
        if (props.addType === 'add') {
          _data.formData.orderNo = 0
        }
      } else {
        util.util.cleanObj(_data.formData)
      }
    })
    onMounted(() => {
      _methods.getMenuTree()
    })
    return {
      ..._computed,
      ...toRefs(_data),
      ..._methods
    }
  },
}
</script>
<style lang="less">
</style>