<template>
  <div class="flex h-full w-full flex-col">
    <Search @search="handleSearch"></Search>
    <div
      class="main flex w-full flex-1 items-center justify-center rounded-[4px] bg-white p-[20px]"
    >
      <div class="h-full w-full">
        <TableHeader>
          <el-button
            size="small"
            slot="left"
            type="primary"
            :loading="exportLoading"
            @click="exportExcel"
            >导出</el-button
          >
        </TableHeader>
        <div>
          <y-table
            ref="MyTable"
            :loading="loading"
            :data="tableData"
            :column="column"
            border
            tooltip-effect="dark"
            :max-height="480"
            :row-key="(row) => row.id"
            @selection-change="handleSelectionChange"
          ></y-table>
        </div>
        <Pagination
          :total="total"
          :current.sync="current"
          :size.sync="size"
          @get="getQueueStatList"
        ></Pagination>
      </div>
      <!-- <el-empty
        v-else
        description="请检索数据"
        :image="require('@/assets/img/empty.png')"
      ></el-empty> -->
    </div>
  </div>
</template>

<script>
import Search from "./components/Search.vue";
import TableHeader from "@/components/TableHeader.vue";
import { getQueueStatList } from "@/api/engine";
import { formatSeconds, dataSection } from "@/utils";
import { export2Excel } from "@/utils/exportExcel";
import storage from "@/utils/storage";
export default {
  components: {
    Search,
    TableHeader,
  },
  data() {
    return {
      loading: false,
      exportLoading: false,
      siteId: storage.get(2, "siteId"),
      page: 1,
      size: 10,
      total: 0,
      current: 1,
      tableData: [],
      column: [
        {
          label: "全选",
          type: "selection",
          width: "55",
          align: "center",
          reserveSelection: true,
        },
        {
          label: "序号",
          type: "index",
          width: "55",
          align: "center",
          index: (index) => {
            return (this.current - 1) * this.size + index + 1;
          },
        },

        {
          label: "站点名称",
          prop: "siteName",
          align: "center",
        },
        {
          label: "业务名称",
          prop: "business",
          align: "center",
        },
        {
          label: "部门名称",
          prop: "sectionName",
          align: "center",
        },
        {
          label: "窗口编号",
          prop: "windowFromnum",
          align: "center",
        },
        {
          label: "年份",
          prop: "year",
          align: "center",
        },

        {
          label: "月份",
          prop: "month",
          align: "center",
        },
        {
          label: "日期",
          prop: "day",
          align: "center",
        },
        {
          label: "办理量",
          prop: "phCount",
          align: "center",
        },
        {
          label: "平均等待时长",
          prop: "waitTime",
          align: "center",
        },
      ],
      selectionRows: [],
      searchForm: {
        groupList: [],
        // sectionNameNotList: [""],
        // businessNotList: [""],
        // windowFromnumNotList: [""],
        businessList: [],
        sectionNameList: [],
        windowFromnumList: [],
        year: "",
        month: "",
        day: "",
      },
    };
  },
  created() {
    this.getQueueStatList();
  },
  methods: {
    getData() {},
    async queueStatList(form = {}) {
      let res = await getQueueStatList({
        page: this.current,
        size: this.size,
        siteId: this.siteId,
        ...this.searchForm,
        ...form,
      });
      if (res.data.code == 1) {
        let { data, total } = res.data.data;
        return {
          data,
          total,
        };
      } else {
        return {
          data: [],
          total: 0,
        };
      }
    },
    async getQueueStatList() {
      this.loading = true;
      let { data, total } = await this.queueStatList();
      data.forEach((v) => {
        v.waitTime = v.waitTime ? formatSeconds(v.waitTime) : "";
      });
      this.total = total;
      this.tableData = data;
      this.loading = false;
    },

    handleSelectionChange(rows) {
      this.selectionRows = rows;
    },
    handleSearch(form) {
      let { type, businessName, deptName, windowNum, year, month, day } = form;
      this.searchForm.year = "";
      this.searchForm.month = "";
      this.searchForm.day = "";
      if (type == "year") {
        this.searchForm.groupList = ["year"];
        this.searchForm.year = year;
      } else if (type == "month") {
        this.searchForm.groupList = ["year", "month"];
        if (month) {
          [this.searchForm.year, this.searchForm.month] = month.split("-");
        }
      } else {
        this.searchForm.groupList = ["year", "month", "day"];
        if (day) {
          [this.searchForm.year, this.searchForm.month, this.searchForm.day] =
            day.split("-");
        }
      }
      this.searchForm.businessList = businessName ? [businessName] : [];
      this.searchForm.sectionNameList = deptName ? [deptName] : [];
      this.searchForm.windowFromnumList = windowNum ? [windowNum] : [];

      this.current = 1;
      this.getQueueStatList();
    },
    // 导出表格
    exportExcel() {
      this.exportLoading = true;
      let table = this.column.filter((v) => v.prop);
      let tHeader = table.map((v) => v.label);
      let filterVal = table.map((v) => v.prop);
      if (this.selectionRows.length) {
        let data = this.$cloneDeep(this.selectionRows);
        export2Excel(
          tHeader,
          filterVal,
          data,
          "排队数据汇总报表" + this.$moment().format("YYYYMMDDHHmmss")
        );
      } else {
        dataSection(this.queueStatList, {}, (data) => {
          if (!data.length) {
            this.$message.warning("暂无数据");
            return;
          }
          data.forEach((v) => {
            v.waitTime = v.waitTime ? formatSeconds(v.waitTime) : "";
          });
          export2Excel(
            tHeader,
            filterVal,
            data,
            "排队数据汇总报表" + this.$moment().format("YYYYMMDDHHmmss")
          );
        });
      }
      this.exportLoading = false;
    },
  },
};
</script>

<style lang="less" scoped></style>
