<!-- 
 * @Description: 客流查询
 * @Author: yxq 
 * @Date: 2024-7-17
-->
<template>
  <div class="table-box">
    <ProTable ref="proTable" title="查询管理" :columns="columns" :request-api="attendancePassenger.page">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <s-button v-auth="attendancePassengerBtnCode.add" type="primary" suffix="查询" @click="onOpen(FormOptEnum.ADD)" />
      </template>
      <!-- 表格操作栏 -->
      <template #operation="scope">
        <el-space>
          <s-button
            link
            :disabled="haseExtJson(scope.row)"
            :opt="FormOptEnum.VIEW"
            prefix="分片"
            suffix="详情"
            @click="onOpen(FormOptEnum.VIEW, scope.row)"
          />
        </el-space>
      </template>
    </ProTable>
    <Form ref="formRef" />
    <DetailTable ref="detailTableRef"></DetailTable>
  </div>
</template>
  <script setup lang="ts" name="AttendancePassenger">
import { attendancePassenger, attendancePassengerBtnCode, AttendancePassenger } from "@/api";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import Form from "./components/form/index.vue";
import DetailTable from "./components/detailTable/index.vue";
import { FormOptEnum } from "@/enums";
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();
// 表格配置项
const columns: ColumnProps<any>[] = [
  {
    prop: "queryTime",
    label: "查询时间"
  },
  {
    prop: "startTime",
    label: "开始时间"
  },
  {
    prop: "endTime",
    label: "结束时间"
  },
  {
    prop: "cameraNames",
    label: "摄像头"
  },
  {
    prop: "split",
    label: "分片类型",
    render: scope => {
      return scope.row.split ? "小时" : "天";
    }
  },
  {
    prop: "total",
    label: "总人数"
  },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];
// 表单引用
const formRef = ref<InstanceType<typeof Form> | null>(null);
const detailTableRef = ref<InstanceType<typeof DetailTable> | null>(null);
/**
 * 打开表单
 * @param opt  操作类型
 * @param record  记录
 */
function onOpen(opt: FormOptEnum, record: {} | AttendancePassenger.PassengerInfo = {}) {
  switch (opt) {
    case FormOptEnum.ADD:
      formRef.value?.onOpen({ opt: opt, record: record, successful: RefreshTable });
      break;
    case FormOptEnum.VIEW:
      detailTableRef.value?.onOpen({ opt: opt, record: record, successful: RefreshTable });
  }
}
// 刷新表格
const RefreshTable = () => {
  proTable.value?.refresh();
};
const haseExtJson = (row: any) => {
  let extJson = JSON.parse(row.extJson);
  return extJson.length == 0;
};
</script>
<style scoped lang="scss">
.table-box {
  width: 100%;
  height: 100%;
}
</style>
  