<!-- 
 * @Description: 学生归寝
 * @Author: yxq 
 * @Date: 2024-7-24
-->
<template>
  <div class="main-box">
    <TreeFilter
      ref="treeFilter"
      label="name"
      id="id"
      width="300px"
      :show-all="false"
      :isData="true"
      :data="treeData"
      :default-value="defaultValue"
      @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="教师点名" :request-auto="false" :columns="columns" :request-api="userManageDormitoryApi.returnList">
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <div style="display: flex; align-items: center">
            <el-date-picker
              v-model="ReturnTime"
              :clearable="false"
              value-format="YYYY-MM-DD"
              type="date"
              placeholder="选择查询日期"
              @change="retrunTimeChange"
            >
            </el-date-picker>
            <div style="margin-left: 15px; color: #606266">归寝时间：{{ returnTime }}</div>
          </div>
        </template>
        <!-- 表格操作栏 -->
        <template #operation="scope">
          <el-space>
            <!-- :disabled="!scope.row.noReturnNum" -->
            <s-button link prefix="归寝" :opt="FormOptEnum.EDIT" suffix="确认" @click="onOpen(FormOptEnum.VIEW, scope.row)" />
            <s-button link prefix="归寝" :opt="FormOptEnum.VIEW" suffix="详情" @click="onOpen1(FormOptEnum.VIEW, scope.row)" />
          </el-space>
        </template>
      </ProTable>
      <ReturnConfirm ref="ReturnConfirmRef" />
      <ReturnDetail ref="ReturnDetailRef" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { userManageDormitoryApi } from "@/api";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { FormOptEnum } from "@/enums";
import ReturnConfirm from "./components/returnConfirm/index.vue";
import ReturnDetail from "./components/returnDetail/index.vue";
const proTable = ref<ProTableInstance>();
/**左侧楼栋**/
import TreeFilter from "@/components/TreeFilter/index.vue";
import { formatDate } from "@/utils";
const treeFilter = ref<InstanceType<typeof TreeFilter> | null>(null);
//楼栋切换
const buildId = ref<number | string>();
function changeTreeFilter(val: number | string) {
  console.log(treeFilter.value?.treeData);
  buildId.value = val;
  proTable.value!.pageable.pageNum = 1;
  proTable.value!.searchParam.buildId = val;
  proTable.value!.search();
}
// 初始化数据
const treeData = ref([]);
const defaultValue = ref("");
const ReturnTime = ref("");
let ReturnTimeDefault = "";
const returnTime = ref();
onMounted(() => {
  // 设置默认查询日期
  let date = formatDate(new Date().valueOf());
  ReturnTime.value = date.substring(0, 10);
  proTable.value!.searchParam.ReturnTime = ReturnTime.value;
  ReturnTimeDefault = ReturnTime.value;
  // 请求楼栋
  userManageDormitoryApi.list().then(res => {
    if (res.code == 200) {
      if (res.data.length) {
        treeData.value = res.data;
        defaultValue.value = res.data[0].id.toString();
        buildId.value = defaultValue.value;
        // 请求表格
        proTable.value!.pageable.pageNum = 1;
        proTable.value!.searchParam.buildId = defaultValue.value;
        proTable.value!.search();
      }
    }
  });
  // 归寝时间
  userManageDormitoryApi.getReturnTime().then(res => {
    if (res.code == 200) {
      returnTime.value = res.data.timeBegin + " ~ " + res.data.timeEnd;
    }
  });
});
// 查询日期修改
const retrunTimeChange = () => {
  proTable.value!.pageable.pageNum = 1;
  proTable.value!.searchParam.ReturnTime = ReturnTime.value || ReturnTimeDefault;
  proTable.value!.search();
};
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
// 表格配置项
const columns: ColumnProps[] = [
  {
    prop: "name",
    label: "寝室编号"
  },
  {
    prop: "personCount",
    label: "寝室人数"
  },
  {
    prop: "dormitoryCount",
    label: "归寝人数"
  },
  {
    prop: "noDormitoryCount",
    label: "未归寝人数",
    render: scope => {
      return scope.row.personCount - scope.row.dormitoryCount;
    }
  },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];
const ReturnConfirmRef = ref<InstanceType<typeof ReturnConfirm> | null>(null);
const ReturnDetailRef = ref<InstanceType<typeof ReturnConfirm> | null>(null);
/**
 * 人工确认
 * @param opt  操作类型
 * @param record  弹框数据
 */
function onOpen(opt: FormOptEnum, record = {}) {
  switch (opt) {
    case FormOptEnum.VIEW:
      ReturnConfirmRef.value?.onOpen({
        opt: opt,
        record: { ...record, ReturnTime: ReturnTime.value || ReturnTimeDefault },
        successful: RefreshTable
      });
      break;
  }
}
function onOpen1(opt: FormOptEnum, record = {}) {
  switch (opt) {
    case FormOptEnum.VIEW:
      ReturnDetailRef.value?.onOpen({
        opt: opt,
        record: { ...record, ReturnTime: ReturnTime.value || ReturnTimeDefault },
        successful: RefreshTable
      });
      break;
  }
}
// 刷新表格
const RefreshTable = () => {
  proTable.value?.refresh();
};
</script>
<style scoped lang="scss">
.table-box {
  width: 100%;
  height: 100%;
}
</style>
