<template>
   <div class='table-box'>
    <ProTable
      ref='proTable'
      :columns='columns'
      :data='errorData'
      type='selection'
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type='primary' :icon='CirclePlus' @click="openAddDialog">新增误差体系</el-button>
          <el-button type='danger' :icon='Delete' plain
                     >
            批量删除误差体系
          </el-button>
      </template>
       <!-- 表格操作 -->
       <template #operation='scope'>
          <el-button type='primary' link :icon='View'  @row-click="handleRowClick">查看</el-button>
          <el-button type='primary' link :icon='EditPen' @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type='primary' link :icon='Delete' >删除</el-button>
        </template>
    </ProTable>

            <!-- 新增/编辑资源对话框 -->
            <ResourceDialog
      :visible="dialogFormVisible"
      :formData="dialogForm"
       :dialogTitle="dialogTitle"
      @update:visible="dialogFormVisible = $event"
    />
  </div>
</template>

<script setup lang="ts" name='useProTable'>
import ProTable from '@/components/ProTable/index.vue'
import type { ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete,EditPen,View} from '@element-plus/icons-vue'
import errorDataList from '@/api/error/errorData'
import { reactive,ref } from 'vue'
import type { ErrorSystem } from '@/api/error/interface'
import ResourceDialog from "@/views/machine/errorSystem/components/ErrorSystemDialog.vue"; // 导入子组件
let multipleSelection = ref<string[]>([])
const errorData = errorDataList
const dialogFormVisible = ref(false)
const dialogTitle = ref('新增误差体系')
const dialogForm = ref<ErrorSystem.ErrorSystemList>({
                              id: '',
                              name: '',
                              year:'',     
                              level:'',          
});

// 表格配置项
const columns = reactive<ColumnProps<ErrorSystem.ErrorSystemList>[]>([
  { type: 'selection', fixed: 'left', width: 50 },
  {
    prop: 'id',
    label: '序号',
    width: 100,
  },
  {
    prop: 'name',
    label: '误差体系名称',
    width: 300,
  },
  {
    prop: 'year',
    label: '标准实施年份',
    search: { el: 'input' },
  },

  {
    prop: 'level',
    label: '适用设备等级',
    search: { el: 'select', props: { filterable: true } },
  },
  { prop: 'operation', label: '操作', fixed: 'right' },
])

// 打开编辑对话框
const openEditDialog = (resource: ErrorSystem.ErrorSystemList) => {
 
};

const openAddDialog = () => {
  dialogForm.value = {
    id: '',
    name: '',
    year: '',
    level: '',
  };
  dialogFormVisible.value = true; // 打开对话框
};


const handleRowClick = (row: ErrorSystem.ErrorSystemList) =>{
  
}
</script>

<style scoped>

</style>