<script setup lang="ts">
import { ref } from 'vue';
import type { TreeOption } from 'naive-ui';
import { useFormRules } from '@/hooks/common/form';
import OperateModel from '@/components/advanced/operate-model.vue';
import MenuTree from '@/views/system/role/modules/menuTree.vue';
import { specialEnableStatusOptions } from '@/constants/business';

defineOptions({
  name: 'RoleOperateModel',
  inheritAttrs: false
});

defineProps<{ menuOptions: TreeOption[] }>();

const { defaultRequiredRule } = useFormRules();

type Model = Pick<
  Api.SystemManage.Role,
  'roleId' | 'roleName' | 'roleKey' | 'status' | 'remark' | 'roleSort' | 'menuCheckStrictly' | 'menuIds'
>;
type RuleKey = Exclude<keyof Model, 'remark' | 'roleId' | 'menuCheckStrictly' | 'menuIds'>;

const model = ref<Model>({
  roleId: '',
  roleName: '',
  roleKey: '',
  remark: '',
  roleSort: 0,
  status: '0',
  menuCheckStrictly: true,
  menuIds: []
});

const rules: Record<RuleKey, App.Global.FormRule> = {
  roleName: defaultRequiredRule,
  roleKey: defaultRequiredRule,
  status: defaultRequiredRule,
  roleSort: defaultRequiredRule
};
</script>

<template>
  <OperateModel v-model:model="model" :rules="rules" title="菜单" v-bind="$attrs">
    <template #formItem>
      <NFormItemGi span="24 m:12" :label="$t('page.manage.role.roleName')" path="roleName">
        <NInput v-model:value="model.roleName" :placeholder="$t('page.manage.role.form.roleName')" />
      </NFormItemGi>
      <NFormItemGi span="24 m:12" label="权限字符" path="roleKey">
        <NInput v-model:value="model.roleKey" placeholder="请输入权限字符" />
      </NFormItemGi>
      <NFormItemGi span="24 m:12" label="显示排序" path="roleSort">
        <NInputNumber v-model:value="model.roleSort" class="w-full" placeholder="请输入显示排序" />
      </NFormItemGi>
      <NFormItemGi span="24 m:12" :label="$t('page.manage.role.roleStatus')" path="status">
        <NRadioGroup v-model:value="model.status">
          <NRadio
            v-for="item in specialEnableStatusOptions"
            :key="item.value"
            :value="item.value"
            :label="$t(item.label)"
          />
        </NRadioGroup>
      </NFormItemGi>
      <NFormItemGi span="24" label="菜单权限">
        <MenuTree
          v-model:cascade="model.menuCheckStrictly"
          v-model:checked-keys="model.menuIds"
          :menu-options="menuOptions"
          show-cascade
        ></MenuTree>
      </NFormItemGi>
      <NFormItemGi span="24" :label="$t('page.manage.role.roleDesc')" path="remark">
        <NInput v-model:value="model.remark" type="textarea" :placeholder="$t('page.manage.role.form.roleDesc')" />
      </NFormItemGi>
    </template>
  </OperateModel>
</template>

<style scoped></style>
