<template>
  <n-form ref="formRef" label-placement="left" :label-width="80" :model="modalForm" :rules="rules">
    <n-form-item v-if="props.modalTitle === '新增菜单'" label="上级菜单" path="">
      <n-tag class="rounded">{{ props.curOperaMenu?.menuName || '根节点' }}</n-tag>
    </n-form-item>
    <n-form-item label="菜单类型" path="menuType">
      <n-radio-group v-model:value="modalForm.menuType" name="radiogroup">
        <n-space>
          <n-radio v-for="menuType in SYSTEM_MENU_TYPES" :key="menuType.value" :value="menuType.value">
            {{ menuType.label }}
          </n-radio>
        </n-space>
      </n-radio-group>
    </n-form-item>

    <n-form-item v-if="modalForm.menuType !== SYSTEM_MENU_TYPES_F" label="路由地址" path="path">
      <n-input v-model:value="modalForm.path" :clearable="true" placeholder="请输入路由地址" />
    </n-form-item>
    <n-form-item :label="modalForm.menuType !== SYSTEM_MENU_TYPES_F ? '菜单名称' : '权限名称'" path="menuName">
      <n-input v-model:value="modalForm.menuName" :clearable="true" placeholder="请输入菜单名称" />
    </n-form-item>
    <n-form-item label="权限字符" path="menuName">
      <n-input v-model:value="modalForm.perms" :clearable="true" placeholder="请输入权限字符" />
    </n-form-item>
    <n-form-item v-if="modalForm.menuType !== SYSTEM_MENU_TYPES_F" label="菜单图标" path="icon">
      <icon-select v-model:value="modalForm.icon" :icons="icons" />
    </n-form-item>
    <n-form-item label="菜单排序" path="orderNum">
      <n-input-number v-model:value="modalForm.orderNum" :min="0" :max="99" clearable placeholder="请输入菜单排序" />
    </n-form-item>
    <n-form-item v-if="modalForm.menuType !== SYSTEM_MENU_TYPES_F" label="显示状态" path="visible">
      <n-radio-group v-model:value="modalForm.visible" name="radiogroup">
        <n-space>
          <n-radio v-for="item in SYSTEM_MENU_VISIBLES" :key="item.value" :value="item.value">
            {{ item.label }}
          </n-radio>
        </n-space>
      </n-radio-group>
    </n-form-item>
    <n-form-item :label="modalForm.menuType !== SYSTEM_MENU_TYPES_F ? '菜单状态' : '权限状态'" path="status">
      <n-radio-group v-model:value="modalForm.status" name="radiogroup">
        <n-space>
          <n-radio v-for="item in SYSTEM_MENU_STATUS" :key="item.value" :value="item.value">
            {{ item.label }}
          </n-radio>
        </n-space>
      </n-radio-group>
    </n-form-item>
  </n-form>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import type { FormInst, FormRules } from 'naive-ui';
import { fetchAddMenu, fetchEditMenu } from '@/service';
import { icons } from '@/settings/icons';
import {
  SYSTEM_MENU_STATUS,
  SYSTEM_MENU_STATUS_ENABLE,
  SYSTEM_MENU_TYPES,
  SYSTEM_MENU_TYPES_F,
  SYSTEM_MENU_TYPES_M,
  SYSTEM_MENU_VISIBLES,
  SYSTEM_MENU_VISIBLE_SHOW
} from '@/const/system';

interface Props {
  curOperaMenu: any;
  modalTitle: string;
}

const props = defineProps<Props>();

const formRef = ref<FormInst | null>(null);
const emits = defineEmits(['get-menu-list', 'close-modal']);

const modalForm = ref<System.AddMenuForm>({
  menuType: SYSTEM_MENU_TYPES_M,
  menuName: '',
  perms: '',
  icon: '',
  path: '',
  orderNum: 0,
  parentId: 0,
  visible: SYSTEM_MENU_VISIBLE_SHOW,
  status: SYSTEM_MENU_STATUS_ENABLE
});
const rules = ref<FormRules>({
  menuType: { required: true },
  menuName: { required: true, message: '菜单名称不能为空', trigger: ['input', 'blur'] },
  icon: { required: true, message: '图标不能为空', trigger: ['input', 'blur'] },
  path: { required: true, message: '菜单名称不能为空', trigger: ['input', 'blur'] },
  orderNum: { required: true },
  visible: { required: true },
  status: { required: true }
});

/** 提交 */
async function handleSubmit() {
  if (props.curOperaMenu && props.modalTitle === '新增菜单') modalForm.value.parentId = props.curOperaMenu.menuId;
  const apis = {
    fetchAddMenu,
    fetchEditMenu
  };
  if (modalForm.value.menuType === SYSTEM_MENU_TYPES_F) modalForm.value.path = '';
  const apikey = props.modalTitle === '修改菜单' ? 'fetchEditMenu' : 'fetchAddMenu';
  const { data } = await apis[apikey](modalForm.value);
  if (data?.ok) {
    window.$message?.success('操作成功');
    emits('get-menu-list');
    emits('close-modal');
  }
}
/** 校验 */
function handleValidate() {
  formRef.value?.validate(errors => {
    if (!errors) {
      handleSubmit();
    }
    return errors;
  });
}

onMounted(() => {
  if (props.modalTitle === '修改菜单') {
    modalForm.value = props.curOperaMenu as System.AddMenuForm;
  }
  // console.log(props.curOperaMenu);
  if (props.modalTitle === '新增菜单' && props.curOperaMenu) {
    modalForm.value.path = `${props.curOperaMenu.path}/`;
  }
});
defineExpose({
  handleValidate
});
</script>
