<template>
  <my-layout>
    <layout-item class="bg-white">
      <div class="p-15px flex items-center" @keyup.enter="search()">
        <input-filter v-model="name" label="姓名" placeholder="搜索姓名" :width="280" />
        <el-button type="primary" @click="search">查询</el-button>
        <div class="flex-grow"></div>
        <el-button type="primary" @click="showModal()">新增</el-button>
      </div>
    </layout-item>
    <layout-main :scroll="false">
      <el-table v-loading="loading" border ref="tableRef" height="100%" :data="list">
        <el-common-column prop="doctorName" label="姓名" :width="160" />
        <el-common-column prop="doctorNo" label="院内工号" :width="160" />
        <el-common-column prop="sex" label="性别" :width="160" />
        <el-common-column prop="deptName" label="科室" :width="160" />
        <el-common-column prop="job" label="岗位" :width="160">
          <template #default="{ row }">
            {{ jobMap[row.job] || '' }}
          </template>
        </el-common-column>
        <el-common-column prop="title" label="职称" :width="160" />
        <el-common-column prop="mobile" label="联系电话" :width="160" />
        <el-table-column fixed="right" type="action" label="操作" :width="100">
          <template #default="{ row }">
            <el-text type="primary" class="cursor-pointer mr-10px" @click="showModal(row)">编辑</el-text>
            <el-text type="danger" class="cursor-pointer" @click="remove(row)">删除</el-text>
          </template>
        </el-table-column>
      </el-table>
    </layout-main>
    <layout-item>
      <pagination :totalRow="total" :pageSize="pageSize" :currentPage="page" @handle-size-change="changeSize"
        @handle-current-change="changePage" />
    </layout-item>
  </my-layout>
  <people-drawer :jobList="jobList" :data="personItem" :visible="drawerVisible" @close="drawerVisible=false" @change="search()" />
</template>

<script setup>
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getHlwPersonList, deleteHlwPerson } from "@/api/hlw";
import useModal from "@/hooks/useModal";
import useElPagination from "@/hooks/useElPagination";
import {jobList,jobMap } from '@/baseData/hlw-job.js'

import { InputFilter } from "@/components/filter-bar";
import MyLayout, { LayoutMain, LayoutItem } from "@/components/layout";
import pagination from "@/components/pagination/pagination.vue";
import elCommonColumn from "@/components/el-common-column/el-common-column.vue";
import peopleDrawer from "./people-drawer.vue";

const { list, page, pageSize, total, changePage, changeSize } = useElPagination(getList);

const name = ref('');
const personItem = ref({});
const params = ref({});
const loading = ref(false);
const drawerVisible = ref(false);

function search() {
  params.value = {}
  if (name.value.trim()) {
    params.value.keyword = name.value.trim()
  }
  page.value = 1;
  getList();
}

function showModal(data = {}) {
  personItem.value = { ...data };
  drawerVisible.value = true
}

async function getList() {
  loading.value = true;
  const { data, success } = await getHlwPersonList({ page: page.value, pageSize: pageSize.value, ...params.value });
  list.value = data && Array.isArray(data.data) ? data.data : [];
  total.value = data && data.total >= 0 ? data.total : 0;
  loading.value = false;
}

async function remove(row) {
  await ElMessageBox.confirm("确定删除人员信息？", "提示", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  });
  const res = await deleteHlwPerson({_id: row._id });
  if (res.success) {
    ElMessage.success(res.message || '删除成功');
    search()
  } else {
    ElMessageBox.error(res.message);
  }
}

onMounted(() => {
  getList()
});
</script>