<!--
 * @Author: 曹捷
 * @Date: 2019-08-19 15:24:34
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-09-09 14:04:30
 * @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="菜单类型">
        <obit-dict dictCode="sys_menu_type" type="radio" v-model:value="formData.menuType" @change="onMenu(formData)">
        </obit-dict>
      </a-form-item>
      <a-form-item label="上级菜单" name="parentId" v-if="formData.menuType =='M'">
        <obit-cascader valueName="menuId" label="menuName" :changeOnSelect="true" parentId='parentId' :options="orgList"
          v-model:value="formData.parentId" placeholder="请选择上级菜单">
        </obit-cascader>
      </a-form-item>
      <a-form-item label="上级菜单" name="parentId" v-if="formData.menuType =='C'">
        <obit-cascader valueName="menuId" label="menuName" parentId='parentId' :options="orgListM"
          v-model:value="formData.parentId" placeholder="请选择上级菜单">
        </obit-cascader>
      </a-form-item>
      <a-form-item label="上级菜单" name="parentId" v-if="formData.menuType =='F'">
        <obit-cascader valueName="menuId" label="menuName" parentId='parentId' :options="orgListC"
          v-model:value="formData.parentId" placeholder="请选择上级菜单">
        </obit-cascader>
      </a-form-item>
      <a-form-item label="图标" v-if="formData.menuType =='C' || formData.menuType =='M'">
        <a-input placeholder="请选择图标" readonly v-model:value="formData.icon">
          <template #prefix>
            <i class="iconfont " :class="'icon-'+formData.icon"></i>
          </template>
          <template #suffix>
            <obitIconShow v-model:icon="formData.icon"></obitIconShow>
          </template>
        </a-input>
      </a-form-item>
      <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="path">
        <a-input placeholder="请输入路由路径" show-word-limit v-model:value="formData.path"></a-input>
      </a-form-item>
      <!-- <a-form-item label="排序" :rules="{validator: validateMaterialkey, trigger: 'blur'}"> -->
      <a-form-item label="排序" name="orderNum">
        <a-input-number id="inputNumber" placeholder="排序" v-model:value.number="formData.orderNum" :min="1"
          :max="999999999999999" style="width: 150px;" />
      </a-form-item>
      <a-form-item label="是否外链" v-if="formData.menuType =='C' || formData.menuType =='M'">
        <obit-dict dictCode="sys_menu_isFrame" type="radio" v-model:value="formData.isFrame">
        </obit-dict>
      </a-form-item>
      <a-form-item label="组件路径" v-if="formData.menuType =='C'">
        <a-input placeholder="请输入组件路径" show-word-limit v-model:value="formData.component"></a-input>
      </a-form-item>
      <a-form-item label="权限字符" v-if="formData.menuType =='C' || formData.menuType =='F'">
        <a-input placeholder="请输入权限字符" show-word-limit v-model:value="formData.perms"></a-input>
      </a-form-item>
      <a-form-item label="显示状态" v-if="formData.menuType =='C' ||formData.menuType =='M'">
        <obit-dict dictCode="sys_menu_visible" type="radio" v-model:value="formData.visible">
        </obit-dict>
      </a-form-item>
      <a-form-item label="菜单状态" v-if="formData.menuType =='C' ||formData.menuType =='M'">
        <obit-dict dictCode="sys_normal_disable" type="radio" v-model:value="formData.status">
        </obit-dict>
      </a-form-item>
      <!-- <a-form-item label="是否缓存" v-if="formData.menuType =='C'">
        <a-radio-group name="radioGroup" v-model:value="formData.isCache">
          <a-radio value="0">缓存</a-radio>
          <a-radio value="1">不缓存</a-radio>
        </a-radio-group>
      </a-form-item> -->
      <a-form-item label="是否缓存" v-if="formData.menuType =='C'">
        <obit-dict dictCode="sys_menu_isCache" type="radio" v-model:value="formData.isCache">
        </obit-dict>
      </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,
    },
    appId: {
      type: String,
    },
    detailsInfo: {
      type: Object,
    },
    menuIds: {
      type: String,
    },
    parentIds: {
      type: String,
    }
  },
  setup (props, context) {
    let http = inject('http')

    let _data = reactive({
      showModal: props.open,
      formData: {},
      orgList: [],
      orgListM: [],
      orgListC: [],
      formRef: null,
      menuList: [],
      coun: true,
      rules: {
        parentId: [
          { required: true, message: '请选择菜单', trigger: 'blur' },
        ],
        menuName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
        ],
        orderNum: [
          // { required: true, message: '请输入排序', trigger: 'blur', type: 'number' ,transform(value){return Number(value)} },
          { required: true, message: '请输入排序', }
        ],
        path: [
          { required: true, message: '请输入路由地址', trigger: 'blur' },
        ],
      },
    })
    let _computed = {
      showTitle: computed(() => props.addType === 'add' ? '新增菜单权限' : '修改菜单权限')
    }
    let _methods = {
      onMenu (item) {
        console.log('item', item)
        console.log('第一次触发', _data.formData.parentId, _data.coun)
        if (_data.coun) {
          _data.coun = false
        } else {
          _data.formData.parentId = ''
        }

      },
      checkAccount (rule, value, callback) {
        console.log(rule)
        console.log(value)
        console.log(callback)
      },
      // 添加事件
      saveInfo () {
        _data.formRef.validate().then(() => {
          let param = util.util.cloneObj(_data.formData)
          console.log('param', param)
          if (props.addType === 'add') {
            http.sysPost('system/menu/add', param).then((res) => {
              context.emit('reload')
              _methods.closeDialog()
            })
          } else {
            http.sysPost('system/menu/edit', param).then((res) => {
              context.emit('reload')
              _methods.closeDialog()
            })
          }
        })
      },
      // 获取菜单类型字典
      menutype () {
        http.sysPost('system/dict/data/type/sys_show_hide').then((res) => {

        })
      },
      // 数据转树结构数据
      onAar (arr) {
        if (!arr) {
          return []
        } else {
          let resultM = []
          if (!Array.isArray(arr)) {
            return resultM
          }
          arr.forEach(item => {
            delete item.children;
          });
          let mapM = {};
          arr.forEach(item => {
            mapM[item.menuId] = item;
          });
          arr.forEach(item => {
            let parentM = mapM[item.parentId];
            if (parentM) {
              (parentM.children || (parentM.children = [])).push(item);
            } else {
              resultM.push(item);
            }
          });
          let qwrrM = []
          qwrrM.push({
            children: resultM,
            menuId: "0",
            menuName: "主类目",
            label: "主类目",
          })
          return qwrrM
        }

      },
      closeDialog () {
        util.util.cleanObj(_data.formData)
        context.emit('update:open', false)
        _data.coun = true

      },
    }
    watch(() => props.open, (value) => {
      if (value) {
        _data.formData = util.util.cloneObj(props.detailsInfo)
        _data.formData.appId = props.appId
        // _data.orgList = []
        http.sysPost("system/menu/list", { appId: props.appId }).then((res) => {
          let resF = [];
          let mulu = []
          res.forEach(item => {
            if (item.menuType === 'M') {
              mulu.push(item)
            }
            if (item.menuType !== 'F') {
              resF.push(item)
            }
          });
          let resM = util.util.cloneObj(mulu)
          let resButton = util.util.cloneObj(resF)
          _data.orgListM = _methods.onAar(resM)
          _data.orgList = _methods.onAar(resM)
          _data.orgListC = _methods.onAar(resButton)
          console.log(_data.orgList)
        })

        if (props.addType === 'add') {
          _data.formData.orderNo = 0
          _data.formData.menuType = 'M',
            _data.formData.isFrame = '1',
            _data.formData.visible = '0',
            _data.formData.status = '0',
            _data.formData.isCache = '0'
          if (props.menuIds != '') {
            _data.formData.menuId = props.menuIds
            _data.formData.parentId = props.parentIds
            console.log('_data.formData.parentId', _data.formData.parentId)
            console.log('_data.formData.menuId', _data.formData.menuId)
          }
        }
      } else {
        util.util.cleanObj(_data.formData)
      }
    })
    onMounted(() => {
    })
    return {
      ..._computed,
      ...toRefs(_data),
      ..._methods
    }
  },
}
</script>
<style lang="less">
</style>