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

import Role from "@iconify-icons/ri/admin-line";
import Password from "@iconify-icons/ri/lock-password-line";
import More from "@iconify-icons/ep/more-filled";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";
const formRef = ref();
const defaultProps = {
  children: "children",
  label: "label"
};
const {
  form,
  loading,
  columns,
  dataList,
  pagination,
  dialogAddVisible,
  AddFormSubmit,
  submit,
  dialogType,
  AddForm,
  AddFormdata,
  AddFormvalueStrictly,
  onSearch,
  AddUser,
  handleUpdate,
  handleDelete,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  handleAuthorization,
  AuthorizationVisible,
  menuTree,
  AddAuthorization
} = useUser();
defineExpose({
  form,
  loading,
  columns,
  dataList,
  pagination,
  dialogAddVisible,
  dialogType,
  AddFormSubmit,
  submit,
  AddFormvalueStrictly,
  AddForm,
  AddFormdata,
  onSearch,
  AddUser,
  handleUpdate,
  handleDelete,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  handleAuthorization,
  AuthorizationVisible,
  AddAuthorization,
  menuTree,
  defaultProps
});
</script>

<template lang="pug">
.main
  div
    el-form.bg-bg_color.pl-8.pt-4.pr-8(
      label-position="left"
      label-width="100px"
      ref="formRef",
      :inline="true",
      :model="form",
      :rules="rules",
      class="w-[99/100]"
    )
      el-form-item(label="角色名称:", prop="roleName")
        el-input(
          v-model="form.roleName",
          placeholder="请输入角色名称",
          clearable,@keydown.enter="submit"
          class="!w-[230px]"
        )
      el-form-item
        el-button(
          type="primary",
          :icon="useRenderIcon(Search)",
          :loading="loading",
          @click="onSearch('search')"
        ) 查询
      el-form-item
        el-button(
          type="primary",
          :icon="useRenderIcon(Refresh)",
          :loading="loading",
          @click="onSearch('all')"
        ) 全部
    //- 表格组件
    PureTableBar.mt12(title="后台角色管理", @refresh="onSearch" )
      template(#buttons)
        //- el-button(v-if="hasAuth(['add'])" type="primary" :icon="useRenderIcon(AddFill)" @click="AddUser" 
        el-button(type="primary" :icon="useRenderIcon(AddFill)" @click="AddUser") 新增角色
      template(v-slot="{ size, checkList }")
        pure-table(
          stripe 
          border,
          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 }")
            .flex.flex-wrap.items-center
              el-button(
                class="reset-margin"
                link
                type="primary"
                :size="size"
                :icon="useRenderIcon(EditPen)"
                @click="handleUpdate(row)"
              ) 编辑
              el-button(
                class="reset-margin"
                link
                type="primary"
                :size="size"
                :icon="useRenderIcon(Delete)"
                @click="handleDelete(row)"
              ) 删除
              el-button(
                class="reset-margin"
                link
                type="primary"
                :size="size"
                :icon="useRenderIcon(Password)"
                @click="handleAuthorization(row)"
              ) 授权
  el-dialog(v-model='AuthorizationVisible' :close-on-click-modal="false" width="60%" title="角色授权")
    //- el-form(:model='AddFormdata' label-position="left" label-width="100px")
      el-form-item(label='权限' required)
        //- el-tree-select(v-model="AddFormvalueStrictly" :data="AddForm" multiple size="large" collapse-tags collapse-tags-tooltip :max-collapse-tags="3" :render-after-expand="false" show-checkbox check-strictly check-on-click-node class="!w-[230px]")
    el-scrollbar(height="400px")
      el-tree(:default-checked-keys="AddFormvalueStrictly" default-expand-all check-on-click-node node-key="id" :expand-on-click-node="false" check-strictly :props="defaultProps" :data="AddForm" class="!w-[230px]" show-checkbox ref="menuTree")
    template(#footer)
      span.dialog-footer
        el-button(@click='AuthorizationVisible = false') 关闭
        el-button(type='primary' @click='AddAuthorization') 确认提交
  el-dialog(v-model='dialogAddVisible' width="60%" :title="dialogType == 1? '新增角色':'修改角色'")
    el-form(:model='AddFormdata' 
      label-position="left"
      label-width="100px")
      el-form-item(label='角色名称' prop="roleName")
        el-input(v-model='AddFormdata.roleName' autocomplete='off' class="!w-[230px]"
          placeholder="请输入角色名称")
      el-form-item(label='角色描述' prop="roleDesc")
        el-input(v-model='AddFormdata.roleDesc' autocomplete='off' class="!w-[230px]"
          placeholder="请输入角色描述")
      el-form-item(label='角色编码' prop="roleCode")
        el-input(v-model='AddFormdata.roleCode' autocomplete='off' class="!w-[230px]"
          placeholder="请输入角色编码")
    template(#footer)
      span.dialog-footer
        el-button(@click='dialogAddVisible = false') 关闭
        el-button(type='primary' @click='AddFormSubmit') 确认提交
</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>
