<template>
  <!-- 骨架屏 -->
  <el-skeleton :rows="30" :loading="pageBasicsData.loading" />
  <!-- 人员人效统计 -->
  <div class="task-box" v-if="!pageBasicsData.loading">
    <div ref="topSearchRef">
      <!-- 搜索区域 start-->
      <qu-search-area :model="pageBasicsData.screenForm" @search="restSearch" @reset="clearScreen">
        <el-form-item prop="timeArr" label="查询日期">
          <qu-time-select v-model.date="pageBasicsData.screenForm.timeArr" />
        </el-form-item>
        <el-form-item label="所属站点" prop="districtId">
          <div class="screen-item">
            <el-select
              filterable
              placeholder="请选择"
              v-model="pageBasicsData.screenForm.districtId"
            >
              <el-option
                v-for="item in pageBasicsData.districtList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
      </qu-search-area>
      <!-- 搜索区域 end-->
    </div>
    <!-- 表格 start-->
    <div class="main-table">
      <qu-table
        :custom="true"
        :showPage="true"
        :showIndex="true"
        :height="pageBasicsData.tableHeight"
        :tableData="tableData"
        :tableHeader="tableHeader"
        :pageProps="pageProps"
        @pageChange="pageChange"
        :rowButtons="rowButtons"
        @rowButtonClick="rowButtonClick"
        @fetchTableAttr="fetchTableAttr"
        @sortChange="sortChange"
        showOverflowTooltip
        :tableButtons="[{ cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' }]"
        @buttonClick="buttonClick"
      />
    </div>
    <!-- 表格 end-->
  </div>
  <!-- 查看任务详情 start-->
  <div v-if="showLookDialog">
    <el-dialog v-model="showLookDialog" title="人效报表详情" fullscreen>
      <statementDetailCom
        v-model:showLookDialog="showLookDialog"
        :recordingId="currentRow.id"
        :districtId="pageBasicsData.screenForm.districtId"
        :buttonId="currentButton.data.buttonId"
        :statisticsStartTime="currentRow.statisticsStartTime"
        :statisticsEndTime="currentRow.statisticsEndTime"
      />
    </el-dialog>
  </div>
  <!-- 查看任务详情 end-->
</template>
<script setup>
import { ref, reactive, onMounted, watch, nextTick } from "vue";
import templateHooks from "@/Hooks/templateHooks.js";
import { personEfficiencyCenterService } from "@/ApiService/personEfficiencyCenterService";
import { dropdownService } from "@/ApiService/dropdownService";
import statementDetailCom from "@/Components/personEfficiencyCenter/statementDetailCom.vue";
//页面基础数据
const pageBasicsData = reactive({
  loading: false, // 页面加载状态
  tableHeight: 200, //表格高度
  screenForm: {
    // 顶部搜索字段
    timeArr: [],
    districtId: "",
  },
  districtList: [], // 所属站点下拉列表
  taskSceneList: [], // 任务场景下拉列表
  personSelectList: [], // 派单and接单人员列表
  areaGridSelectProps: {
    value: "gridId",
    label: "name",
    children: "childNode",
    checkStrictly: true,
    multiple: true,
  },
});
// 任务详情
const taskDetailData = ref({});
// 当前行数据
const currentRow = reactive({
  recordingId: "",
});
// 查看任务
const showLookDialog = ref(false);
// 元素ref
const topSearchRef = ref(); //顶部搜索区域ref
const screenFormRef = ref(); //搜索区ref
const taskSceneRef = ref(); // 任务场景ref

onMounted(() => {
  //获取站点数据
  fetchDistricts().then((res) => {
    if (res.code == 0 && res.data.length) {
      pageBasicsData.districtList = res.data;
      pageBasicsData.screenForm.districtId = pageBasicsData.districtList[0].id;
      //设置默认查询时间
      setDefaultCancelDialog();
      // 获取列表数据
      fetchData();
    } else {
      $message.error("暂无站点信息,请配置站点!");
    }
  });
  buttonsClickFun.data = {
    // 查看
    taskDetail: () => {
      showLookDialog.value = true;
    },
  };
});

//#region watch定义start
// 设置表格高度
watch(
  () => topSearchRef.value,
  (val) => {
    let wHeight =
      document.documentElement.clientHeight || document.body.clientHeight;
    nextTick(() => {
      pageBasicsData.tableHeight = wHeight - val.clientHeight - 200;
    });
  }
);
// 站点变化清空其它查询条件
watch(
  () => pageBasicsData.screenForm.districtId,
  (val) => {
    if (val) {
      for (const key in pageBasicsData.screenForm) {
        if (key !== "districtId" && key !== "timeArr") {
          pageBasicsData.screenForm[key] = "";
        }
      }
    }
  }
);
//#endregion watch定义end

//#region 函数定义start
// 顶部按钮事件
const buttonClick = ({ enName }) => {
  if (enName == "export") {
    setDateFormat();
    personEfficiencyCenterService.efficiencyRecordingExport({
      ...pageBasicsData.screenForm,
    });
  }
};
// 设置查询日期字段
const setDateFormat = () => {
  pageBasicsData.screenForm.createTimeStart =
    pageBasicsData.screenForm.timeArr[0];
  pageBasicsData.screenForm.createTimeEnd =
    pageBasicsData.screenForm.timeArr[1];
};
// 默认时间设置
const setDefaultCancelDialog = () => {
  const start = new Date(new Date().toLocaleDateString());
  const end = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  pageBasicsData.screenForm.timeArr = [
    $common.fomatDateTime(start),
    $common.fomatDateTime(end),
  ];
};
// 获取表格数据
const fetchData = () => {
  setDateFormat();
  const { page, rows, sidx, sord } = pageProps;
  return new Promise(() => {
    personEfficiencyCenterService
      .efficiencyRecordingPageList({
        page,
        rows,
        sidx,
        sord,
        ...pageBasicsData.screenForm,
      })
      .then((res) => {
        if (res.code == 0) {
          pageBasicsData.loading = false;
          tableData.value = res.data.rows;
          pageProps.records = res.data.records;
        }
      });
  });
};
//查询
const restSearch = () => {
  pageProps.page = 1;
  fetchData();
};
// 清空搜索
const clearScreen = () => {
  screenFormRef.value.resetFields();
  pageBasicsData.screenForm.districtId = pageBasicsData.districtList[0].id;
  delete pageBasicsData.screenForm.gridAndScenes;
  setDefaultCancelDialog();
  fetchData();
};
// 获取所属站点
const fetchDistricts = () => {
  return new Promise((resolve) => {
    dropdownService.getDistrict().then(async (res) => {
      resolve(res);
    });
  });
};
// 自定义表格头
const fetchTableAttr = (tableAttr) => {
  tableHeader.value = tableAttr;
};
// 表格按钮
const rowButtonClick = ({ row, $column }) => {
  for (let i in row) {
    currentRow[i] = row[i];
  }
  currentButton.data = $column;
  buttonsClickFun.data[$column.enName]();
};
const {
  tableData,
  rowButtons,
  pageProps,
  tableHeader,
  pageChange,
  buttonsClickFun,
  $message,
  $messageBox,
  $common,
  selectItems,
  sortChange,
  currentButton,
} = templateHooks(fetchData);
//#endregion 函数定义 end
</script>
<script>
export default {
  name: "efficiencyStatement",
};
</script>
<style lang="scss" scoped>
.task-box {
  box-sizing: border-box;
  height: calc(100vh - 146px);
  flex: 1;
  padding: 10px;
  background-color: #fff;
  .search-area {
    padding: 10px 0 10px 10px;
    display: flex;
    align-items: center;
  }
}
</style>
