<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, ['districtId'])">
          <el-form-item label="打卡日期" prop="name">
            <el-date-picker
              v-model="screenForm.dateArr"
              type="daterange"
              range-separator="To"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="站点" prop="name">
            <div class="screen-item">
              <district-screen
                v-model:districtId="screenForm.districtId"
                ref="districtScreenRef"
                @districtChange="districtChange"
              ></district-screen>
            </div>
          </el-form-item>
          <el-form-item label="人员名称" prop="userName">
            <div class="screen-item">
              <el-select
                v-model="screenForm.userName"
                value-key="name"
                placeholder=""
                clearable
                filterable
              >
                <el-option
                  v-for="item in personSelectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </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="taskScene">
            <div class="screen-item">
              <el-cascader
                ref="taskSceneRef"
                collapse-tags
                :show-all-levels="false"
                clearable
                v-model="screenForm.taskScene"
                :options="taskSceneList"
                :props="areaGridSelectProps"
                @change="taskSceneHandleChange"
                @focus="
                  () => {
                    if (taskSceneList.length <= 0) {
                      $message.warning(
                        '当前选择的所属站点暂无任务场景,请重新选择!'
                      );
                    }
                  }
                "
              >
                <template #default="{ data }">
                  <span>{{ data.name }}</span>
                </template>
              </el-cascader>
            </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 { watchPunchRecordDetailService } from "@/ApiService/watchPunchRecordService";
const fetchData = () => {
  const { page, rows } = pageProps;
  const { districtId, userName, userMobile, dateArr, gridAndScenes } =
    screenForm;
  let punchStaisTimeStart, punchStaisTimeEnd;
  if (dateArr?.length) {
    punchStaisTimeStart = dateArr[0];
    punchStaisTimeEnd = dateArr[1];
  }

  watchPunchRecordDetailService
    .pageList({
      page,
      rows,
      districtId,
      userName,
      userMobile,
      punchStaisTimeStart,
      punchStaisTimeEnd,
      gridAndScenes,
    })
    .then((res) => {
      const {
        code,
        data: { rows, records },
        err,
      } = res;
      console.log(rows, records);
      if (code == 0) {
        tableData.value = rows;
        pageProps.records = records;
      } else {
        $message.error(err);
      }
      isLoaded.value = true;
    });
};
const {
  $route,
  $router,
  $store,
  screenForm,
  screenFormRef,
  selectItems,
  tableData,
  tableHeader,
  currentRow,
  tableButtons,
  rowButtons,
  pageProps,
  buttonsClickFun,
  currentButton,
  $message,
  $messageBox,
  $common,
  pageChange,
  sortChange,
  restSearch,
  clearScreen,
} = templateHooks(fetchData);
screenForm.dateArr = [];
const isLoaded = ref(false);
const tableLoading = ref(false);
const topScreenRef = ref();
let tableHeight = ref(500);
let taskSceneList = ref([]);
let personSelectList = ref([]);
const districtScreenRef = ref();
const taskSceneRef = ref();
const areaGridSelectProps = {
  value: "gridId",
  label: "name",
  children: "childNode",
  checkStrictly: true,
  multiple: true,
};
// 数据定义 end
const districtChange = (e) => {
  console.log(e);
  screenForm.userName = "";
  screenForm.gridAndScenes = [];
  fetchTaskScene();
  fetchTaskPerson();
};
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 taskSceneHandleChange = () => {
  let checkArr = taskSceneRef.value.getCheckedNodes();
  let gridAndScenes = [];
  checkArr.forEach((item) => {
    gridAndScenes.push({
      gridId: item.data.gridId,
      id: item.data.id,
      isscene: item.data.isscene,
      level: item.data.level,
      sceneId: item.data.sceneId,
    });
  });
  screenForm.gridAndScenes = gridAndScenes;
};
// 获取任务场景
const fetchTaskScene = (id) => {
  return new Promise(() => {
    const { districtId } = screenForm;
    dropdownService.gridSceneTree({ districtId }).then(async (res) => {
      if (res.code == 0) {
        taskSceneList.value = res.data.childNode;
      }
    });
  });
};
// 获取任务人员
const fetchTaskPerson = (id) => {
  return new Promise(() => {
    const { districtId } = screenForm;
    dropdownService.principalList({ districtId }).then(async (res) => {
      personSelectList.value = res.data;
    });
  });
};

// 函数定义 end
onMounted(() => {
  nextTick(() => {
    districtScreenRef.value.fetchDistricts().then((res) => {
      if (res && res.length != 0) {
        screenForm.districtId = res[0].id;
        fetchTaskPerson();
        fetchTaskScene();
      }
      fetchData();
    });
  });
  buttonsClickFun.data = {
    add: () => {},
    export: () => {
      const { districtId, userName, userMobile, dateArr, gridAndScenes } =
        screenForm;
      let punchTimeStart, punchTimeEnd;
      if (dateArr?.length != 0) {
        punchTimeStart = dateArr[0];
        punchTimeEnd = dateArr[1];
      }
      watchPunchRecordDetailService.export({
        districtId,
        userName,
        userMobile,
        punchTimeStart,
        punchTimeEnd,
        gridAndScenes,
      });
    },
    edit: () => {},
    delete: () => {},
  };
});
// 设置表格高度
watch(tableButtons, (val) => {
  console.log("tableButtons", tableButtons);
  if ($route.name == "PunchRecordDetail") {
    nextTick(() => {
      const windowHeight = document.body.clientHeight;
      tableHeight.value =
        windowHeight -
        topScreenRef.value.clientHeight -
        170;
    });
  }
});
// 生命周期 end
</script>
<script>
export default {
  name: "PunchRecordDetail",
};
</script>
