<!-- 
 * @Description: 行为轨迹
 * @Author: yxq 
 * @Date: 2024-7-15
-->
<template>
  <div class="main-box">
    <!-- <TreeFilter
      ref="treeFilter"
      label="personSetName"
      id="personSetId"
      width="300px"
      :show-all="true"
      :request-api="userManageClassManageApi.page"
      @change="changeTreeFilter"
    >
      <template v-slot:header>
        <h4 style="margin: 0 0 15px; font-size: 18px; font-weight: bold; color: var(--el-color-info-dark-2); letter-spacing: 0.5px">所属班级</h4>
      </template>
      <template v-slot:label="{ row }">
        <span class="custom-tree-node">
          <span>{{ row.node.label }}</span>
        </span>
      </template>
    </TreeFilter> -->
    <div class="table-box">
      <ProTable ref="proTable" title="人员管理" :columns="columns" rowKey="personId" :request-api="userManagePersonnelApi.page">
        <!-- 表格操作栏 -->
        <template #operation="scope">
          <el-space>
            <s-button link prefix="轨迹" suffix="查看" :opt="FormOptEnum.VIEW" @click="onOpenDetail(FormOptEnum.VIEW, scope.row)" />
          </el-space>
        </template>
      </ProTable>
    </div>
    <!-- 预览头像 -->
    <el-dialog v-model="visible" title="查看快照" width="830px" :before-close="handleClose">
      <div style="display: flex; align-items: center; justify-content: center">
        <img class="detailpic" :src="faceUrl" alt="" />
      </div>
    </el-dialog>
    <!-- 轨迹详情 -->
    <TraceShow ref="detialRef" />
  </div>
</template>
<script setup lang="tsx" name="SysUserPersonnel">
import { userManagePersonnelApi,SysUserPersonnel } from "@/api";
import { getMajorList, getDepartmentList, getClassList } from "@/mixin";
import { FormOptEnum } from "@/enums";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import TreeFilter from "@/components/TreeFilter/index.vue";
import TraceShow from "./components/traceShow/index.vue";
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const faceUrl = ref('');
const visible = ref(false); //预览头像
const proTable = ref<ProTableInstance>();
const treeFilter = ref<InstanceType<typeof TreeFilter> | null>(null);
const departmentOptions = ref<any>([])
const majorOptions = ref<any>([])
const classOptions = ref<any>([])
//监听depId/majorId变化
watch(
  () => [proTable.value!?.searchParam?.depId,proTable.value!?.searchParam?.majorId],
  async ([newDepId,newMajorId],[oldDepId,oldMajorId]) => {
    if(newDepId !== oldDepId){
      majorOptions.value =await getMajorList(newDepId)
      classOptions.value = [];
      proTable.value!.searchParam.majorId = "";
      proTable.value!.searchParam.personSetId = ""
    }
    if(newMajorId !== oldMajorId){
      classOptions.value = await getClassList(newMajorId)
    }
    
    
  } ,{ deep: true, immediate: false }
);
// 表格配置项
const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [
  {
    prop: "depId",
    label: "所属系部",
    enum: departmentOptions,
    fieldNames: { label: "name", value: "id" },
    search: {
      el: "select",
      span:1,
      props: {
        clearable: false,
        placeholder: "请选择系部",
      },
    },
    isShow: false
  },
  {
    prop: "majorId",
    label: "所属专业",
    enum: majorOptions,
    fieldNames: { label: "name", value: "id" },
    search: {
      el: "select",
      span:1,
      props: {
        clearable: false,
        placeholder: "请选择专业",
      },
    },
    isShow: false
  },
  {
    prop: "personSetId",
    label: "所属班级",
    enum: classOptions,
    fieldNames: { label: "personSetName", value: "personSetId" },
    search: {
      el: "select",
      span:1,
      props: {
        clearable: false,
        placeholder: "请选择所属班级",
      },
    },
    isShow: false
  },
  {
    prop: "faceUrl",
    label: "人脸",
    render: scope => {
      return (
        <img src={scope.row.faces.length > 0 ? scope.row.faces[0].faceUrl : ''} onClick={() => viewHeadImage(scope)} style='width:50px;height:50px;' alt=''/>
      );
    }
  },
  {
    prop: "name",
    label: "姓名"
  },
  {
    prop: "personId",
    label: "人员ID"
  },
  {
    prop: "phone",
    label: "手机号"
  },
  {
    prop: "personSetName",
    label: "所属班级",
  },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];
const viewHeadImage = (scope: any) => {
  faceUrl.value = scope.row.faces[0].faceUrl;
  visible.value = true
};
const handleClose = () => {
  visible.value = false;
};

// 刷新表格
const RefreshTable = () => {
  proTable.value?.refresh();
  treeFilter.value?.refresh(); //刷新树形筛选器
}

/** 部门切换 */
// const personSetId = ref<number | string>()
// function changeTreeFilter(val: number | string) {
//   personSetId.value = val
//   proTable.value!.pageable.pageNum = 1;
//   proTable.value!.searchParam.personSetId = val;
//   proTable.value!.search();
// }
const detialRef = ref<InstanceType<typeof TraceShow> | null>(null);
/**
 * 详情
 * @param opt  操作类型
 * @param record  弹框数据
 */
 function onOpenDetail(opt: FormOptEnum, record: {}) {
  switch (opt) {
    case FormOptEnum.VIEW:
      detialRef.value?.onOpen({ opt: opt, record: record, successful: RefreshTable });
      break;
  }
}
onMounted(async () => {
  // 获取系部下拉数据
  departmentOptions.value = await getDepartmentList()
  // 获取班级
  classOptions.value = await getClassList('')
});
</script>
<style scoped lang="scss">
.table-box {
  width: 100%;
  height: 100%;
}
.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  font-size: 14px;
}
</style>
