<script lang="ts">
// 声明额外的选项
export default {
  name: "dept"
};
</script>
<script setup lang="ts">
import { useUser } from "./hook";
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,
  deptList,
  AddUser,
  handleUpdate,
  handleDelete,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  form
} = useUser();
defineExpose({
  loading,
  columns,
  dataList,
  pagination,
  dialogUpdateVisible,
  UpdateFormSubmit,
  UpdateForm,
  submit,
  onSearch,
  dialogType,
  deptList,
  AddUser,
  handleUpdate,
  handleDelete,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  form
});
</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="deptName")
        el-input(
          v-model="form.deptName",
          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(Search)",
          :loading="loading",
          @click="onSearch('all')"
        ) 全部

  //- 表格组件
  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='部门名称' prop="name")
        el-input(v-model='UpdateForm.name' autocomplete='off' class="!w-[300px]"
          placeholder="请输入部门名称")
      el-form-item(label='权重' prop="sortOrder")
        el-input(v-model='UpdateForm.sortOrder' autocomplete='off' type="number" class="!w-[300px]"
          placeholder="请输入权重值（越小越靠前）")
      el-form-item(label='选择部门')
        el-tree-select(
          v-model="UpdateForm.parentId" 
          :data="deptList" 
          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>
