<template>
  <div class="app-container">
    <els-table
      :btnList="btnList"
      :columns="columns"
      :tableData="tableData"
      :searchList="searchList"
      @getTableData="getTableData"
      :pageSet="pageSet"
      @handleAdd="handleAdd"
      :option="tableOption"
      :tableLoading="loading"
    ></els-table>
    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body destroy-on-close>
      <els-form
        :fieldList="fieldList"
        :formOption="formOption"
        :formLoading="false"
        @cancel="cancel"
        @ok="submit"
        :form="formData"
      ></els-form>
    </el-dialog>
    <!-- 使用人数 -->
    <el-dialog title="人员信息" v-model="openUser" width="700px" append-to-body destroy-on-close>
      <els-table
        :columns="userColumns"
        :tableData="userTableData"
        :option="userTableOption"
        :pageSet="userPageSet"
        :tableLoading="userLoading"
        @getTableData="getUserTableData"
      ></els-table>
      <p style="margin-bottom: 0;text-align: right;">
        <el-button type="primary" @click="handlerUserClose">关闭</el-button>
      </p>
    </el-dialog>
  </div>
</template>

<script setup name="Post" lang="jsx">
import { listPost, addPost, delPost, getPost, updatePost } from "@/api/system/post";
import { listDept } from "@/api/system/dept";
import { listUser } from "@/api/system/user";
import { init } from './index.jsx'

const { proxy } = getCurrentInstance();

// 部门数据
const deptList = ref([])
const deptTemp = ref([])

// 表格加载效果
const loading = ref(true);
// 表格数据
const tableData = ref([])
// 表格筛选参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  postCode: undefined,
  postName: undefined,
  status: undefined
})
// 编辑弹窗标题
const title = ref("");
// 编辑弹窗开关
const open = ref(false);
//人员信息
const openUser = ref(false)
// 人员信息表格数据
const userTableData = ref([])
// 行项目缓存
const tempRow = ref({})
// 新增修改表单数据
const formData = ref({})
const userLoading = ref(false)
//重新获取表格数据
const getTableData = (searchVal) => {
  queryParams.value = {
    ...searchVal,
    deptId: searchVal.deptId
  }
  getList()
}
// 获取人员表格数据
const getTableDataUser = (row) => {
  userLoading.value = true
  userTableData.value = []
  let params = {
    pageNum: row.pageNum,
    pageSize: row.pageSize,
    deptId: row.deptId,
    postIds: [row.postId]
  }
  listUser(params).then(res => {
    if (res.code === 200) {
      userTableData.value = res.rows
      userLoading.value = false
      userPageSet.value.total = res.total
    }
  }).catch(err => console.log(err))
}
const getUserTableData = (searchVal) => {
  getTableDataUser({
    ...searchVal,
    ...tempRow.value
  })
}
// 人员表格弹窗关闭
const handlerUserClose = () => {
  openUser.value = false
  tempRow.value = {}
}
/** 新增按钮操作 */
const handleAdd = () => {
  open.value = true;
  formData.value = {}
  title.value = "新增岗位";
}
/** 修改按钮操作 */
const handleUpdate = (row) => {
  const postId = row.postId
  loading.value = true;
  getPost(postId).then(res => {
    formData.value = res.data;
    title.value = "修改岗位";
    loading.value = false
    open.value = true;
  })
}
/** 删除按钮操作 */
const handleDelete = (row) => {
  const postIds = row.postId
  proxy.$modal.confirm('是否确认删除岗位名称：“' + row.postName + '” 的数据项？').then(function() {
    return delPost(postIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 查询岗位列表 */
const getList = () => {
  loading.value = true;
  listPost(queryParams.value).then(response => {
    tableData.value = response.rows;
    pageSet.value.total = response.total;
    loading.value = false;
  });
}
// 使用人数点击
const handleUserNum = (row) => {
  tempRow.value = row
  getTableDataUser({
    pageNum: userPageSet.value.pageNum,
    pageSize: userPageSet.value.pageSize,
    ...row
  })
  openUser.value = true
}

// 获取部门数据
const getDept = () => {
  listDept().then(res => {
    if(res.code === 200){
      deptList.value = proxy.handleTree(res.data, "deptId")
      deptTemp.value = res.data
    }else{
      proxy.$modal.msgError(res.msg);
    }
  }).catch(err => console.log(err))
}
// 编辑弹窗取消操作
const cancel = (val) => {
  open.value = false;
}
// 编辑表单提交
const submit = (val) => {
  const dept = deptTemp.value.find(item => val.value.deptId === item.deptId)
  let params = {
    ...val.value,
    deptId: dept.deptId,
    deptName: dept.deptName,
    postCode: val.value.postName + '-' + dept.deptId
  }
  if (title.value === "修改岗位") {
    updatePost(params).then(response => {
      proxy.$modal.msgSuccess("修改成功");
      open.value = false;
      getList();
    });
  } else {
    addPost(params).then(response => {
      proxy.$modal.msgSuccess("新增成功");
      open.value = false;
      getList();
    });
  }
}
const {
  searchList,
  btnList,
  columns,
  pageSet,
  tableOption,
  fieldList,
  formOption,
  userTableOption,
  userPageSet,
  userColumns
} = init(proxy, { handleUpdate, handleDelete, deptList, handleUserNum })
getDept()
getList();
</script>
