<template>
  <div class="user-manage">
    <el-skeleton :rows="10" v-if="!isLoaded" :throttle="500" />
    <div class="main-container">
      <qu-search-area ref="topScreenRef" :model="screenForm" @search="restSearch" @reset="clearScreen(screenFormRef)">
          <el-form-item label="打卡日期" prop="name">
            <el-date-picker v-model="screenForm.timeArr" type="datetimerange" range-separator="To"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
          <el-form-item label="所属站点" prop="name">
            <div class="screen-item">
              <district-screen v-model:districtId="screenForm.districtId" ref="districtScreenRef"
                @districtChange="fetchPunchUser"></district-screen>
            </div>
          </el-form-item>
          <el-form-item label="打卡人员" prop="userId">
            <div class="screen-item">
              <el-select v-model="screenForm.userId" value-key="" placeholder="" clearable filterable>
                <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="打卡人手机号" prop="userMobile">
            <div class="screen-item">
              <el-input v-model="screenForm.userMobile"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="打卡终端" prop="punchTerminal">
            <div class="screen-item">
              <el-select v-model="screenForm.punchTerminal" value-key="" placeholder="" clearable filterable>
                <el-option v-for="item in selectItems['punchTerminal']" :key="item.key" :label="item.value"
                  :value="item.key">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="打卡方式" prop="punchMode">
            <div class="screen-item">
              <el-select v-model="screenForm.punchMode" value-key="" placeholder="" clearable filterable>
                <el-option v-for="item in selectItems['punchMode']" :key="item.key" :label="item.value"
                  :value="item.key">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="打卡类型" prop="punchType">
            <div class="screen-item">
              <el-select v-model="screenForm.punchType" value-key="" placeholder="" clearable filterable>
                <el-option v-for="item in selectItems['punchType']" :key="item.key" :label="item.value"
                  :value="item.key">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="数据状态" prop="dataState">
            <div class="screen-item">
              <el-select v-model="screenForm.dataState" value-key="" placeholder="" clearable filterable>
                <el-option v-for="item in selectItems['dataState']" :key="item.key" :label="item.value"
                  :value="item.key">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
      </qu-search-area>
      <div class="main-table" v-if="isLoaded">
        <qu-table :tableData="tableData" v-model:tableHeader="tableHeader" :height="tableHeight" :pageProps="pageProps"
          :rowButtons="rowButtons" @rowButtonClick="rowButtonClick" @pageChange="pageChange" @sortChange="sortChange"
          v-loading="tableLoading" :tableButtons="tableButtons" @buttonClick="buttonClick"></qu-table>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick, watch } from "vue";
import templateHooks from "@/Hooks/templateHooks";
import { dropdownService } from "@/ApiService/dropdownService";
import { attendanceService } from "@/ApiService/taskCenterService";
const isLoaded = ref(false);
const tableLoading = ref(false);
const topScreenRef = ref();
const tableHeight = ref(500);
const userList = ref([]);
const districtScreenRef = ref();
// 数据定义 end
const buttonClick = (button) => {
  currentButton.data = button;
  buttonsClickFun.data[button.enName]();
};
const rowButtonClick = ({ row, $column }) => {
  for (let i in row) {
    currentRow.data[i] = row[i];
  }
  currentButton.data = $column;
  buttonsClickFun.data[$column.enName]();
};
const fetchData = () => {
  const { page, rows, sord, sidx } = pageProps;
  if (screenForm.timeArr) {
    screenForm.punchTimeStart = screenForm.timeArr[0];
    screenForm.punchTimeEnd = screenForm.timeArr[1];
  }
  const {
    punchTimeStart,
    punchTimeEnd,
    dataState,
    districtId,
    punchMode,
    punchTerminal,
    punchType,
    userId,
    userMobile,
  } = screenForm;
  attendanceService
    .pageList({
      type: 0,
      page,
      rows,
      sord,
      sidx,
      punchTimeStart,
      punchTimeEnd,
      dataState,
      districtId,
      punchMode,
      punchTerminal,
      punchType,
      userId,
      userMobile,
    })
    .then((res) => {
      isLoaded.value = true;
      if (res.code == 0) {
        tableData.value = res.data.rows;
        pageProps.records = res.data.records;
      } else {
        $message.error(res.err);
      }
    });
};
const fetchPunchUser = () => {
  dropdownService
    .principalList({ districtId: screenForm.districtId })
    .then((res) => {
      if (res.code == 0) {
        userList.value = res.data;
      } else {
        $message.error(res.err);
      }
    });
};
const {
  $route,
  $router,
  $store,
  $message,
  screenForm,
  screenFormRef,
  selectItems,
  tableData,
  tableHeader,
  currentRow,
  currentButton,
  tableButtons,
  rowButtons,
  pageProps,
  buttonsClickFun,
  pageChange,
  sortChange,
  restSearch,
  clearScreen,
} = templateHooks(fetchData);
// 函数定义 end
onMounted(() => {
  buttonsClickFun.data = {
    export: () => {
      const {
        punchTimeStart,
        punchTimeEnd,
        dataState,
        districtId,
        punchMode,
        punchTerminal,
        punchType,
        userId,
        userMobile,
      } = screenForm;
      attendanceService.export({
        punchTimeStart,
        punchTimeEnd,
        dataState,
        districtId,
        punchMode,
        punchTerminal,
        punchType,
        userId,
        userMobile,
      });
    },
  };
  nextTick(() => {
    districtScreenRef.value.fetchDistricts().then((res) => {
      if (res && res.length != 0) {
        screenForm.districtId = res[0].id;
        fetchPunchUser();
      }
      fetchData();
    });
  });
});
watch(tableButtons, (val) => {
  console.log($route.name);
  if ($route.name == "PunchRecord") {
    if (val && val.length != 0) {
      nextTick(() => {
        const windowHeight = document.body.clientHeight;
        console.log(topScreenRef.value.clientHeight);
        tableHeight.value =
          windowHeight -
          topScreenRef.value.clientHeight -
          170;
      });
    }
  }
});
// 生命周期 end
</script>
<script>
export default {
  name: "PunchRecord",
};
</script>
