import { ref, reactive, watch } from 'vue'
import { MENU_TYPE, MENU_OPEN, MENU_VISIBLE, MENU_STATUS } from '@/utils/dictionary.js'
import { getMenu } from '@/api/system/menu/index.js'
import { dataToSelect } from '@/utils/handleData.js'
const menuOptions = ref()
const menuType0 = ref(true)
const menuType1 = ref(false)

export const form = reactive({
  menuForm: {
    pid: null,
    type: 0,
    title: '',
    target: '1',
    icon: '',
    permission: '',
    path: '',
    sort: null,
    component: '',
    hide: 0,
    status: 1
  },
  menuRules: {
    title: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
    sort: [{ required: true, type: 'number', message: '请输入排序号', trigger: 'blur' }]
  },
  formItem: [
    { type: 'select', key: 'pid', label: '上级菜单', props: { options: menuOptions, placeholder: '请选择上级菜单' }},
    { type: 'radio', key: 'type', label: '菜单类型', options: MENU_TYPE },
    { type: 'input', key: 'title', label: '菜单名称', props: { maxlength: '20', placeholder: '请输入菜单名称', clearable: true }},
    { type: 'radio', key: 'target', label: '打开方式', options: MENU_OPEN },
    { type: 'input', key: 'icon', label: '菜单图标', props: { maxlength: '20', placeholder: '请选择菜单图标', clearable: true }},
    { type: 'input', key: 'permission', label: '权限标识', props: { maxlength: '20', placeholder: '请输入部门名称', disabled: menuType0, clearable: true }},
    { type: 'input', key: 'path', label: '路由地址', props: { maxlength: '20', placeholder: '请输入部门名称', disabled: menuType1, clearable: true }},
    { type: 'number', key: 'sort', label: '排序号', props: { min: 0, placeholder: '请输入排序号', clearable: true }},
    { type: 'input', key: 'component', label: '组件路径', props: { maxlength: '20', placeholder: '请输入部门名称', disabled: menuType1, clearable: true }},
    { type: 'radio', key: 'hide', label: '是否可见', options: MENU_VISIBLE },
    { type: 'radio', key: 'status', label: '菜单状态', options: MENU_STATUS }
  ]
})

export const getMenuOptions = async function() {
  const res = await getMenu()
  setTimeout(() => {
    menuOptions.value = dataToSelect(res.data, { label: 'title', value: 'id' })
  }, 3000)
}

export const changeMenuType = function(value) {
  menuType0.value = !value
  menuType1.value = !menuType0.value
}

