<template>
    <el-dialog  :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" width="1400px">
      <div class="dialog-content" >
            <el-tabs type="border-card" class="left-tabs" style="height: 100%;">
                <el-tab-pane label="输出菜单">
                    <!-- 输出菜单内容 -->
                    <el-table :data="tableData"  
                    :header-cell-style="{ textAlign: 'center',backgroundColor: '#003078',color: '#fff' } " 
                    :cell-style="{ textAlign: 'center' }" 
                    style="width: 100%"  
                    :style="{ height: '295px',overflow:'hidden'}"
                    :show-header="false"
                    :span-method="arraySpanMethod">
                      <el-table-column prop="sort" label="相别" width="60" />
                      <el-table-column prop="frequency" label="电压/电流" width="90" />
                      <el-table-column prop="L1" label="值" width="180"/>
                      <el-table-column label="操作"  width="80">
                        <template #default="{  }">
                          <el-button type="info" :icon="Bottom"></el-button>
                        </template>
                      </el-table-column>  
                      <el-table-column label="操作">
                        <template #default="{ row, $index }">
                          <el-button :type="buttonTypes[$index].channel || 'info'" @click="toggleType(row, $index,'channel')">通道使能</el-button>
                          <el-button :type="buttonTypes[$index]?.harmonic || 'info'" @click="toggleType(row, $index, 'harmonic')">谐波使能</el-button>
                          <el-button :type="buttonTypes[$index]?.interHarmonic || 'info'" @click="toggleType(row, $index, 'interHarmonic')">间谐波使能</el-button>
                          <el-button :type="buttonTypes[$index]?.flicker || 'info'" @click="toggleType(row, $index, 'flicker')">闪变使能</el-button>
                          <el-button :type="buttonTypes[$index]?.transient || 'info'" @click="toggleType(row, $index, 'transient')">暂态使能</el-button>
                        </template>
                      </el-table-column>                       
                    </el-table>                        
                </el-tab-pane>
            </el-tabs>
            <el-tabs type="border-card" class="right-tabs" style="height: 100%;">
                <el-tab-pane label="全局设置菜单">
                  <!-- 全局设置菜单内容 -->
                  <div class="form-item-container">
                    <el-form-item label="频率：" prop='name'>
                      <div class="input-label-container">
                        <el-input style="width: 100px;" />
                        <label>Hz</label>
                    </div>
                    </el-form-item>
                  </div>
                  <div class="button-label-container">
                    <label>参考设定值列表:</label>
                    <el-button type="primary" :icon='EditPen' @click="openDialog">编辑</el-button>
                  </div>
                </el-tab-pane>
            </el-tabs>
      </div>
      <div style="margin-top: 20px;">
        <el-tabs type="border-card"  class="custom-tabs">
              <el-tab-pane label="电压/电流编辑">
                  <TestScriptVolCurTab/>
              </el-tab-pane>
              <el-tab-pane label="谐波编辑">
                  <TestScriptHarmTab/>
              </el-tab-pane>
              <el-tab-pane label="间谐波编辑">
                  <TestScriptInHarmTab/>
              </el-tab-pane>
              <el-tab-pane label="闪变编辑">
                  <TestScriptFlickerTab/>
              </el-tab-pane>
              <el-tab-pane label="暂态编辑">
                  <TestScriptDipTab/>
              </el-tab-pane>
        </el-tabs>
      </div>
      
      <SetValueTable  ref="setValueTable"/>

      <template #footer>
          <div >
            <el-button @click='close()'>取 消</el-button>
            <el-button type="primary" @click='save()'>保存</el-button>
          </div>
      </template>
    </el-dialog>
  
</template>

<script setup lang="ts">
import { dialogBig } from '@/utils/elementBind'
import { onMounted, reactive, ref } from 'vue'
import SetValueTable from '@/views/machine/testScript/components/setValueTable.vue';
import {EditPen,ArrowDown, Bottom} from '@element-plus/icons-vue'
import { type TabsInstance } from 'element-plus';
import TestScriptVolCurTab from '@/views/machine/testScript/components/testScriptVolCurTab.vue';
import TestScriptHarmTab from '@/views/machine/testScript/components/testScriptHarmTab.vue';
import TestScriptInHarmTab from '@/views/machine/testScript/components/testScriptInHarmTab.vue';
import TestScriptFlickerTab from '@/views/machine/testScript/components/testScriptFlickerTab.vue';
import TestScriptDipTab from '@/views/machine/testScript/components/testScriptDipTab.vue';


const dialogVisible = ref(false)
const dialogTitle = ref()
const setValueTable = ref()
const buttonTypeOptions = ['default', 'text', 'success', 'warning', 'info', 'primary', 'danger'] as const;
type ButtonType = typeof buttonTypeOptions[number];
// 初始化按钮类型
const buttonTypes = reactive<{ [key: number]: { channel: ButtonType, harmonic: ButtonType, interHarmonic: ButtonType, flicker: ButtonType, transient: ButtonType } }>({});
 

const tableData= [
        { sort: 'L1', frequency: 'V', L1: '电压:57.75V 相角:0°'},
        { sort: 'L1', frequency: 'I', L1: '电压:57.75V 相角:0°'},
        { sort: 'L2', frequency: 'V', L1: '电压:57.75V 相角:0°'},
        { sort: 'L2', frequency: 'I', L1: '电压:57.75V 相角:0°'},
        { sort: 'L3', frequency: 'V', L1: '电压:57.75V 相角:0°'},
        { sort: 'L3', frequency: 'I', L1: '电压:57.75V 相角:0°'},
      ]

// 定义 span-method 逻辑
const arraySpanMethod = ({ rowIndex, columnIndex }: { rowIndex: number; columnIndex: number }) => {
  if (columnIndex === 0 || columnIndex === 3) { // 第一列
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
};


// 切换按钮类型
const toggleType = (row: any, $index: number, buttonType: 'channel' | 'harmonic' | 'interHarmonic' | 'flicker' | 'transient') => {
  if ($index !== undefined) {
    const currentType = buttonTypes[$index][buttonType];
    buttonTypes[$index][buttonType] = currentType === 'info' ? 'primary' : 'info';
  }
};

// 关闭弹窗
const close = () => {
    dialogVisible.value = false
}
    
// 保存数据
const save = () => {
    
}



// 打开弹窗，可能是新增，也可能是编辑
const open =  (sign: string,row: any) => {
    dialogVisible.value = true
    dialogTitle.value = sign === 'add'? '新增检测项目信息' : '编辑检测项目信息'

    // 初始化按钮类型
  tableData.forEach((_, index) => {
    buttonTypes[index] = {
      channel: 'info',
      harmonic: 'info',
      interHarmonic: 'info',
      flicker: 'info',
      transient: 'info'
    };
  });
}


// 打开 drawer(新增、编辑)
const openDialog = () => {
  setValueTable.value?.open()
}


// 对外映射
defineExpose({ open })
</script>

<style scoped>
.dialog-content {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
}

.tabs-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}

.left-tabs {
  flex: 3; /* 左侧 tab 占据 3/4 的宽度 */
  margin-right: 10px; /* 可选：添加间距 */
}

.right-tabs {
  flex: 1; /* 右侧 tab 占据 1/4 的宽度 */
}

.form-item-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  margin-bottom: 10px; /* 可选：添加间距 */
}

.button-label-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.button-label-container label {
  margin-right: 10px; /* 按钮和文字之间的距离 */
}
.input-label-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.input-label-container label {
  margin-left: 5px; /* 添加标签与输入框之间的间距 */
}

</style>