<template>
  <n-form
    inline
    :label-width="80"
    label-placement="left"
    :model="queryForm"
    size="medium"
    ref="queryFormRef"
  >
    <n-form-item>
      <n-button  type="primary" @click="handleClick('row', 'refresh')"
        ><template #icon>
          <n-icon>
            <ReloadOutline />
          </n-icon> </template
        >刷新</n-button
      >
    </n-form-item>
    <n-form-item>
      <n-button
        type="primary"
        @click="handleClick('row', 'add')"
        
        attr-type="button"
        ><template #icon>
          <n-icon>
            <Add />
          </n-icon> </template
        >新增一级菜单</n-button
      ></n-form-item
    >
  </n-form>
  <n-data-table
    ref="tableRef"
    :bordered="false"
    :max-height="700"
    striped
    :columns="columns"
    :data="data"
    :row-key="rowKey"
  ></n-data-table>
  <n-modal
    v-model:show="showModal"
    :show-icon="false"
   preset="card"
    :title="modelTitle"
    :style="{ width: '500px' }"
  >
    <n-form
      :label-width="80"
      :model="addFormValue"
      :rules="addFormRules"
      :size="medium"
      label-placement="left"
      ref="addFormRef"
    >
      <n-form-item label="菜单名称：" path="menuName">
        <n-input
          v-model:value="addFormValue.menuName"
          clearable
          placeholder="请输入···"
        />
      </n-form-item>
      <n-form-item label="菜单编号：" path="menuNo">
        <n-input
          v-model:value="addFormValue.menuNo"
          clearable
          placeholder="请输入···"
        />
      </n-form-item>
      <n-form-item label="权限标识：" path="menuPermissionID">
        <n-input
          v-model:value="addFormValue.menuPermissionID"
          clearable
          placeholder="类型(menu/button) : 分组 : 菜单 例：menu:sys:menu"
        />
      </n-form-item>
      <n-form-item label="菜单类型：" path="menuType">
        <n-input
          v-model:value="addFormValue.menuType"
          clearable
          placeholder="请输入···"
          :readonly="true"
        />
      </n-form-item>
      <n-form-item label="备注：" path="remarks">
        <n-input
          placeholder="请输入···"
          v-model:value="addFormValue.remarks"
          type="textarea"
          :autosize="{
            minRows: 3,
            maxRows: 5,
          }"
        />
      </n-form-item>
      <n-form-item label="排序编号：" path="sortNum">
        <n-input
          v-model:value="addFormValue.sortNum"
          clearable
          placeholder="请输入···"
        />
      </n-form-item>
    </n-form>
    <template
      #action
      v-if="modelTitle == '新增菜单' || modelTitle == '修改菜单'"
    >
      <n-space>
        <n-button @click="() => (showModal = false)">取消</n-button>
        <n-button
          type="primary"
          :loading="formBtnLoading"
          @click="handleClick('rows', 'sure')"
          >确定</n-button
        >
      </n-space>
    </template>
  </n-modal>
</template>

<script>
import { ref, reactive, toRefs, h, onMounted } from "vue";
import { NButton, useMessage, useDialog, NTag } from "naive-ui";
import { ReloadOutline, Add } from "@vicons/ionicons5";

export default {
  name: "menu",
  components: { ReloadOutline, Add },
  setup() {
    const state = reactive({
      //搜索相关
      queryForm: {},
      //表格相关
      columns: [
        // {
        //   type: "selection",
        //   disabled(row, index) {
        //     return row.name === "Edward King 3";
        //   },
        // },
        {
          title: "菜单名称",
          key: "menuName",
          align: "center",
        },
        {
          title: "菜单编号",
          key: "menuNo",
          align: "center",
        },
        {
          title: "权限标识",
          key: "menuPermissionID",
          align: "center",
        },
        {
          title: "类型",
          key: "menuType",
          align: "center",
        },
        {
          title: "备注",
          key: "remarks",
          align: "center",
        },
        {
          title: "操作",
          key: "actions",
          width: "400",
          align: "center",
          render(row) {
            const btn = state.actionColumn.map((item, index) => {
              return h(
                NButton,
                {
                  text: true,
                  size: item.size,
                  style: {
                    margin: "10px",
                  },
                  type: item.btnType,
                  onClick: () => handleClick(row, item.type),
                },
                { default: () => item.default }
              );
            });
            return btn;
          },
        },
      ],
      rowKey: (row) => row.menuNo,
      data: [],
      actionColumn: [
        {
          size: "small",
          btnType: "primary",
          type: "delete",
          default: "删除菜单",
        },
        {
          size: "small",
          btnType: "primary",
          type: "edit",
          default: "修改菜单",
        },
        {
          size: "small",
          btnType: "primary",
          type: "add2",
          default: "添加子菜单",
        },
      ],
      //弹窗相关
      showModal: false,
      formBtnLoading: false,
      modelTitle: "",
      addFormValue: {
        menuName: "",
        menuNo: "",
        menuType: "一级菜单",
        menuPermissionID: "",
        remarks: "",
        sortNum: "",
      },
      addFormRules: {
        menuName: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入菜单名称",
          },
        ],
        menuNo: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入菜单编号",
          },
        ],
        sortNum: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入编号",
          },
        ],
      },
    });
    const queryFormRef = ref(null);
    const tableRef = ref(null);
    const addFormRef = ref(null);
    const dialog = useDialog();
    const message = useMessage();
    //获取表格数据
    async function getTableData() {   
      const res = reactive(
      {"code":200,"message":"获取系统管理-菜单管理基础信息成功","data":[{"menuName":"首页","menuNo":"menu_01","menuPermissionID":"menu:home","menuType":"一级菜单"},{"menuName":"系统管理","menuNo":"menu_02","menuPermissionID":"menu:sys","menuType":"一级菜单","children":[{"menuName":"用户管理","menuNo":"menu_02_01","menuPermissionID":"menu:sys:user","menuType":"二级菜单"},{"menuName":"角色管理","menuNo":"menu_02_02","menuPermissionID":"menu:sys:menu","menuType":"二级菜单"},{"menuName":"菜单管理","menuNo":"menu_02_03","menuPermissionID":"menu:sys:menu","menuType":"二级菜单"},{"menuName":"权限管理","menuNo":"menu_02_04","menuPermissionID":"menu:sys:authority","menuType":"二级菜单"}]},{"menuName":"人员管理","menuNo":"menu_03","menuPermissionID":"menu:personnel","menuType":"一级菜单","children":[{"menuName":"培训结果","menuNo":"menu_03_01","menuPermissionID":"menu:sys:trainingResults","menuType":"二级菜单"},{"menuName":"培训计划","menuNo":"menu_03_02","menuPermissionID":"menu:sys:trainingPlan","menuType":"二级菜单"}]},{"menuName":"提醒设置","menuNo":"menu_04","menuPermissionID":"menu:reminder","menuType":"一级菜单","children":[{"menuName":"提醒设置","menuNo":"menu_04_01","menuPermissionID":"menu:reminder:reminderSettings","menuType":"二级菜单"}]}]}

      )
      if (res.code == 200) {
        state.data = res.data;
      }
    }

    //按钮点击事件
    const handleClick = (row, type) => {
      switch (type) {
        //搜索
        case "refresh":
          console.log("刷新界面");
          getTableData();
          break;
        //新增
        case "add":
          state.modelTitle = "新增菜单";
          state.showModal = true;
          break;
        //编辑
        case "edit":
          console.log(row);
          state.modelTitle = "修改菜单";
          state.addFormValue = row;
          state.showModal = true;
          break;
        //配置机构
        case "add2":
          state.modelTitle = "新增菜单";
          state.addFormValue.menuType = "子级菜单";
          state.showModal = true;
          break;
        //删除
        case "delete":
          dialog.info({
            title: "提示",
            content: `您想删除${row.menuName}`,
            positiveText: "确定",
            negativeText: "取消",
            onPositiveClick: () => {
              message.success("删除成功");
            },
            onNegativeClick: () => {},
          });
          break;
        //确认
        case "sure":
          addFormRef.value.validate((errors) => {
            if (!errors) {
              message.success("验证成功");
              state.showModal = false;
              resetForm();
            } else {
              console.log(errors);
              message.error("验证失败");
            }
          });
      }
    };
    //表单重置
    const resetForm = () => {};
    onMounted(() => {
      getTableData();
    });
    return {
      ...toRefs(state),
      queryFormRef,
      tableRef,
      addFormRef,
      getTableData,
      handleClick,
      resetForm,
    };
  },
};
</script>

<style lang="less" scoped>
// ::v-deep(.n-data-table-base-table .n-button) {
//   color: var(--color-text);
// }
::v-deep(.n-dialog__title) {
  padding: 20px !important;
  color: red !important;
}
</style>