<template>
  <el-dialog  :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogBig">
    <el-table :data="errorData" :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" :span-method="spanMethod" border class="custom-table">
      <el-table-column prop="measured" label="被测量" />
      <el-table-column prop="deviceLevel" label="检测装置级别" />
      <el-table-column prop="measurementType" label="测量类型" />
      <el-table-column prop="condition" label="测量条件" />
      <el-table-column prop="maxErrorValue" label="最大误差" />
    </el-table>
   </el-dialog>
</template>
 
 <script lang="ts" setup name="IndicatorTypeDialog">
 import { defineProps, defineEmits, reactive,watch,ref,computed } from 'vue';
 import { dialogBig} from '@/utils/elementBind'
 import type { ColumnProps } from '@/components/ProTable/interface'
 import type { ErrorSystem } from '@/api/error/interface'
 import errorDataList from '@/api/error/errorData'
 import type { TableColumnCtx } from 'element-plus'

 const errorData = errorDataList.errordetail

 // 表格配置项
const columns = reactive<ColumnProps<ErrorSystem.Error_detail>[]>([
 {
   prop: 'measured',
   label: '被测量',
 },
 {
   prop: 'deviceLevel',
   label: '检测装置级别',
 },
 {
   prop: 'condition',
   label: '测量条件',
 },
 {
   prop: 'measurementType',
   label: '测量类型',
 },
 {
   prop: 'maxErrorValue',
   label: '最大误差',
 },
])


interface SpanMethodProps {
  row: ErrorSystem.Error_detail
  column: TableColumnCtx<ErrorSystem.Error_detail>
  rowIndex: number
  columnIndex: number
}

const spanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  if (columnIndex === 0  ) { // 检查是否为第一列
    if (rowIndex === 2 || rowIndex === 21) { // 检查是否为第三行
      return {
        rowspan: 2, // 合并行数
        colspan: 1,  // 单元格列数
      };
    }else if (rowIndex === 8) { // 
      return {
        rowspan: 8, 
        colspan: 1,
      };
    } 
    else if (rowIndex === 16) { // 
      return {
        rowspan: 4, 
        colspan: 1,
      };
    } 
    else if (rowIndex === 3 || rowIndex === 9 || rowIndex === 10|| rowIndex === 11
            || rowIndex === 12|| rowIndex === 13|| rowIndex === 14|| rowIndex === 15
            || rowIndex === 17 || rowIndex === 18|| rowIndex === 19
            || rowIndex === 22) { // 检查是否为第四行
      return {
        rowspan: 0, // 不显示该单元格
        colspan: 0,
      };
    }
  }
  else if(columnIndex === 2) { // 检查是否为第三列
    if (rowIndex === 2 
        || rowIndex === 8|| rowIndex === 10|| rowIndex === 12|| rowIndex === 14
        || rowIndex === 16|| rowIndex === 18
        || rowIndex === 21) { 
      return {
        rowspan: 2, 
        colspan: 1,
      };
    } 
    else if (rowIndex === 3
            || rowIndex === 9|| rowIndex === 11|| rowIndex === 13|| rowIndex === 15
            || rowIndex === 17|| rowIndex === 19
            || rowIndex === 22) { // 检查是否为第四行
      return {
        rowspan: 0, // 不显示该单元格
        colspan: 0,
      };
    }
  }
 
      
};


 const props = defineProps<{
   visible: boolean;
   dialogTitle: string;
   
   formData: {
        measured: string, 
        deviceLevel: string, 
        condition: string, 
        maxErrorValue: string 
   };
 }>();
 

 const emit = defineEmits<{
   (e: 'update:visible', value: boolean): void;
   (e: 'submit', data: any): void;
 }>();
 
 const handleCancel = () => {
   emit('update:visible', false); // 关闭对话框
 };
 
 // 当 props.visible 改变时，更新 formData
 watch(() => props.visible, (newVal) => {
   if (!newVal) {
     // 这里可以重置表单数据，如果需要的话
    
   }
 });
 
 

 
 </script>
 <style>

 </style>
