<template>
  <div class="grid h-full w-full grid-cols-2 gap-[20px]">
    <div class="table-item">
      <div>
        <DoubleTable
          :dict="dict"
          title="大厅评价量统计"
          border
          :column="hallColumn"
          :data="hallTableData"
          :size="hallSearch.size"
          :current="hallSearch.page"
          :loading="hallLoading"
          type="hall"
          @export="exportHallEva"
          hasPermiExport="engine:queueupsystem:export"
        ></DoubleTable>
      </div>
      <Pagination
        :total="hallSearch.total"
        :page.sync="hallSearch.page"
        :pageSize.sync="hallSearch.size"
        layout="total,prev,pager,next,jumper"
        @change="getHallEva"
      ></Pagination>
    </div>
    <div class="table-item">
      <div>
        <DoubleTable
          :dict="dict"
          title="评价选项统计"
          border
          :column="pjOptionColumn"
          :data="pjOptionTableData"
          :size="pjOptionSearch.size"
          :current="pjOptionSearch.page"
          :loading="pjOptionLoading"
          type="pjOption"
          @export="exportPjOptionEva"
          @search="handleSearch"
          hasPermiQuery="engine:queueupsystem:query"
          hasPermiExport="engine:queueupsystem:export"
        ></DoubleTable>
      </div>
      <Pagination
        :total="pjOptionSearch.total"
        :page.sync="pjOptionSearch.page"
        :pageSize.sync="pjOptionSearch.size"
        layout="total,prev,pager,next,jumper"
        @change="getPjOptionEva"
      ></Pagination>
    </div>
    <div class="table-item">
      <div>
        <DoubleTable
          :dict="dict"
          title="部门评价量统计"
          border
          :column="deptColumn"
          :data="deptTableData"
          :size="deptSearch.size"
          :current="deptSearch.page"
          :loading="deptLoading"
          type="dept"
          @export="exportDeptEva"
          @search="handleSearch"
          hasPermiQuery="engine:queueupsystem:query"
          hasPermiExport="engine:queueupsystem:export"
        ></DoubleTable>
      </div>
      <Pagination
        :total="deptSearch.total"
        :page.sync="deptSearch.page"
        :pageSize.sync="deptSearch.size"
        layout="total,prev,pager,next,jumper"
        @change="getDeptEva"
      ></Pagination>
    </div>
    <div class="table-item">
      <div>
        <DoubleTable
          :dict="dict"
          title="窗口评价量统计"
          border
          :column="windowColumn"
          :data="windowTableData"
          :size="windowSearch.size"
          :current="windowSearch.page"
          :loading="windowLoading"
          type="window"
          @export="exportWindowEva"
          @search="handleSearch"
          hasPermiQuery="engine:queueupsystem:query"
          hasPermiExport="engine:queueupsystem:export"
        ></DoubleTable>
      </div>
      <Pagination
        :total="windowSearch.total"
        :page.sync="windowSearch.page"
        :pageSize.sync="windowSearch.size"
        layout="total,prev,pager,next,jumper"
        @change="getWindowEva"
      ></Pagination>
    </div>
  </div>
</template>

<script>
import DoubleTable from "./components/DoubleTable.vue";
import { getEvaSystemList } from "@/api/engine";
import { export2Excel } from "@/utils/exportExcel";
import { dataSection } from "@/utils";
import storage from "@/utils/storage";
export default {
  components: {
    DoubleTable,
  },
  data() {
    return {
      dict: {},
      dateForm: {
        timeStart: this.$moment().format("YYYY-MM-DD"),
        timeEnd: this.$moment().format("YYYY-MM-DD"),
      },
      siteId: storage.get(2, "siteId"),
      hallLoading: false,
      pjOptionLoading: false,
      deptLoading: false,
      windowLoading: false,
      hallSearch: {
        total: 0,
        page: 1,
        size: 10,
        hallNameNotList: [""],
      },
      pjOptionSearch: {
        total: 0,
        page: 1,
        size: 10,
        pjOptionNotList: [""],
        pjOptionList: [],
        groupList: ["pjOption"],
      },
      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: "pjCount",
          align: "center",
          formatter: (row, column, cellValue) => {
            if (cellValue) {
              return <span class="table-num">{cellValue}</span>;
            }
          },
        },
      ],
      pjOptionColumn: [
        {
          label: "评价选项",
          prop: "pjOption",
          align: "center",
          showOverflowTooltip: true,
          formatter: (row, column, cellValue) => {
            if (cellValue) {
              return <span>{cellValue}</span>;
            }
          },
        },
        {
          label: "评价数量",
          prop: "pjCount",
          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: "pjCount",
          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: "pjCount",
          align: "center",
          formatter: (row, column, cellValue) => {
            if (cellValue) {
              return <span class="table-num">{cellValue}</span>;
            }
          },
        },
      ],

      hallTableData: [],
      pjOptionTableData: [],
      deptTableData: [],
      windowTableData: [],
    };
  },
  created() {},
  methods: {
    // 获取日期
    getDate(dateArr) {
      this.dateForm.timeStart = dateArr[0];
      this.dateForm.timeEnd = dateArr[1];
      this.hallSearch.page = 1;
      this.pjOptionSearch.page = 1;
      this.deptSearch.page = 1;
      this.windowSearch.page = 1;
      this.getHallEva();
      this.getPjOptionEva();
      this.getDeptEva();
      this.getWindowEva();
    },
    async hallEvaFn(form) {
      const res = await getEvaSystemList({
        siteId: this.siteId,
        ...this.hallSearch,
        ...this.dateForm,
        ...form,
      });

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

    async pjOptionEva(form = {}) {
      const res = await getEvaSystemList({
        siteId: this.siteId,
        ...this.pjOptionSearch,
        ...this.dateForm,
        ...form,
      });

      if (res.data.code == 1) {
        let { data, total, dict } = res.data.data;
        return {
          data,
          total,
          dict,
        };
      } else {
        return {
          data: [],
          total: 0,
          dict: {},
        };
      }
    },
    // 获取评价选项数据
    async getPjOptionEva() {
      this.pjOptionLoading = true;
      let { data, total } = await this.pjOptionEva();
      this.pjOptionTableData = data;
      this.pjOptionSearch.total = total;
      this.pjOptionLoading = false;
    },

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

    // 获取部门评价数据
    async getDeptEva() {
      this.deptLoading = true;
      let { data, total } = await this.deptEva();
      this.deptTableData = data;
      this.deptSearch.total = total;
      this.deptLoading = false;
    },

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

    // 导出大厅评价量
    exportHallEva() {
      let tHeader = this.hallColumn.map((v) => v.label);
      let filterVal = this.hallColumn.map((v) => v.prop);
      dataSection(this.hallEvaFn, {}, (data) => {
        if (!data.length) {
          this.$message.warning("暂无数据");
          return;
        }
        export2Excel(
          tHeader,
          filterVal,
          data,
          "大厅评价量统计报表" + this.$moment().format("YYYYMMDDHHmmss")
        );
      });
    },
    // 导出评价选项
    exportPjOptionEva(type, form) {
      let tHeader = this.pjOptionColumn.map((v) => v.label);
      let filterVal = this.pjOptionColumn.map((v) => v.prop);
      let { pjOption } = form;
      let searchForm = {};
      if (pjOption) {
        searchForm.pjOptionList = [pjOption];
      }
      dataSection(this.pjOptionEva, searchForm, (data) => {
        if (!data.length) {
          this.$message.warning("暂无数据");
          return;
        }
        export2Excel(
          tHeader,
          filterVal,
          data,
          "评价选项统计报表" + this.$moment().format("YYYYMMDDHHmmss")
        );
      });
    },
    // 导出部门评价
    exportDeptEva(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.deptEva, searchForm, (data) => {
        if (!data.length) {
          this.$message.warning("暂无数据");
          return;
        }
        export2Excel(
          tHeader,
          filterVal,
          data,
          "部门评价量统计报表" + this.$moment().format("YYYYMMDDHHmmss")
        );
      });
    },
    // 导出窗口评价
    exportWindowEva(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.windowEva, searchForm, (data) => {
        if (!data.length) {
          this.$message.warning("暂无数据");
          return;
        }
        export2Excel(
          tHeader,
          filterVal,
          data,
          "窗口评价量统计报表" + this.$moment().format("YYYYMMDDHHmmss")
        );
      });
    },

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

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

      if (type === "pjOption") {
        setupSearch(
          this.pjOptionSearch,
          "pjOptionList",
          pjOption,
          this.getPjOptionEva
        );
      } else if (type === "dept") {
        setupSearch(
          this.deptSearch,
          "sectionNameList",
          deptName,
          this.getDeptEva
        );
      } else if (type === "window") {
        setupSearch(
          this.windowSearch,
          "windowFromnumList",
          windowNum,
          this.getWindowEva
        );
      }
    },
  },
};
</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>
