<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">导出</el-button>
        <div class="text-[#909399]">
          取号次数：<span class="take-total-num">223次</span>
        </div>
        <div class="text-[14px] text-[#909399]">
          统计时间段：2024-12-12 ~ 2024-12-12
        </div>
      </div>
      <div class="flex items-center">
        <el-form ref="form" inline size="small" :model="form">
          <el-form-item>
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="form.value"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-popover
        placement="bottom"
        trigger="click"
        popper-class="search-popover"
      >
        <div class="w-full">
          <el-form ref="form2" inline size="small" :model="form2">
            <el-form-item>
              <el-checkbox-group v-model="form2.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 v-model="form2.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="form2.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="form2.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">搜索</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">
      <y-table
        ref="MyTable"
        :loading="loading"
        :data="tableData"
        :column="column"
        border
        tooltip-effect="dark"
        :max-height="600"
        :row-key="(row) => row.id"
        @selection-change="handleSelectionChange"
      ></y-table>
    </div>
    <!-- 详情 -->
    <QueueUpDetails :show.sync="show"></QueueUpDetails>
  </div>
</template>

<script>
import QueueUpDetails from "./components/QueueUpDetails.vue";
export default {
  components: {
    QueueUpDetails,
  },
  data() {
    return {
      show: false,
      loading: false,
      selectionRow: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      form: {},
      form2: {
        type: [],
      },
      tableData: [
        {
          name: "高县",
        },
      ],
      column: [
        {
          type: "selection",
          width: "50",
          align: "center",
          fixed: "left",
        },
        {
          type: "index",
          label: "序号",
          width: "50",
          align: "center",
          fixed: "left",
        },
        {
          label: "站点名称",
          align: "center",
          width: "150",
          prop: "name",
        },
        {
          label: "业务名称",
          align: "center",
          width: "150",
        },
        {
          label: "预约编码",
          align: "center",
          width: "150",
        },
        {
          label: "叫号状态",
          align: "center",
          width: "150",
        },
        {
          label: "窗口名",
          align: "center",
          width: "150",
        },
        {
          label: "窗口编号",
          align: "center",
          width: "150",
        },
        {
          label: "流水号",
          align: "center",
          width: "150",
        },
        {
          label: "呼叫转移",
          align: "center",
          width: "150",
        },
        {
          label: "身份证号",
          align: "center",
          width: "150",
        },
        {
          label: "姓名",
          align: "center",
          width: "150",
        },
        {
          label: "手机号",
          align: "center",
          width: "150",
        },
        {
          label: "工作人员",
          align: "center",
          width: "150",
        },
        {
          label: "工号",
          align: "center",
          width: "150",
        },
        {
          label: "取号方式",
          align: "center",
          width: "150",
        },
        {
          label: "部门名称",
          align: "center",
          width: "150",
        },
        {
          label: "大厅名称",
          align: "center",
          width: "150",
        },
        {
          label: "取号时间",
          align: "center",
          width: "150",
        },
        {
          label: "叫号时间",
          align: "center",
          width: "150",
        },
        {
          label: "结束时间",
          align: "center",
          width: "150",
        },
        {
          label: "等待时间",
          align: "center",
          width: "150",
        },
        {
          label: "办理时间",
          align: "center",
          width: "150",
        },
        {
          label: "扩展编号",
          align: "center",
          width: "150",
        },
        {
          label: "操作",
          align: "center",
          fixed: "right",
          width: "100",
          formatter: (row) => {
            return (
              <span
                class="primary cursor-pointer"
                onClick={() => {
                  this.checkDetails(row);
                }}
              >
                查看详情
              </span>
            );
          },
        },
      ],
    };
  },
  methods: {
    checkDetails(row) {
      console.log(row);
      this.show = true;
    },
    handleSelectionChange(val) {
      this.selectionRow = val;
    },
  },
};
</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>
