<!-- 
 * @Description: 行为轨迹
 * @Author: yxq 
 * @Date: 2023-12-15 15:45:59
-->
<template>
  <div>
    <form-container v-model="visible" :title="`分片详情`" form-size="800px" @close="onClose">
      <ProTable
        :toolButton="false"
        :pagination="false"
        ref="proTable"
        title="分片详情"
        height="500px"
        :data="tableData"
        :columns="columns"
      ></ProTable>
      <template #footer>
        <el-button @click="onClose"> 关闭 </el-button>
      </template>
    </form-container>
  </div>
</template>
  
<script setup lang="tsx" name="attendanceBehaviorTrace">
import { AttendanceBehaviorTrace } from "@/api";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { FormOptEnum } from "@/enums";
import { formatDate } from "@/utils";

const visible = ref(false); //是否显示
// 弹框参数
const propsInfo = reactive<FormProps.Base<AttendanceBehaviorTrace.behaviorTraceInfo>>({
  opt: FormOptEnum.VIEW, //操作类型
  record: {}, //弹框数据
  disabled: false
});
const tableData = ref([]);
/**
 * 打开弹框
 * @param props 弹框参数
 */
function onOpen(props: FormProps.Base<AttendanceBehaviorTrace.PassengerInfo>) {
  Object.assign(propsInfo, props); //合并参数
  let extJson = propsInfo.record.extJson
  tableData.value = JSON.parse(extJson)
  visible.value = true; //显示弹框
}
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();
// 表格配置项
const columns: ColumnProps[] = [
  {
    prop: "time",
    label: "时间",
    render:(scope)=>{
      return formatDate(scope.row.time)
    }
  },
  {
    prop: "nums",
    label: "人数",
  },
];
/** 关闭表单*/
function onClose() {
  visible.value = false;
}

// 暴露给父组件的方法
defineExpose({
  onOpen
});
</script>
  
<style lang="scss" scoped></style>
  