<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'  @click="handleRowClick(scope.row)">查看</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>

       <!-- 新增/编辑误差体系对话框 -->
       <ErrorSystemDialog     
      :visible="dialogFormVisible"
      :formData="dialogForm"
       :dialogTitle="dialogTitle"
      @update:visible="dialogFormVisible = $event"
    />

    <!-- 查看误差体系详细信息 -->
    <ErrorStandardDialog     
      :visible="detail_dialogFormVisible"
      :formData="detail_dialogForm"
       :dialogTitle="detail_dialogTitle"
      @update:visible="detail_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 ErrorSystemDialog from "@/views/machine/errorSystem/components/ErrorSystemDialog.vue"; // 导入子组件
import ErrorStandardDialog from "@/views/machine/errorSystem/components/ErrorStandardDialog.vue"; // 导入子组件
let multipleSelection = ref<string[]>([])
const errorData = errorDataList.errordata
const dialogFormVisible = ref(false)
const dialogTitle = ref('新增误差体系')
const dialogForm = ref<ErrorSystem.ErrorSystemList>({
                              id: '',
                              name: '',
                              publishTime: '',
                              year:'',     
                              level:'',   
                              state: '',       
});



const detail_dialogFormVisible = ref(false)
const detail_dialogTitle = ref('Q/GDW 10650.2-2021 误差体系')
const detail_dialogForm = ref<ErrorSystem.ErrorSystemDetail>({
                              measured: '',//被测量
                              deviceLevel: '',//检测装置级别
                              condition: '',//测量条件
                              maxErrorValue: '',//最大误差     
});

// 表格配置项
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 = (errorSystem: ErrorSystem.ErrorSystemList) => {
  errorSystem.publishTime ='2024'
  errorSystem.state = '启用';
  dialogForm.value = {...errorSystem};
  dialogTitle.value = '编辑误差体系';
  dialogFormVisible.value = true; // 打开对话框
};

const openAddDialog = () => {
  dialogForm.value = {
    id: '',
    name: '',
    publishTime: '',
    year: '',
    level: '',
    state: '',
  };
  dialogTitle.value = '新增误差体系';
  dialogFormVisible.value = true; // 打开对话框
};

const handleRowClick = (errorSystem: ErrorSystem.ErrorSystemList) =>{
  detail_dialogTitle.value = errorSystem.name;
  detail_dialogFormVisible.value = true; // 显示对话框
}
</script>

<style scoped>

</style>