<script lang="ts">
// 声明额外的选项
export default {
  name: "menu"
};
</script>
<script setup lang="ts">
import { useUser } from "./hook";
import { hasAuth } from "@/router/utils";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

import Delete from "@iconify-icons/ep/delete";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";

const {
  loading,
  columns,
  dataList,
  pagination,
  dialogUpdateVisible,
  UpdateFormSubmit,
  UpdateForm,
  onSearch,
  submit,
  dialogType,
  menuList,
  AddUser,
  handleUpdate,
  handleDelete,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  visibleswitchvalue,
  keepAliveswitchvalue
} = useUser();
defineExpose({
  loading,
  columns,
  dataList,
  pagination,
  dialogUpdateVisible,
  UpdateFormSubmit,
  UpdateForm,
  submit,
  onSearch,
  dialogType,
  menuList,
  AddUser,
  handleUpdate,
  handleDelete,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  visibleswitchvalue,
  keepAliveswitchvalue
});
</script>

<template lang="pug">
.main
  //- 表格组件
  PureTableBar.mt12(title="后台菜单管理", @refresh="onSearch" )
    template(#buttons)
      el-button(type="primary" :icon="useRenderIcon(AddFill)" @click="AddUser") 新增菜单
    template(v-slot="{ size, checkList }")
      pure-table(stripe 
        border,
        row-key="id",
        align-whole="center",
        table-layout="auto",
        :loading="loading",
        :size="size",
        :data="dataList",
        :columns="columns",
        :checkList="checkList",
        :pagination="pagination",
        :paginationSmall="size === 'default' ? true : false",
        :header-cell-style="{ background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }",
        @selection-change="handleSelectionChange",
        @size-change="handleSizeChange",
        @current-change="handleCurrentChange"
      )          
        template(#operation="{ row }")
          el-button.reset-margin(
            link
            type="primary"
            :size="size"
            @click="handleUpdate(row)"
            :icon="useRenderIcon(EditPen)"
          ) 编辑
          el-button.reset-margin(
            link
            type="primary"
            :size="size"
            @click="handleDelete(row)"
            :icon="useRenderIcon(Delete)"
          ) 删除

  el-dialog(v-model='dialogUpdateVisible' width="40%" :close-on-click-modal="false" :title="dialogType == 1 ?'添加菜单' : '修改菜单'" )
    el-form(:model='UpdateForm' 
      label-position="left"
      label-width="100px")
      el-form-item(label='权限类型')
        el-select(
          v-model="UpdateForm.menuType"
          placeholder="请选择权限类型"
          class="!w-[300px]")
          el-option(label="菜单" value="0")
          el-option(label="按钮" value="1")
      el-form-item(label='菜单标题' prop="name")
        el-input(v-model='UpdateForm.name' autocomplete='off' class="!w-[300px]"
          placeholder="请输入菜单标题")
      el-form-item(label='菜单名称' prop="enName" v-if="UpdateForm.menuType == '0'")
        el-input(v-model='UpdateForm.enName' autocomplete='off' class="!w-[300px]"
          placeholder="请输入菜单名称(英文字母名称)")
      el-form-item(label='权限标识' prop="permission" v-if="UpdateForm.menuType == '1'")
        el-input(v-model='UpdateForm.permission' autocomplete='off' class="!w-[300px]"
          placeholder="请输入权限标识")
      el-form-item(label='菜单路径' prop="path" v-if="UpdateForm.menuType == '0'")
        el-input(v-model='UpdateForm.path' autocomplete='off' class="!w-[300px]"
          placeholder="请输入菜单路径")
      el-form-item(label='图标' prop="icon" v-if="UpdateForm.menuType == '0'")
        IconSelect(v-model="UpdateForm.icon")
      el-form-item(label='排序' prop="path" v-if="UpdateForm.menuType == '0'")
        el-input(v-model='UpdateForm.sortOrder' autocomplete='off' type="number" class="!w-[300px]"
          placeholder="请输入排序值（越小越靠前）")
      el-form-item(label='是否显示' prop="visibleswitchvalue" v-if="UpdateForm.menuType == '0'")
        el-switch(v-model="visibleswitchvalue" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-value="1" inactive-value="0")
      el-form-item(label='是否缓存' prop="keepAliveswitchvalue" v-if="UpdateForm.menuType == '0'")
        el-switch(v-model="keepAliveswitchvalue" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-value="1" inactive-value="0")
      el-form-item(label='父级菜单')
        el-tree-select(
          v-model="UpdateForm.parentId" 
          :data="menuList" 
          check-strictly
          :render-after-expand="false"
          show-checkbox
          check-on-click-node
          class="!w-[300px]")
    template(#footer)
      span.dialog-footer
        el-button(@click='dialogUpdateVisible = false') 关闭
        el-button(type='primary' @click='UpdateFormSubmit') 确认提交
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-form-item__label) {
  font-weight: 700;
}

:deep(.el-pagination) {
  flex-flow: wrap;
}

:deep(.is-draggable) {
  max-height: 80vh;
  overflow: auto;
}

:deep(.el-dialog__header) {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}

.collapsedom {
  padding: 0 20px;
  background-color: #fff;
}

.ovh-x {
  height: 40vh;
  overflow-y: auto;
}

:deep(.el-descriptions__header) {
  margin: 16px 0 !important;
}
</style>
