<template>
  
  <el-dialog  :title="dialogTitle"  v-model='dialogVisible'  @close="close" v-bind="dialogBig">
    <div class="table-container">
        <el-table :data="errorData.value" 
                  height="500" 
                  :header-cell-style="rowClass"
                  :cell-style="{ textAlign: 'center' }" 
                  style="width: 100%"
                  :span-method="spanMethod" 
                  :border="true"
                  class="custom-table"
                  >
          <el-table-column label="被测量">
            <el-table-column prop="col1" width="150"/>
            <el-table-column prop="col2" width="120" />
          </el-table-column>
          <el-table-column prop="deviceLevel" label="检测装置级别" width="120"/>
          <el-table-column prop="measurementType" label="测量类型" />
          <el-table-column prop="condition" label="测量条件" />
          <el-table-column prop="maxErrorValue" label="最大误差" />
        </el-table>
  </div>
  <div>
    <label class="left-align-label">注1：UN：测量的标称电压；IN：测量仪器的标称电流；Uh和Ih：测量值，h表示谐波次数。</label>
  </div>
  <div>
    <label class="left-align-label">注2：对于数字式接入监测终端，与电能质量信号采集单元联合准确度需满足本表要求。</label>
  </div>
   </el-dialog>
</template>
 
 <script lang="ts" setup name="IndicatorTypeDialog">
 import { defineProps, defineEmits, reactive,watch,ref,computed, type CSSProperties } from 'vue';
 import { dialogBig} from '@/utils/elementBind'
 import type { ColumnProps } from '@/components/ProTable/interface'
 import type { ErrorSystem } from '@/api/device/interface/error'
 import errorDataList from '@/api/device/error/errorData'
 import type { TableColumnCtx } from 'element-plus'
 import { useDictStore } from '@/stores/modules/dict'

 const dictStore = useDictStore()
 const errorData = ref<ErrorSystem.Error_detail[]>([]);
 const dialogTitle = ref()
 const devLevelName = ref<string>('') // 假设 devLevelName 是一个 ref
  function useMetaInfo() {
    const dialogVisible = ref(false)
    const formContent = ref<ErrorSystem.ErrorSystemList>({
      id: '',
      name: '',
      standardName:'',
      standardTime:'',
      devLevel:'',
      enable:1,
      state:1,
    })
    return { dialogVisible, formContent }
  }
  
  const { dialogVisible, formContent } = useMetaInfo()

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

const rowClass = ({ row, column, rowIndex, columnIndex }: { row: any; column: any; rowIndex: number; columnIndex: number }): CSSProperties => {
  let res: CSSProperties = {
    textAlign: 'center' as CSSProperties['textAlign'],
    backgroundColor: '#003078',
    color: '#fff'
  }
  if (rowIndex === 1) {
    res = { ...res, display: 'none' }
  }
  return res
}


const spanMethod = computed(() => {
  return devLevelName.value === 'A级' ? spanAMethod : spanSMethod
})

const spanAMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  if (columnIndex === 0) {
    if (rowIndex <= 1 || rowIndex === 7 || rowIndex == 20) {//0电压偏差，1频率偏差，7闪变，20功率，简单的跨两列
      return {
        rowspan: 1,
        colspan: 2,
      }
    }
    if (rowIndex === 2) {//2三相不平衡跨三行两列
      return {
        rowspan: 3, 
        colspan: 2,
      }
    }
    if (rowIndex === 3 || rowIndex === 4 || rowIndex === 6 || 
        rowIndex >= 9 && rowIndex <= 15 || 
        rowIndex >= 17 && rowIndex <= 19 || 
        rowIndex === 22 || rowIndex === 24) {//这些行不显示
      return {
        rowspan: 0, 
        colspan: 0,
      }
    }
    if (rowIndex === 5 || rowIndex === 23) {//5电压波动，23电压暂降暂升中断跨两列
      return {
        rowspan: 2,
        colspan: 1,
      }
    }
    if (rowIndex === 8) {//谐波和间谐波跨八行两列
      return {
        rowspan: 8,
        colspan: 2,
      }
    }
    if (rowIndex === 16) {//高频次谐波跨八行两列
      return {
        rowspan: 4,
        colspan: 2,
      }
    }
    if (rowIndex === 21 || rowIndex === 22) {//电流跨两行两列
      return {
        rowspan: 2,
        colspan: 2,
      }
    }
  }
  if (columnIndex === 1) {
    if (rowIndex <= 4 || rowIndex >= 7 && rowIndex <= 22) {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
  if (columnIndex === 2 || columnIndex === 3) {
    if (rowIndex === 2 || rowIndex === 8 || rowIndex === 10 || 
        rowIndex === 12 || rowIndex === 14 || rowIndex === 16 || 
        rowIndex === 18 || rowIndex === 21) {
      return {
        rowspan: 2,
        colspan: 1,
      }
    }
    if (rowIndex === 3 || rowIndex === 9 || rowIndex === 11 || 
        rowIndex === 13 || rowIndex === 15 || rowIndex === 17 || 
        rowIndex === 19 || rowIndex === 22) {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
};


const spanSMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  if (columnIndex === 0) {
    if (rowIndex <= 1 || rowIndex === 8 || rowIndex == 17) {//0电压偏差，1频率偏差，7闪变，20功率，简单的跨两列
      return {
        rowspan: 1,
        colspan: 2,
      }
    }
    if (rowIndex === 2) {//2三相不平衡跨三行两列
      return {
        rowspan: 3, 
        colspan: 2,
      }
    }
    if (rowIndex === 3 || rowIndex === 4 || rowIndex === 6 || rowIndex === 7 ||
        rowIndex >= 10 && rowIndex <= 12 || 
        rowIndex >= 14 && rowIndex <= 16 || 
        rowIndex === 19 || rowIndex === 21 || rowIndex === 22) {//这些行不显示
      return {
        rowspan: 0, 
        colspan: 0,
      }
    }
    if (rowIndex === 5 || rowIndex === 20) {//5电压波动，23电压暂降暂升中断跨两行
      return {
        rowspan: 3,
        colspan: 1,
      }
    }
    if (rowIndex === 9 || rowIndex === 13) {//谐波和间谐波跨八行两列
      return {
        rowspan: 4,
        colspan: 2,
      }
    }
    if (rowIndex === 18 ) {//电流跨两行两列
      return {
        rowspan: 2,
        colspan: 2,
      }
    }
  }
  if (columnIndex === 1) {
    if (rowIndex === 6 || rowIndex === 21) {
      return {
        rowspan: 2,
        colspan: 1,
      }
    }
    if (rowIndex <= 4 || rowIndex >= 7 && rowIndex <= 19 || rowIndex === 22) {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
  if (columnIndex === 2) {
    if (rowIndex === 2 || rowIndex === 6 || rowIndex === 9 || 
        rowIndex === 11 || rowIndex === 13 || rowIndex === 15 || 
        rowIndex === 18 || rowIndex === 21) {
      return {
        rowspan: 2,
        colspan: 1,
      }
    }
    if (rowIndex === 3  || rowIndex === 7 ||
        rowIndex === 10 ||  rowIndex === 12 || 
        rowIndex === 14 ||  rowIndex === 16 || 
        rowIndex === 19 || rowIndex === 22) {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
  if(columnIndex === 3){
    if (rowIndex === 2 || rowIndex === 6 || rowIndex === 9 || 
        rowIndex === 11 || rowIndex === 13 ||rowIndex === 15 ||
        rowIndex === 18 || rowIndex === 21){
      return {
        rowspan: 2,
        colspan: 1,
      }
    }
    if (rowIndex === 3 || rowIndex === 7 || rowIndex === 10 || 
        rowIndex === 12 || rowIndex === 14 ||rowIndex === 16 ||
        rowIndex === 19 || rowIndex === 22){
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
};

// 关闭弹窗
const close = () => {
    dialogVisible.value = false
}

 // 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, data: ErrorSystem.ErrorSystemList) => {
  dialogTitle.value = sign + '  误差体系'
  dialogVisible.value = true
  if (data.id) {
      formContent.value = data as ErrorSystem.ErrorSystemList;

      devLevelName.value =  dictStore.getDictData('Dev_Level').find(item => item.id === data.devLevel)?.name || '';;

      if(devLevelName.value === 'A级'){
        errorData.value = errorDataList.errorADetail as unknown as ErrorSystem.Error_detail[];
      }else{
        errorData.value = errorDataList.errorSDetail as unknown as ErrorSystem.Error_detail[];
      }
      
  } 
}

 // 对外映射
defineExpose({ open })
const props = defineProps<{
  refreshTable: (() => Promise<void>) | undefined;
}>()
 </script>
 <style>
.table-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.custom-table {
  margin-bottom: 20px; /* 调整表格和注释之间的间距 */
}

.notes-container {
  text-align: center;
  width: 100%; /* 确保注释容器宽度与表格一致 */
}

.notes-container label {
  display: block; /* 使每个label标签上下排列 */
  margin-bottom: 10px; /* 调整两个label之间的间距 */
}


 </style>
