<script setup lang="ts">
import { ref } from 'vue';

import { getAllDeptTree, queryUserList } from '#/api';

import UserTableView from './user-table-view.vue';

const generateFormModel = () => {
  return {
    id: '',
    username: '',
    name: '',
    phone: '',
    email: '',
    createdTime: [],
    enableState: '',
    deptId: '',
    page: 1,
    current: 1,
    size: 10,
  };
};
const treeData = ref([]);

const renderData = ref([]);
const formModel = ref(generateFormModel());
// const deptOptions = ref([]);

const getDeptData = async () => {
  try {
    treeData.value = await getAllDeptTree(0);
  } catch {}
};

const getUserTableData = async (params: any) => {
  try {
    const res = await queryUserList(params);
    renderData.value = res.records;
  } catch {}
};

// 查询
const search = () => {
  getUserTableData({
    // ...pagination,
    ...formModel.value,
  });
};

// const handleSelectDept = (id: any[]) => {
//   const [deptId] = id;
//   formModel.value.deptId = deptId;
//   search();
// };

const handleSelectUser = (data: any) => {
  formModel.value = data;
  search();
};

getUserTableData({ page: 1, size: 10, current: 1 });
getDeptData();
</script>

<template>
  <div class="px-1">
    <div class="mt-5 flex flex-col lg:flex-row">
      <!--      <div class="mr-4 w-full lg:w-1/4">-->
      <!--        <UserDeptTree :treeData="treeData" @select="handleSelectDept" />-->
      <!--      </div>-->
      <div class="w-full">
        <UserTableView :render-data="renderData" @change="handleSelectUser" />
      </div>
    </div>
  </div>
</template>

<style scoped></style>
