<template>
  <div class="main-box">
    <TreeFilter title="组织架构" ref="treeFilterRef" :request-api="OrgApi.tree" label="name" :default-value="initParam.userId" @change="changeTree" />
    <div class="table-box">
      <ProTable
        ref="proTableRef"
        title="组织列表"
        row-key="userId"
        :columns="columns"
        :init-param="initParam"
        :search-columns="searchColumns"
        :request-api="getTableList"
        @reset="reset">
        <!-- 表格 header 按钮 -->
        <template #tableHeader="scope">
          <el-button type="primary" icon="CirclePlus" @click="openDrawer('新增')"> 新增用户 </el-button>
          <el-button type="danger" icon="Delete" plain :disabled="!scope.isSelected" @click="batchDelete(scope.selectedListIds)">
            批量删除
          </el-button>
        </template>

        <template #operation="{ row }">
          <div class="operation-group">
            <el-button type="primary" link icon="EditPen" @click="openDrawer('编辑', row)"> 编辑 </el-button>
            <el-button v-if="row.isLock !== '1'" type="primary" link icon="Delete" @click="deleteRow(row)"> 删除 </el-button>
            <div class="group" v-if="row.isLock !== '1'">
              <el-dropdown trigger="click">
                <el-button type="primary" link icon="DArrowRight"> 更多 </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item icon="Refresh" @click="UserApi.resetPassword(row)">重置密码</el-dropdown-item>
                    <el-dropdown-item icon="User" @click="openDialog('设置角色', row)"> 设置角色 </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </template>
      </ProTable>
    </div>
    <UserDrawer ref="drawerRef" />
    <AddRoleDialog ref="dialogRef" />
  </div>
</template>
<script lang="tsx" setup name="OrgManage">
import OrgApi from '@/api/module/system/org'
import UserApi from '@/api/module/system/user'
import UserDrawer from './components/UserDrawer.vue'
import AddRoleDialog from './components/AddRoleDialog.vue'
import TreeFilter from '@/components/TreeFilter/index.vue'
import { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface'
import { UserBO, UserQuery, UserVO } from '@/api/interface/system/user'
import { useDictOptions, useHandleData } from '@/hooks'

const initParam = reactive({ userId: '', orgId: '' })

const selectTreeId = ref<string>('')
const proTableRef = ref<ProTableInstance>()
const treeFilterRef = ref<InstanceType<typeof TreeFilter>>()

// 树形筛选切换
const changeTree = (val: string) => {
  if (val) {
    selectTreeId.value = val
    initParam.orgId = val
    proTableRef.value?.clearSelection()
  }
}

// 表格配置项
const columns: ColumnProps<UserVO>[] = [
  { type: 'selection', width: 60, selectable: row => row.isLock !== '1' },
  { prop: 'account', label: '账号', width: 130 },
  { prop: 'userName', label: '姓名', width: 120 },
  { prop: 'nickName', label: '昵称', width: 120 },
  {
    prop: 'userType',
    label: '用户类型',
    tag: true,
    enum: useDictOptions('USER_TYPE'),
    width: 100,
    fieldNames: { label: 'dictLabel', value: 'dictValue', tagType: 'callbackShowStyle' }
  },
  { prop: 'phoneNumber', label: '手机号码', tag: true, width: 120 },
  { prop: 'roles', label: '角色', width: 120 },
  {
    prop: 'status',
    label: '状态',
    tag: true,
    enum: useDictOptions('COMMON_STATUS'),
    width: 80,
    fieldNames: { label: 'dictLabel', value: 'dictValue', tagType: 'callbackShowStyle' }
  },
  { prop: 'remark', label: '备注' },
  { prop: 'createByName', label: '创建人', width: 120 },
  { prop: 'createTime', label: '创建时间', width: 160 },
  { prop: 'operation', label: '操作', width: 200, fixed: 'right' }
]

// 表格配置项
const searchColumns: SearchProps[] = [
  { prop: 'account', label: '账号', el: 'input' },
  { prop: 'userName', label: '姓名', el: 'input' }
]

// 重置
const reset = () => {
  initParam.orgId = ''
  selectTreeId.value = ''
  proTableRef.value?.clearSelection()
  treeFilterRef.value?.treeRef?.setCurrentKey()
}

// 获取table列表
const getTableList = (params: UserQuery) => UserApi.page(params)

// 单行删除
const deleteRow = async (row: UserVO) => {
  await useHandleData(UserApi.delete, [row.userId], `删除【${row.account}】用户`)
  proTableRef.value?.getTableList()
}

// 批量删除信息
const batchDelete = async (ids: (string | number)[]) => {
  await useHandleData(UserApi.delete, ids, '删除所选用户信息')
  proTableRef.value?.clearSelection()
  proTableRef.value?.getTableList()
}

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof UserDrawer> | null>(null)
const openDrawer = (title: string, row: Partial<UserBO> = {}) => {
  const params = {
    title,
    row: title === '新增' ? { orgId: selectTreeId.value } : { ...row },
    isView: title === '查看',
    api: title === '新增' ? UserApi.add : title === '编辑' ? UserApi.edit : undefined,
    getTableList: proTableRef.value?.getTableList
  }
  drawerRef.value?.acceptParams(params)
}

// 打开 Dialog(新增、查看、编辑)
const dialogRef = ref<InstanceType<typeof AddRoleDialog> | null>(null)
const openDialog = (title: string, row: Partial<UserBO> = {}) => {
  const params = {
    title,
    row: { ...row },
    api: UserApi.addRole,
    getTableList: proTableRef.value?.getTableList
  }
  dialogRef.value?.acceptParams(params)
}
</script>

<style lang="scss" scoped>
.operation-group {
  display: flex;
  justify-content: center;
  .group {
    display: flex;
    justify-content: center;
  }
}
.operation-group > * {
  margin-left: 8px;
}
</style>
