<script lang="ts">
// 声明额外的选项
export default {
  name: "User"
};
</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 {
  form,
  loading,
  columns,
  dataList,
  pagination,
  dialogUpdateVisible,
  UpdateFormSubmit,
  UpdateForm,
  onSearch,
  submit,
  dialogType,
  optionList,
  AddUser,
  handleUpdate,
  handleDelete,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  handleLock,
  optionDeptList,
  optionPostList
} = useUser();
defineExpose({
  form,
  loading,
  columns,
  dataList,
  pagination,
  dialogUpdateVisible,
  UpdateFormSubmit,
  UpdateForm,
  submit,
  onSearch,
  dialogType,
  optionList,
  AddUser,
  handleUpdate,
  handleDelete,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  handleLock,
  optionDeptList,
  optionPostList
});
</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="phone")
        el-input(
          v-model="form.phone",
          placeholder="请输入账号",
          clearable,@keydown.enter="submit"
          class="!w-[230px]"
        )
      el-form-item(label="管理员名称:", prop="username")
        el-input(
          v-model="form.username",
          placeholder="请输入管理员名称",
          clearable,@keydown.enter="submit"
          class="!w-[230px]"
        )
      el-form-item(label="部门ID:", prop="deptId")
        el-input(
          v-model="form.deptId",
          placeholder="请输入部门ID",
          clearable,@keydown.enter="submit"
          class="!w-[230px]"
        )
      //- el-form-item(label="角色:", prop="RoleId")
        el-select(
          v-model="form.RoleId",
          placeholder="请选择用户角色",
          clearable,
          class="!w-[230px]"
        )
          el-option(:label="item.label", :value="item.Id" v-for="(item,index) in optionList")
      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(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 }")
            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="handleLock(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="username")
        el-input(v-model='UpdateForm.username' autocomplete='off' class="!w-[230px]"
          placeholder="请输入用户名")
      el-form-item(label='用户密码' prop="password")
        el-input(v-model='UpdateForm.password' autocomplete='off' class="!w-[230px]"
          :placeholder="dialogType == 1 ? '请输入用户密码' : '若不修改用户密码，可不填此项'")
      el-form-item(label='邮箱' prop="email")
        el-input(v-model='UpdateForm.email' autocomplete='off' class="!w-[230px]"
          placeholder="请输入邮箱")
      el-form-item(label='昵称' prop="nickname")
        el-input(v-model='UpdateForm.nickname' autocomplete='off' class="!w-[230px]"
          placeholder="请输入昵称")
      el-form-item(label='用户姓名' prop="name")
        el-input(v-model='UpdateForm.name' autocomplete='off' class="!w-[230px]"
          placeholder="请输入用户姓名")
      el-form-item(label='用户电话' prop="phone")
        el-input(v-model='UpdateForm.phone' autocomplete='off' class="!w-[230px]"
          placeholder="请输入用户电话")
      el-form-item(label="角色:", prop="role")
        el-select(
          v-model="UpdateForm.role",
          filterable,
          multiple,
          placeholder="请选择用户角色",
          clearable,
          class="!w-[230px]"
        )
          el-option(:label="item.label", :value="item.Id" v-for="(item,index) in optionList")
      el-form-item(label="岗位:", prop="post")
        el-select(
          v-model="UpdateForm.post",
          filterable,
          multiple,
          placeholder="请选择用户岗位",
          clearable,
          class="!w-[230px]"
        )
          el-option(:label="item.label", :value="item.Id" v-for="(item,index) in optionPostList")
      el-form-item(label="部门:", prop="deptId")
        el-select(
          v-model="UpdateForm.deptId",
          filterable,
          placeholder="请选择用户部门",
          clearable,
          class="!w-[230px]"
        )
          el-option(:label="item.label", :value="item.Id" v-for="(item,index) in optionDeptList")
    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>
