<template>
        <el-dialog class='table-box'
        title="数据查询"
               v-model='dialogVisible'
               v-bind="dialogSmall" 
               width="1200"
               height="600"
               draggable
>
    <div class='table-box'>
    <el-tabs type="border-card">
    <el-tab-pane label="检测结果"> 
      <!-- 列表数据 -->
      <div class="container_table1">
        <ProTable
        ref='proTable1'
        :columns='columns1'
        :data="testResultDatas"
      >
         
      </ProTable>
      </div>
    </el-tab-pane>

    <el-tab-pane label="原始数据">
      <!-- 列表数据 -->
      <div class="container_table2">
      <ProTable
        ref='proTable2'
        :columns='columns2'
        :data="testDatas"
      >
      </ProTable>
      </div>
    </el-tab-pane>
    </el-tabs>
    </div>
</el-dialog>
  </template>
  
  <script setup lang='tsx' name='useRole'>
  import { Role } from '@/api/role/interface'
  import { useHandleData } from '@/hooks/useHandleData'
  import { useDownload } from '@/hooks/useDownload'
  import { useAuthButtons } from '@/hooks/useAuthButtons'
  import ProTable from '@/components/ProTable/index.vue'
  import rolePopup from './components/rolePopup.vue'
  import permissionUnit from './components/permissionUnit.vue'
  import ImportExcel from '@/components/ImportExcel/index.vue'
  import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
  import {dialogSmall} from '@/utils/elementBind'
  import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
  import { useDictStore } from '@/stores/modules/dict'
  import {
    getRoleList,
    deleteRole,
  } from '@/api/role/role'
  import { deleteUser } from '@/api/user/user'
  const dialogVisible = ref(false)
  
  const open = () => {
    dialogVisible.value = true
  }
  defineExpose({ open })

  
  // ProTable 实例
  const proTable1 = ref<ProTableInstance>()
  const proTable2 = ref<ProTableInstance>()
  
  
  // dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
  // 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
  const dataCallback = (data: any) => {
    return {
      records: data.list,
      total: data.total,
      current: data.pageNum,
      size: data.pageSize,
    }
  }
  
  // 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
  // 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
  const getTableList = (params: any) => {
    let newParams = JSON.parse(JSON.stringify(params))
    newParams.createTime && (newParams.startTime = newParams.createTime[0])
    newParams.createTime && (newParams.endTime = newParams.createTime[1])
    delete newParams.createTime
    return getRoleList(newParams)
  }
  
  // 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
  const { BUTTONS } = useAuthButtons()
  
interface TestResultData {
    standardData: number,//标准值
    testedData: number,//被检值
    errorData: number,//误差值
    errorValue: number,//误差允许值
    testResult: string,//检测结果（合格、不合格、无法比较）   
}
interface TestData {
    dataTime: string,//数据时间（合格、不合格、无法比较）   
    standardData: number,//标准值
    testedData: number,//被检值
}
//检测结果数组
const testResultDatas = [
{
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
    errorData: 0.01,//误差值
    errorValue: 0.05774,//误差允许值
    testResult: "合格",//检测结果（合格、不合格、无法比较）
}
];

//原始数据数组
const testDatas = [
{
    dataTime: "2024-11-11 14:05:00",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:03",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:06",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:09",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:12",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:15",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:18",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:21",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:24",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:27",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:30",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:33",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:36",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:39",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:42",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:45",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:48",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:51",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:54",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
{
    dataTime: "2024-11-11 14:05:57",//检测数据时间
    standardData: 57.74,//标准值
    testedData: 57.73,//被检值
},
];

  // 表格配置项
  const columns1 = reactive<ColumnProps<TestResultData>[]>([
    { type: 'selection', fixed: 'left', width: 70 },
    { type: 'index', fixed: 'left', width: 70, label: '序号' },
    {
      prop: 'standardData',
      label: '标准值',
      minWidth: 150,
    },
    {
      prop: 'testedData',
      label: '被检值',
      minWidth: 150,
    },
    {
      prop: 'errorData',
      label: '误差值',
      minWidth: 150,
    },
    {
      prop: 'errorValue',
      label: '误差允许值',
      minWidth: 150,
    },
    {
      prop: 'testResult',
      label: '检测结果',
      minWidth: 150,
    },
  ])
  
  // 表格配置项
  const columns2 = reactive<ColumnProps<TestData>[]>([
    { type: 'selection', fixed: 'left', width: 70 },
    { type: 'index', fixed: 'left', width: 70, label: '序号' },
    {
      prop: 'dataTime',
      label: '数据时间',
      minWidth: 200,
    },
    {
      prop: 'standardData',
      label: '标准值',
      minWidth: 150,
    },
    {
      prop: 'testedData',
      label: '被检值',
      minWidth: 150,
    },
  ])

  </script>
    