<template>
  <div class="grid h-full w-full grid-cols-2 gap-[20px]">
    <div class="table-item">
      <div>
        <DoubleTable
          title="大厅取号量统计"
          border
          :column="hallColumn"
          :data="hallTableData"
          :size="hallSearch.size"
          :current="hallSearch.page"
          :loading="hallLoading"
          type="hall"
          @export="exportHallQueue"
        ></DoubleTable>
      </div>
      <Pagination
        :total="hallSearch.total"
        :current.sync="hallSearch.page"
        :size.sync="hallSearch.size"
        layout="total,prev,pager,next,jumper"
        @get="getHallQueue"
      ></Pagination>
    </div>
    <div class="table-item">
      <div>
        <DoubleTable
          title="业务取号量统计"
          border
          :column="businessColumn"
          :data="businessTableData"
          :size="businessSearch.size"
          :current="businessSearch.page"
          :loading="businessLoading"
          type="business"
          @export="exportbusinessQueue"
          @search="handleSearch"
        ></DoubleTable>
      </div>
      <Pagination
        :total="businessSearch.total"
        :current.sync="businessSearch.page"
        :size.sync="businessSearch.size"
        layout="total,prev,pager,next,jumper"
        @get="getBusinessQueue"
      ></Pagination>
    </div>
    <div class="table-item">
      <div>
        <DoubleTable
          title="部门取号量统计"
          border
          :column="deptColumn"
          :data="deptTableData"
          :size="deptSearch.size"
          :current="deptSearch.page"
          :loading="deptLoading"
          type="dept"
          @export="exportDeptQueue"
          @search="handleSearch"
        ></DoubleTable>
      </div>
      <Pagination
        :total="deptSearch.total"
        :current.sync="deptSearch.page"
        :size.sync="deptSearch.size"
        layout="total,prev,pager,next,jumper"
        @get="getDeptQueue"
      ></Pagination>
    </div>
    <div class="table-item">
      <div>
        <DoubleTable
          title="窗口取号量统计"
          border
          :column="windowColumn"
          :data="windowTableData"
          :size="windowSearch.size"
          :current="windowSearch.page"
          :loading="windowLoading"
          type="window"
          @export="exportWindowQueue"
          @search="handleSearch"
        ></DoubleTable>
      </div>
      <Pagination
        :total="windowSearch.total"
        :current.sync="windowSearch.page"
        :size.sync="windowSearch.size"
        layout="total,prev,pager,next,jumper"
        @get="getWindowQueue"
      ></Pagination>
    </div>
  </div>
</template>

<script>
import DoubleTable from "./components/DoubleTable.vue";
import { getQueueSystemList } from "@/api/engine";
import { export2Excel } from "@/utils/exportExcel";
import { dataSection } from "@/utils";
import storage from "@/utils/storage";
export default {
  components: {
    DoubleTable,
  },
  data() {
    return {
      dateForm: {
        timeStart: this.$moment().format("YYYY-MM-DD"),
        timeEnd: this.$moment().format("YYYY-MM-DD"),
      },
      siteId: storage.get(2, "siteId"),
      hallLoading: false,
      businessLoading: false,
      deptLoading: false,
      windowLoading: false,
      hallSearch: {
        total: 0,
        page: 1,
        size: 10,
        hallNameNotList: [""],
      },
      businessSearch: {
        total: 0,
        page: 1,
        size: 10,
        businessNotList: [""],
        businessList: [],
        groupList: ["business"],
      },
      deptSearch: {
        total: 0,
        page: 1,
        size: 10,
        sectionNameNotList: [""],
        sectionNameList: [],
      },
      windowSearch: {
        total: 0,
        page: 1,
        size: 10,
        windowFromnumNotList: [""],
        windowFromnumList: [],
      },
      hallColumn: [
        {
          label: "大厅名称",
          prop: "hallName",
          align: "center",
          showOverflowTooltip: true,
        },
        {
          label: "排队数量",
          prop: "phCount",
          align: "center",
          formatter: (row, column, cellValue) => {
            if (cellValue) {
              return <span class="table-num">{cellValue}</span>;
            }
          },
        },
      ],
      businessColumn: [
        {
          label: "业务名称",
          prop: "business",
          align: "center",
          showOverflowTooltip: true,
          formatter: (row, column, cellValue) => {
            if (cellValue) {
              return <span>{cellValue}</span>;
            }
          },
        },
        {
          label: "排队数量",
          prop: "phCount",
          align: "center",
          formatter: (row, column, cellValue) => {
            if (cellValue) {
              return <span class="table-num">{cellValue}</span>;
            }
          },
        },
      ],
      deptColumn: [
        {
          label: "部门名称",
          prop: "sectionName",
          showOverflowTooltip: true,
          align: "center",
        },
        {
          label: "排队数量",
          prop: "phCount",
          align: "center",
          formatter: (row, column, cellValue) => {
            if (cellValue) {
              return <span class="table-num">{cellValue}</span>;
            }
          },
        },
      ],
      windowColumn: [
        {
          label: "窗口编号",
          prop: "windowFromnum",
          showOverflowTooltip: true,
          align: "center",
        },
        {
          label: "排队数量",
          prop: "phCount",
          align: "center",
          formatter: (row, column, cellValue) => {
            if (cellValue) {
              return <span class="table-num">{cellValue}</span>;
            }
          },
        },
      ],

      hallTableData: [],
      businessTableData: [],
      deptTableData: [],
      windowTableData: [],
    };
  },
  created() {
    // this.getHallQueue();
    // this.getBusinessQueue();
    // this.getDeptQueue();
    // this.getWindowQueue();
  },
  methods: {
    // 获取日期
    getDate(dateArr) {
      this.dateForm.timeStart = dateArr[0];
      this.dateForm.timeEnd = dateArr[1];
      this.hallSearch.page = 1;
      this.businessSearch.page = 1;
      this.deptSearch.page = 1;
      this.windowSearch.page = 1;
      this.getHallQueue();
      this.getBusinessQueue();
      this.getDeptQueue();
      this.getWindowQueue();
    },
    async hallQueueFn(form) {
      const res = await getQueueSystemList({
        siteId: this.siteId,
        ...this.hallSearch,
        ...this.dateForm,
        ...form,
      });

      if (res.data.code == 1) {
        let { data, total } = res.data.data;
        return {
          data: data,
          total: total,
        };
      } else {
        return {
          data: [],
          total: 0,
        };
      }
    },
    // 获取大厅取号数据
    async getHallQueue() {
      this.hallLoading = true;
      let { data, total } = await this.hallQueueFn();
      this.hallTableData = data;
      this.hallSearch.total = total;
      this.hallLoading = false;
    },

    async businessQueue(form = {}) {
      const res = await getQueueSystemList({
        siteId: this.siteId,
        ...this.businessSearch,
        ...this.dateForm,
        ...form,
      });

      if (res.data.code == 1) {
        let { data, total } = res.data.data;
        return {
          data,
          total,
        };
      } else {
        return {
          data: [],
          total: 0,
        };
      }
    },
    // 获取业务取号数据
    async getBusinessQueue() {
      this.businessLoading = true;
      let { data, total } = await this.businessQueue();
      this.businessTableData = data;
      this.businessSearch.total = total;
      this.businessLoading = false;
    },

    async deptQueue(form = {}) {
      const res = await getQueueSystemList({
        siteId: this.siteId,
        ...this.deptSearch,
        ...this.dateForm,
        ...form,
      });
      if (res.data.code == 1) {
        let { data, total } = res.data.data;
        return {
          data,
          total,
        };
      } else {
        return {
          data: [],
          total: 0,
        };
      }
    },

    // 获取部门取号数据
    async getDeptQueue() {
      this.deptLoading = true;
      let { data, total } = await this.deptQueue();
      this.deptTableData = data;
      this.deptSearch.total = total;
      this.deptLoading = false;
    },

    async windowQueue(form) {
      const res = await getQueueSystemList({
        siteId: this.siteId,
        ...this.windowSearch,
        ...this.dateForm,
        ...form,
      });
      if (res.data.code == 1) {
        let { data, total } = res.data.data;
        return {
          data,
          total,
        };
      } else {
        return {
          data: [],
          total: 0,
        };
      }
    },
    // 获取窗口取号数据
    async getWindowQueue() {
      this.windowLoading = true;
      let { data, total } = await this.windowQueue();
      this.windowTableData = data;
      this.windowSearch.total = total;
      this.windowLoading = false;
    },

    // 导出大厅取号量
    exportHallQueue() {
      let tHeader = this.hallColumn.map((v) => v.label);
      let filterVal = this.hallColumn.map((v) => v.prop);
      dataSection(this.hallQueueFn, {}, (data) => {
        if (!data.length) {
          this.$message.warning("暂无数据");
          return;
        }
        export2Excel(
          tHeader,
          filterVal,
          data,
          "大厅取号量统计报表" + this.$moment().format("YYYYMMDDHHmmss")
        );
      });
    },
    // 导出业务取号
    exportbusinessQueue(type, form) {
      let tHeader = this.businessColumn.map((v) => v.label);
      let filterVal = this.businessColumn.map((v) => v.prop);
      let { businessName } = form;
      let searchForm = {};
      if (businessName) {
        searchForm.businessList = [businessName];
      }
      dataSection(this.businessQueue, searchForm, (data) => {
        if (!data.length) {
          this.$message.warning("暂无数据");
          return;
        }
        export2Excel(
          tHeader,
          filterVal,
          data,
          "业务取号量统计报表" + this.$moment().format("YYYYMMDDHHmmss")
        );
      });
    },
    // 导出部门取号
    exportDeptQueue(type, form) {
      let tHeader = this.deptColumn.map((v) => v.label);
      let filterVal = this.deptColumn.map((v) => v.prop);
      let { deptName } = form;
      let searchForm = {};
      if (deptName) {
        searchForm.sectionNameList = [deptName];
      }
      dataSection(this.deptQueue, searchForm, (data) => {
        if (!data.length) {
          this.$message.warning("暂无数据");
          return;
        }
        export2Excel(
          tHeader,
          filterVal,
          data,
          "部门取号量统计报表" + this.$moment().format("YYYYMMDDHHmmss")
        );
      });
    },
    // 导出窗口取号
    exportWindowQueue(type, form) {
      let tHeader = this.windowColumn.map((v) => v.label);
      let filterVal = this.windowColumn.map((v) => v.prop);
      let { windowNum } = form;
      let searchForm = {};
      if (windowNum) {
        searchForm.windowFromnumList = [windowNum];
      }
      dataSection(this.windowQueue, searchForm, (data) => {
        if (!data.length) {
          this.$message.warning("暂无数据");
          return;
        }
        export2Excel(
          tHeader,
          filterVal,
          data,
          "窗口取号量统计报表" + this.$moment().format("YYYYMMDDHHmmss")
        );
      });
    },

    // 业务搜索
    handleSearch(type, form) {
      let { businessName, deptName, windowNum } = form;

      const setupSearch = (searchObj, listKey, value) => {
        searchObj.page = 1;
        searchObj[listKey] = value ? [value] : [];
      };

      if (type === "business") {
        setupSearch(this.businessSearch, "businessList", businessName);
        this.getBusinessQueue();
      } else if (type === "dept") {
        setupSearch(this.deptSearch, "sectionNameList", deptName);
        this.getDeptQueue();
      } else if (type === "window") {
        setupSearch(this.windowSearch, "windowFromnumList", windowNum);
        this.getWindowQueue();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.table-item {
  width: 100%;
  padding: 15px;
  background: #f5fafd;
  border-radius: 4px;
}
.table-num {
  font-weight: 600;
  color: var(--primary);
}
</style>
