<template>
  <div class="flex h-full w-full flex-col gap-4">
    <!-- 顶部搜索 -->
    <div class="w-ful flex items-center justify-between">
      <div class="flex items-center gap-4">
        <el-button
          type="primary"
          size="small"
          :loading="exportLoading"
          @click="exportExcel"
          >导出</el-button
        >
        <div class="text-[#909399]">
          取号次数：<span class="take-total-num">{{ total }}次</span>
        </div>
        <div class="text-[14px] text-[#909399]">
          统计时间段：{{ searchForm.time[0] }} ~ {{ searchForm.time[1] }}
        </div>
      </div>
      <div class="flex items-center">
        <el-form ref="searchForm" inline size="small" :model="searchForm">
          <el-form-item>
            <el-select style="width: 130px" v-model="searchForm.type">
              <el-option
                v-for="(v, key) in searchType"
                :key="key"
                :label="v"
                :value="key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="searchForm.keyword"
              placeholder="请输入关键字"
              clearable
              @keyup.native.enter="handleSearch"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <y-date-picker
              v-model="searchForm.time"
              align="right"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </y-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-popover placement="bottom" trigger="click">
        <div class="w-full">
          <el-form ref="searchForm2" inline size="small" :model="searchForm2">
            <!-- <el-form-item>
              <el-checkbox-group v-model="searchForm2.type">
                <el-checkbox label="预约业务" name="type"></el-checkbox>
                <el-checkbox label="呼叫业务" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item> -->
            <el-form-item>
              <el-select
                style="width: 150px"
                v-model="searchForm2.wySignin"
                clearable
                placeholder="请选择取号方式"
              >
                <el-option label="现场取号" value="现场取号"></el-option>
                <el-option label="在线取号" value="微信取号"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                style="width: 180px"
                filterable
                clearable
                v-model="searchForm2.sectionName"
                placeholder="请选择部门"
              >
                <el-option
                  v-for="v in deptList"
                  :key="v.id"
                  :label="v.name"
                  :value="v.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                style="width: 180px"
                v-model="searchForm2.hallName"
                filterable
                clearable
                placeholder="请选择大厅"
              >
                <el-option
                  v-for="v in hallList"
                  :key="v.id"
                  :label="v.hallName"
                  :value="v.hallName"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-button type="text" slot="reference">
          高级搜索
          <i class="el-icon-d-arrow-right"></i>
        </el-button>
      </el-popover>
    </div>
    <div class="main max-w-[1396px] flex-1">
      <div>
        <y-table
          ref="MyTable"
          :loading="loading"
          :data="tableData"
          :column="column"
          border
          tooltip-effect="dark"
          :max-height="580"
          :row-key="(row) => row.id"
          @selection-change="handleSelectionChange"
        ></y-table>
      </div>
      <Pagination
        :total="total"
        :current.sync="current"
        :size.sync="size"
        @get="getQueueList"
      ></Pagination>
    </div>
    <!-- 详情 -->
    <QueueUpDetails :show.sync="show" :info="detailsInfo"></QueueUpDetails>
  </div>
</template>

<script>
import QueueUpDetails from "./components/QueueUpDetails.vue";
let searchType = {
  business: "按业务",
  windowFromnum: "按窗口编号",
  peopleName: "按群众姓名",
  peoplePhone: "按群众手机号",
};
import { getQueueList } from "@/api/market";
import { getDepartment, getHall } from "@/api/site";
import storage from "@/utils/storage";
import { formatSeconds, dataSection } from "@/utils";
import { export2Excel } from "@/utils/exportExcel";
export default {
  components: {
    QueueUpDetails,
  },
  data() {
    return {
      searchType,
      show: false,
      loading: false,
      exportLoading: false,
      total: 0,
      size: 10,
      current: 1,
      selectionRow: [],
      searchForm: {
        type: "business",
        keyword: "",
        time: [
          this.$moment().format("YYYY-MM-DD"),
          this.$moment().format("YYYY-MM-DD"),
        ],
        siteId: this.$route.params.siteId
          ? this.$route.params.siteId
          : storage.get(2, "siteId"),
      },
      searchForm2: {
        wySignin: "", // 取号方式（现场取号,微信取号）
        hallName: "", // 大厅名称
        sectionName: "", // 部门名称
      },
      tableData: [],
      column: [
        {
          type: "selection",
          width: "50",
          align: "center",
          reserveSelection: true,
          fixed: "left",
        },
        {
          type: "index",
          label: "序号",
          width: "50",
          align: "center",
          fixed: "left",
          index: (index) => {
            return index + 1 + (this.current - 1) * this.size;
          },
        },
        {
          label: "站点名称",
          align: "center",
          width: "150",
          prop: "siteName",
        },
        {
          label: "业务名称",
          align: "center",
          width: "150",
          prop: "business",
        },
        {
          label: "预约编号",
          align: "center",
          width: "150",
          prop: "ordernumber",
        },
        {
          label: "叫号状态",
          align: "center",
          width: "150",
          prop: "style",
        },
        {
          label: "窗口名",
          align: "center",
          width: "150",
          prop: "windowName",
        },
        {
          label: "窗口编号",
          align: "center",
          width: "150",
          prop: "windowFromnum",
        },
        {
          label: "流水号",
          align: "center",
          width: "150",
          prop: "flownum",
        },
        {
          label: "呼叫转移",
          align: "center",
          width: "150",
          prop: "formernum",
        },
        {
          label: "身份证号",
          align: "center",
          width: "150",
          prop: "peopleIdcard",
        },

        {
          label: "姓名",
          align: "center",
          width: "150",
          prop: "peopleName",
        },
        {
          label: "手机号",
          align: "center",
          width: "150",
          prop: "peoplePhone",
        },
        {
          label: "工作人员",
          align: "center",
          width: "150",
          prop: "workmanName",
        },
        {
          label: "工号",
          align: "center",
          width: "150",
          prop: "workmanNumber",
        },
        {
          label: "取号方式",
          align: "center",
          width: "150",
          prop: "wySignin",
        },
        {
          label: "部门名称",
          align: "center",
          width: "150",
          prop: "sectionName",
        },
        {
          label: "大厅名称",
          align: "center",
          width: "150",
          prop: "hallName",
        },
        {
          label: "取号时间",
          align: "center",
          width: "150",
          prop: "taketime",
        },
        {
          label: "叫号时间",
          align: "center",
          width: "150",
          prop: "calltime",
        },
        {
          label: "结束时间",
          align: "center",
          width: "150",
          prop: "endtime",
        },
        {
          label: "等待时间",
          align: "center",
          width: "150",
          prop: "waitTime",
        },
        {
          label: "办理时间",
          align: "center",
          width: "150",
          prop: "handleTime",
        },
        {
          label: "扩展编号",
          align: "center",
          width: "150",
          prop: "extNum",
        },
        {
          label: "操作",
          align: "center",
          fixed: "right",
          width: "100",
          formatter: (row) => {
            return (
              <span
                class="primary cursor-pointer"
                onClick={() => {
                  this.checkDetails(row);
                }}
              >
                查看详情
              </span>
            );
          },
        },
      ],
      detailsInfo: {},
      deptList: [], // 部门列表
      hallList: [], // 大厅列表
    };
  },
  created() {
    this.getQueueList();
    this.getDepartment();
    this.getHall();
  },
  methods: {
    // 获取站点
    getSite(data) {
      this.current = 1;
      this.size = 10;
      if (data.type == "site") {
        this.searchForm.siteId = data.id;
        this.getQueueList();
        this.getDepartment();
        this.getHall();
      } else {
        this.tableData = [];
        this.total = 0;
      }
    },
    // 获取数据函数
    async getData(form = {}) {
      let obj = {
        page: this.current,
        size: this.size,
        taketimeStart: this.searchForm.time[0],
        taketimeEnd: this.searchForm.time[1],
        siteId: this.searchForm.siteId,
      };
      let val = `%${this.searchForm.keyword}%`;
      obj[this.searchForm.type] = val;
      let res = await getQueueList({ ...obj, ...this.searchForm2, ...form });
      if (res.data.code == 1) {
        return res.data.data;
      } else {
        return {
          data: [],
          total: 0,
        };
      }
    },
    // 获取表格数据列表
    async getQueueList(form = {}) {
      this.loading = true;
      let { data, total } = await this.getData(form);
      data.forEach((v) => {
        v.taketime =
          v.taketime && this.$moment(v.taketime).format("YYYY-MM-DD HH:mm:ss");
        v.endtime =
          v.endtime && this.$moment(v.endtime).format("YYYY-MM-DD HH:mm:ss");
        v.calltime =
          v.calltime && this.$moment(v.calltime).format("YYYY-MM-DD HH:mm:ss");
        v.waitTime = v.waitTime ? formatSeconds(v.waitTime) : "";
        v.handleTime = v.handleTime ? formatSeconds(v.handleTime) : "";
      });
      this.tableData = data;
      this.total = total;
      this.loading = false;
    },

    // 获取站点部门
    async getDepartment() {
      let res = await getDepartment({
        page: 1,
        size: -1,
        siteId: this.searchForm.siteId,
      });
      if (res.data.code == 1) {
        let { data } = res.data.data;
        this.deptList = data;
      }
    },

    // 获取大厅
    async getHall() {
      let res = await getHall({
        page: 1,
        size: -1,
        siteId: this.searchForm.siteId,
      });
      if (res.data.code == 1) {
        let { data } = res.data.data;
        this.hallList = data;
      }
    },
    // 搜索
    handleSearch() {
      this.current = 1;
      this.$clearSelection("MyTable");
      this.getQueueList();
    },
    checkDetails(row) {
      let data = this.$cloneDeep(row);
      this.detailsInfo = data;
      this.show = true;
    },
    handleSelectionChange(val) {
      this.selectionRow = val;
    },
    // 导出表格
    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.selectionRow.length) {
        let data = this.$cloneDeep(this.selectionRow);
        export2Excel(
          tHeader,
          filterVal,
          data,
          "排队数据报表" + this.$moment().format("YYYYMMDDHHmmss")
        );
      } else {
        dataSection(this.getData, {}, (data) => {
          if (!data.length) {
            this.$message.warning("暂无数据");
            return;
          }
          data.forEach((v) => {
            v.taketime =
              v.taketime &&
              this.$moment(v.taketime).format("YYYY-MM-DD HH:mm:ss");
            v.endtime =
              v.endtime &&
              this.$moment(v.endtime).format("YYYY-MM-DD HH:mm:ss");
            v.calltime =
              v.calltime &&
              this.$moment(v.calltime).format("YYYY-MM-DD HH:mm:ss");
            v.waitTime = v.waitTime ? formatSeconds(v.waitTime) : "";
            v.handleTime = v.handleTime ? formatSeconds(v.handleTime) : "";
          });
          export2Excel(
            tHeader,
            filterVal,
            data,
            "排队数据报表" + this.$moment().format("YYYYMMDDHHmmss")
          );
        });
      }
      this.exportLoading = false;
    },
  },
};
</script>

<style lang="less" scoped>
.take-total-num {
  color: var(--primary);
  font-weight: 600;
}
:deep(.el-form--inline) {
  display: flex;
  align-items: center;
  .el-form-item {
    margin-bottom: 0px;
  }
}
.el-icon-d-arrow-right {
  transform: rotate(90deg);
}
</style>
