<!--单列-->
<template>
    <el-dialog class='table-box'
               v-model='dialogVisible'
               top='114px'
               :style="{ height: height+'px', maxHeight: height+'px', overflow: 'hidden' }"
               :title='title'
               :width='width'
               :modal='false'>
      <div class='table-box' :style="{height:(height-64)+'px',maxHeight:(height-64)+'px',overflow:'hidden'}">
      <ProTable
          ref='proTable'
          :columns='columns'
          :data='deviceData'
          type='selection'
          @selection-change="handleSelectionChange" 
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader="scope">
        <el-tooltip content="通过文件导入设备" placement="top">
          <el-button type='primary' :icon='Download' tooltip >导入设备</el-button>
        </el-tooltip>
        <el-tooltip content="通过设备列表导入设备" placement="top">
          <el-button type='primary' :icon='Download' tooltip @click="showDeviceSelectOpen">筛选设备</el-button>
        </el-tooltip>
        <el-tooltip content="把设备列表导出成文件" placement="top" :disabled='!scope.isSelected'>
          <el-button type='primary' :icon='Download' :disabled='!scope.isSelected' tooltip >导出设备</el-button>
        </el-tooltip>
          <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>
           批量移除
         </el-button>
        </template>
        <!-- <el-button type='primary' :icon='Download' >下载报告</el-button> -->
        <!-- 表格操作 -->
        <template #operation='scope'>
          <!-- <el-button type='primary' link :icon='View' >查看</el-button> -->
          <el-button type='primary' link :icon='Delete' >移除</el-button>
        </template>
      </ProTable>
     </div>
     <DeviceSelectOpen :width='width' :height='height' ref='openDeviceSelectView' />
    </el-dialog>
  </template>
  <script setup lang='tsx'>
  import {  Delete, View ,Upload,Download} from '@element-plus/icons-vue'
  import { reactive,ref } from 'vue'
  import type { Device } from '@/api/device/interface'
  import ProTable from '@/components/ProTable/index.vue'
  import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
  import deviceDataList from '@/api/device/deviceData'
  import DeviceSelectOpen from '@/views/plan/planList/components/devSelectPopup.vue'
  import { useViewSize } from '@/hooks/useViewSize'

  //const { popupBaseView, viewWidth, viewHeight } = useViewSize()
  const deviceData = deviceDataList.plan_devicedata
  const dialogVisible = ref(false)
  const title = ref('')
  const openDeviceSelectView = ref()
  let multipleSelection = ref<string[]>([])
   // 表格配置项
   const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
    { type: 'selection', fixed: 'left', width: 70 },
    {
      prop: 'name',
      label: '名称',
      minWidth: 120,
    },
    {
      prop: 'dev_Type',
      label: '类型',
      minWidth: 180,
    },
    {
      prop: 'dev_Chns',
      label: '通道数',
      minWidth: 100,
    },
    {
      prop: 'reCheck_Num',
      label: '复检次数',
      minWidth: 70,
    },
    {
      prop: 'report_State',
      label: '报告状态',
      minWidth: 110,
    },
    {
      prop: 'check_Result',
      label: '检测结果',
      minWidth: 110,
    },
    {
      prop: 'check_State',
      label: '检测状态',
      minWidth: 110,
    },
    {
      prop: 'document_State',
      label: '归档状态',
      minWidth: 110,
    },
    { prop: 'operation', label: '操作', fixed: 'right', minWidth: 100 },
  ])

  const open = (textTitle: string) => {
    dialogVisible.value = true
    title.value = textTitle
  }
  defineExpose({ open })
  
  
  const props = defineProps({
    width: {
      type: Number,
      default: 800,
    },
    height: {
      type: Number,
      default: 744,
    },
  })
  


  const showDeviceSelectOpen = () => {
  openDeviceSelectView.value.open('设备筛选列表')
}
// 处理选择变化
const handleSelectionChange = (selection:Device.ResPqDev[]) => {
   multipleSelection.value = selection.map(row => row.id); // 更新选中的行
   
 };
  </script>
  <style>
  
  </style>