<!-- 
 * @Description: 未归寝
 * @Author: yxq 
 * @Date: 2023-12-15 15:45:59
-->
<template>
  <div>
    <form-container v-model="visible" row-key="id" :title="`寝室${propsInfo.record.name}归寝详情`" form-size="800px" @close="onClose">
      <ProTable
        ref="returnTableRef"
        :request-auto="false"
        title="归寝详情"
        height="500px"
        :pagination="false"
        :columns="columns"
        :request-api="userManageDormitoryApi.returnDetail"
        :data-callback="dataCallback"
      >
      </ProTable>
      <template #footer>
        <el-button @click="onClose"> 关闭 </el-button>
      </template>
    </form-container>
    <!-- 预览头像 -->
    <el-dialog v-model="imgVisible" title="查看头像" width="830px">
      <div style="display: flex; align-items: center; justify-content: center">
        <img class="detailpic" :src="'/api/' + faceUrl" alt="" />
      </div>
    </el-dialog>
  </div>
</template>
  
<script setup lang="tsx" name="attendanceStudentsReturn">
import { userManageDormitoryApi,attendanceApi } from "@/api";
import { ColumnProps,ProTableInstance } from "@/components/ProTable/interface";
import { FormOptEnum } from "@/enums";
import { useHandleData } from "@/hooks";
import { formatDate } from "@/utils";

const visible = ref(false); //是否显示
// 弹框参数
const propsInfo = reactive<FormProps.Base<{}>>({
  opt: FormOptEnum.VIEW, //操作类型
  record: {}, //弹框数据
  disabled: false
});

// 获取 returnTableRef 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const returnTableRef = ref<ProTableInstance>();
// 表格配置项
const columns: ColumnProps[] = [
  {
    prop: "name",
    label: "学生姓名"
  },
  {
    prop: "personSetName",
    label: "班级"
  },
  {
    prop: "faces",
    label: "图片",
    render: scope => {
      return (
        <img
          src={scope.row.snapshotUrl?'/api/'+scope.row.snapshotUrl:scope.row.faces.length > 0 ? '/api/'+scope.row.faces[0].faceUrl : ""}
          onClick={() => viewHeadImage(scope)}
          style="width:50px;height:50px;cursor:pointer"
          alt=""
        />
      );
    }
  },
  {
    prop: "tick",
    label: "时间"
  },
];
/**
 * 打开弹框
 * @param props 弹框参数
 */
function onOpen(props: FormProps.Base<{}>) {
  Object.assign(propsInfo, props); //合并参数
  visible.value = true; //显示弹框
  nextTick(()=>{
    returnTableRef.value!.searchParam.id = props.record.id;
    returnTableRef.value!.searchParam.returnTime = props.record.ReturnTime;
    returnTableRef.value.search()
  })
}
const dataCallback = (res:any)=>{
  let attendanceDtos = res.attendanceDtos||[]
  return attendanceDtos.map(e=>{
    e.faces = []
    let obj = res.personInfos.find(e1=>e1.personId == e.personId)
    console.log(obj)
    if(obj){
      e.faces = obj.faces
      e.name = obj.name
      e.personSetName = obj.personSetName
    }
    return e
  })
}
// 图片预览
const imgVisible = ref(false);
const faceUrl = ref('');
const viewHeadImage = (scope: any) => {
  faceUrl.value = scope.row.snapshotUrl||scope.row.faces[0].faceUrl;
  imgVisible.value = true
};
/** 关闭表单*/
function onClose() {
  visible.value = false;
}
// 刷新表格
const RefreshTable = () => {
  returnTableRef.value?.refresh();
};
// 暴露给父组件的方法
defineExpose({
  onOpen
});
</script>
  
<style lang="scss" scoped></style>
  