<template>
    <div class='table-box' ref='popupBaseView'>
      <ProTable
          ref='proTable'
          :columns='columns'
          :request-api='getTableList'
      >
        <!-- :requestApi="getRoleList" -->
        <!-- 表格 header 按钮 -->
        <template #tableHeader='scope'>
          <el-button v-auth.device="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
          <el-button v-auth.device="'export'" type='primary' :icon='Upload' plain @click='downloadFile()'>导出</el-button>
          <el-button v-auth.device="'import'" type='primary' :icon='Download' plain @click="importFile('')"
                     v-if='modeStore.currentMode != "比对式"'>导入
          </el-button>
          <el-button v-auth.device="'import'" type='primary' :icon='Download' plain @click="importFile('比对式')"
                     v-if='modeStore.currentMode === "比对式"'>导入
          </el-button>
          <el-button v-auth.device="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
                     @click='batchDelete(scope.selectedListIds)'>
            删除
          </el-button>
        </template>
        <!-- 表格操作 -->
        <template #operation='scope'>
          <el-button v-auth.device="'edit'" type='primary' link :icon='EditPen' :model-value='false'
                     @click="openDialog('edit', scope.row)">编辑
          </el-button>
          <el-button v-auth.device="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除
          </el-button>
        </template>
  
      </ProTable>
    </div>
    <DevicePopup :refresh-table='proTable?.getTableList' ref='devicePopup'/>
    <ImportExcel ref='deviceImportExcel'/>
  </template>
  
  <script setup lang='tsx' name='useRole'>
  import TimeControl from '@/components/TimeControl/index.vue'
  import {type PqReport} from '@/api/device/interface/report.ts'
  import {useHandleData} from '@/hooks/useHandleData'
  import {useDownload} from '@/hooks/useDownload'
  import ProTable from '@/components/ProTable/index.vue'
  import ImportExcel from '@/components/ImportExcel/index.vue'
  import {type ColumnProps, type ProTableInstance} from '@/components/ProTable/interface'
  import DevicePopup from '@/views/machine/device/components/devicePopup.vue'
  import {CirclePlus, Delete, Download, EditPen, Upload} from '@element-plus/icons-vue'
  import {useDictStore} from '@/stores/modules/dict'
  import {deletePqDev, downloadTemplate, exportPqDev, getPqDev, getPqDevList, importPqDev} from '@/api/device/device/index.ts'
  import {ElMessageBox} from 'element-plus'
  import {onBeforeMount, reactive, ref} from 'vue'
  import {useAppSceneStore, useModeStore} from '@/stores/modules/mode'
  
  // defineOptions({
  //   name: 'device',
  // })
  const modeStore = useModeStore()
  const dictStore = useDictStore()
  const appSceneStore = useAppSceneStore()
  // ProTable 实例
  const proTable = ref<ProTableInstance>()
  const devicePopup = ref()

  
  const getTableList = async (params: any) => {
    // let newParams = JSON.parse(JSON.stringify(params))
    // const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id//获取数据字典中对应的id
    // newParams.pattern = patternId
    // return getPqDevList(newParams)
  }
  
  
  // 表格配置项
  const columns = reactive<ColumnProps<PqReport.ResReport>[]>([
    {type: 'selection', fixed: 'left', width: 70},
    {type: 'index', fixed: 'left', width: 70, label: '序号'},
    {
      prop: 'name',
      label: '名称',
      search: {el: 'input'},
      minWidth: 100,
    },
    
    {
      prop: 'version',
      label: '版本号',
      minWidth: 100,
  
    },
    {
      prop: 'basePath',
      label: '基础模板文件路径',
      minWidth: 150,
  
    },
    {
      prop: 'detailPath',
      label: '检测项模版文件路径',
      minWidth: 150,
  
    },
    {
    prop: 'createTime',
    label: '创建时间',
    width: 200,
    render: scope => {
      if (scope.row.createTime) {
        const date = new Date(scope.row.createTime);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }
      return '';
    }
  },
   
    {prop: 'operation', label: '操作', fixed: 'right', width: 200},
  ])
  
  
 
  // 打开 drawer(新增、编辑)
  const openDialog = (titleType: string, row: Partial<PqReport.ResReport> = {}) => {
    
  }
  
  
  // 批量删除报告模版
  const batchDelete = async (id: string[]) => {
  
  }
  
  // 删除报告模版
  const handleDelete = async (params:PqReport.ResReport) => {
    
  
  }
  

  </script>
    