<template>
  <div>
    <n-card class="h-full shadow-sm rounded-8px">
      <div>
        <n-button type="primary" @click="handleShowModal(undefined, 'add')">新增菜单</n-button>
      </div>
      <div class="mt-4">
        <n-data-table :loading="loading" :single-line="false" :columns="columns" :data="menuData" :row-key="rowKey" />
      </div>
    </n-card>

    <n-modal v-model:show="showModal" :mask-closable="false" :bordered="false">
      <n-card :title="modalTitle" class="w-500px rounded-8px shadow-sm">
        <template #header-extra>
          <Icon icon="ic:sharp-close" class="text-size-22px cursor-pointer" @click="showModal = false" />
        </template>
        <div>
          <MenuForm
            ref="menuFormDom"
            :cur-opera-menu="curOperaMenu"
            :modal-title="modalTitle"
            @get-menu-list="getMenuList"
            @close-modal="handleCloseModal"
          />
        </div>
        <template #footer>
          <div class="w-full flex justify-center">
            <NButton @click="showModal = false">取消</NButton>
            <NButton :loading="submitLoading" class="ml-4" type="primary" @click="handleSubmit">提交</NButton>
          </div>
        </template>
      </n-card>
    </n-modal>
  </div>
</template>
<script setup lang="ts">
import { h, onMounted, ref, nextTick } from 'vue';
import { NButton } from 'naive-ui';
import type { DataTableColumns } from 'naive-ui';
import { Icon } from '@iconify/vue';
import { filterMenuStatus } from '@/filter';
import { fetchDelMenu, fetchGetMenuList } from '@/service/api';
import MenuForm from './components/MenuForm/index.vue';

/** -------- table相关 -------- */
const menuData = ref([]);
const createColumns = (): DataTableColumns<System.MenuTableRow> => {
  return [
    {
      title: '菜单名称',
      key: 'menuName'
    },
    {
      title: '图标',
      key: 'icon',
      render(row) {
        return h(Icon, {
          icon: row.icon,
          class: 'text-22px'
        });
      }
    },
    {
      title: '排序',
      key: 'orderNum'
    },
    {
      title: '权限标识',
      key: 'perms'
    },
    {
      title: '组件路径',
      key: 'path'
    },
    {
      title: '状态',
      key: 'status',
      render(row) {
        return filterMenuStatus(row.status as string);
      }
    },
    {
      title: '创建时间',
      key: 'createTime'
    },
    {
      title: '操作',
      key: 'actions',
      render(row) {
        return [
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              text: true,
              size: 'small',
              type: 'info',
              onClick: () => handleShowModal(row, 'edit')
            },
            { default: () => '修改' }
          ),
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              text: true,
              size: 'small',
              type: 'info',
              class: 'mx-2',
              onClick: () => handleShowModal(row, 'add')
            },
            { default: () => '新增' }
          ),
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: 'small',
              text: true,
              type: 'info',
              onClick: () => handleDelMenu(row)
            },
            { default: () => '删除' }
          )
        ];
      }
    }
  ];
};
const columns = createColumns();
const rowKey = (row: { path: string }) => {
  return row.path;
};

// 删除
function handleDelMenu(row: System.MenuTableRow) {
  window.$dialog?.info({
    title: '提示',
    content: '您确定要删除当前菜单吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      const { data } = await fetchDelMenu(row?.menuId);
      if (data?.ok) {
        window.$message?.success('操作成功');
        getMenuList();
      }
    }
  });
}

/** -------- table相关 -------- */

/** -------- modal相关 -------- */
const submitLoading = ref(false);
const modalTitle = ref('新增菜单');
const showModal = ref(false);
const menuFormDom = ref();
const curOperaMenu = ref<System.MenuTableRow>({
  menuType: '',
  createTime: '',
  component: '',
  icon: '',
  menuId: 0,
  menuName: '',
  orderNum: 0,
  parentId: 0,
  path: ''
});
// 关闭弹窗
function handleCloseModal() {
  showModal.value = false;
}

// 打开弹窗
function handleShowModal(row: System.MenuTableRow | undefined, type: string) {
  if (row) curOperaMenu.value = JSON.parse(JSON.stringify(row)) as System.MenuTableRow;
  if (type === 'add') {
    modalTitle.value = '新增菜单';
  } else {
    modalTitle.value = '修改菜单';
  }
  showModal.value = true;
}
// 提交
function handleSubmit() {
  nextTick((): void => {
    submitLoading.value = true;
    menuFormDom.value.handleValidate();
    submitLoading.value = false;
  });
}
/** -------- modal相关 -------- */

const loading = ref(false);
/** 获取菜单列表  */
async function getMenuList() {
  loading.value = true;
  const { data } = await fetchGetMenuList();
  if (data?.ok) {
    menuData.value = data?.data;
  }
  loading.value = false;
}

onMounted(() => {
  getMenuList();
});
</script>
