<template>
  <section class="select-wrapper" v-if="show">
    <!-- 左侧部门树 -->
    <section class="dept-wrapper">
      <DeptTree @node-click="handleDeptNodeClick" />
    </section>
    <section class="dept-wrapper">
      <el-table v-loading="loading" :data="list" @row-click="handleClickRow">
        <el-table-column label="用户编号" align="center" key="id" prop="id" />
        <el-table-column
          label="用户名称"
          align="center"
          prop="username"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="用户昵称"
          align="center"
          prop="nickname"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="部门"
          align="center"
          key="deptName"
          prop="deptName"
          :show-overflow-tooltip="true"
        />
      </el-table>
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
      <el-button type="primary" class="close" circle size="small" @click="close">
        <Icon icon="ep:close" />
      </el-button>
    </section>
  </section>
</template>
<script lang="ts" setup>
import * as UserApi from '@/api/system/user'
import DeptTree from '@/views/system/user/DeptTree.vue'
import {getPcUserPage} from "@/api/system/user";
const show = ref(false)
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  username: undefined,
  mobile: undefined,
  status: undefined,
  deptId: undefined,
  createTime: []
})
const emit = defineEmits(['select', 'close'])
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await UserApi.getPcUserPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 处理部门被点击 */
const handleDeptNodeClick = async (row) => {
  queryParams.deptId = row.id
  await getList()
}

function handleClickRow(row) {
  emit('select', row)
}
function open() {
  getList()
  show.value = true
}

function close() {
  show.value = false
  emit('close')
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.select-wrapper {
  display: flex;
  flex-flow: row nowrap;
  background-color: #fff;
  padding: 10px;
  padding-top: 50px;
  border-radius: 6px;
  min-height: 50vh;
  position: relative;
  .close {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .selec-wrapper {
    max-width: 400px;
    display: flex;
    flex-flow: row nowrap;
    gap: 5px;

    .users {
      flex: 1;
      display: flex;
      flex-flow: row wrap;
      gap: 5px;
    }

    .select {
      cursor: pointer;
      background-color: #f1faff;
      border: 1px dashed #00a3ff;
      padding: 0px 15px;
      color: #00a3ff;
      // color: #00a3ff;
      // text-decoration: underline;
      border-radius: 6px;
      height: fit-content;

      &:hover {
        opacity: 0.8;
      }
    }
  }
}
</style>
