<!-- 
 * @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="noReturnTableRef"
        :request-auto="false"
        title="归寝确认"
        height="500px"
        :pagination="false"
        :columns="columns"
        :request-api="userManageDormitoryApi.returnDetail"
        :data-callback="dataCallback"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader="scope">
          <s-button
            type="primary"
            :disabled="!scope.isSelected"
            icon="check"
            prefix="确认"
            suffix="归寝"
            @click="personConfirm(scope.selectedList, '确认已归寝')"
          />
        </template>
      </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
});

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