<template>
  <div class="divider-container">
    <el-divider style="width: 400px">检测脚本信息</el-divider>
    <el-divider style="width: 1300px">检测项目概要信息</el-divider>
  </div>
    <div class="data-check-content">
        <div class="content-tree" >
            <el-tree 
            :default-expanded-keys="['0', '0-1', '0-2', '0-3', '1']" 
            node-key="id" 
            :data="data"
            :props="defaultProps" 
            @node-click="handleNodeClick" />
        </div>
        
        <div class="content-right-Tabs" style="height: 470px;width: 100px;">
              <el-tabs type="border-card" style="height: 100%;">
                  <el-tab-pane 
                      v-for="tab in props.options" 
                      :key="tab.name" 
                      :label="tab.label.replace(/准确度|检测/g, '')"
                      :name="tab.name">
                              <!-- 频率tab -->
                              <el-tabs type="border-card" style="height: 400px;">
                                    <el-tab-pane 
                                      v-for="subTab in tab.children || []"  
                                      :key="subTab.name" 
                                      :label="subTab.label" 
                                      :name="subTab.name">
                                  <!-- 子标签页内容 -->
                                  <div class="dialog-footer">
                                        <el-button :icon='CirclePlus' type="primary" @click="openDialog('add')">新增</el-button>
                                  </div>
                                  <div class="table-container">
                                      <el-table :data="tableData"  
                                            :header-cell-style="{ textAlign: 'center',backgroundColor: '#003078',color: '#fff' } " 
                                            :cell-style="{ textAlign: 'center' }" 
                                            style="width: 100%"  
                                            :style="{ height: '240px',overflow:'hidden'}">
                                              <el-table-column prop="sort" label="组次" width="60" />
                                              <el-table-column prop="frequency" label="频率(Hz)" width="100" />
                                              <el-table-column prop="L1" label="L1"/>
                                              <el-table-column prop="L2" label="L2"/>
                                              <el-table-column prop="L3" label="L3"/>
                                              <el-table-column label="操作" min-width="100">
                                              <template  #default="{ row }">
                                                  <el-button type="primary" link :icon='CopyDocument' @click="copyRow(row)">复制</el-button>
                                                  <el-button type="primary" link :icon='CopyDocument' @click="openAddDialog('edit',row)">编辑</el-button>
                                                  <el-button  type='primary' link :icon='Delete'  @click="deleteRow(row)">删除</el-button>
                                              </template>
                                              </el-table-column>
                                      </el-table>
                                  </div>
                                  <div class="dialog-footer" style="margin-top: 20px;">
                                        <el-button :icon='CirclePlus' type="primary" @click="openAddDialog()">保存测试项</el-button>
                                  </div>
                                </el-tab-pane>
                              </el-tabs>
                  </el-tab-pane>
              </el-tabs>
        </div>                  
    </div>

    <TestProjectPopup ref="testProjectPopup" />

</template>

<script setup lang="ts">
import { type PropType, ref } from 'vue';
import { data } from "@/api/plan/autoTest.json";
import type { CascaderOption } from 'element-plus';
import {CirclePlus, Delete, EditPen,CopyDocument} from '@element-plus/icons-vue'
import type { TestScript } from '@/api/device/interface/testScript';
import TestProjectPopup from '@/views/machine/testScript/components/testProjectPopup.vue';

const testProjectPopup = ref()

interface TabOption {
  label: string;
  name: string;
  children?: TabOption[];
}

const props = defineProps({
    options: {
      type: Array as PropType<TabOption[]>,
      required: true
    },
});

const tableData= [
        { sort: 1, frequency: 42.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
        { sort: 2, frequency: 50, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
        { sort: 3, frequency: 50.05, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
        { sort: 4, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
        { sort: 5, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
        { sort: 6, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
      ]


const tabs = ref([
  {
    label: '频率',
    name: 'resultTab',
    subTabs: [
      { label: '额度工作条件下的检测', name: 'quotaConditionTab' },
      { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab' },
      { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab' }
    ]
  },
  {
    label: '电压',
    name: 'resultTab1',
    subTabs: [
      { label: '额度工作条件下的检测', name: 'quotaConditionTab1' },
      { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab1' },
      { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab1' }
    ]
  },
  {
    label: '电流',
    name: 'resultTab2',
    subTabs: [
      { label: '额度工作条件下的检测', name: 'quotaConditionTab2' },
      { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab2' },
      { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab2' }
    ]
  },
  {
    label: '电压不平衡度',
    name: 'resultTab3',
    subTabs: [
      { label: '额度工作条件下的检测', name: 'quotaConditionTab3' },
      { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab3' },
      { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab3' }
    ]
  },
  {
    label: '电流不平衡度',
    name: 'resultTab4',
    subTabs: [
      { label: '额度工作条件下的检测', name: 'quotaConditionTab4' },
      { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab4' },
      { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab4' }
    ]
  },
  {
    label: '谐波电压',
    name: 'resultTab5',
    subTabs: [
      { label: '额度工作条件下的检测', name: 'quotaConditionTab5' },
      { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab5' },
      { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab5' }
    ]
  },
  {
    label: '谐波电流',
    name: 'resultTab6',
    subTabs: [
      { label: '额度工作条件下的检测', name: 'quotaConditionTab6' },
      { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab6' },
      { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab6' }
    ]
  },
  {
    label: '间谐波电压',
    name: 'resultTab7',
    subTabs: [
      { label: '额度工作条件下的检测', name: 'quotaConditionTab7' },
      { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab7' },
      { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab7' }
    ]
  },
  {
    label: '间谐波电流',
    name: 'resultTab8',
    subTabs: [
      { label: '额度工作条件下的检测', name: 'quotaConditionTab8' },
      { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab8' },
      { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab8' }
    ]
  },
  {
    label: '电压暂升暂降',
    name: 'resultTab9',
    subTabs: [
      { label: '额度工作条件下的检测', name: 'quotaConditionTab9' },
      { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab9' },
      { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab9' }
    ]
  },
  {
    label: '闪变',
    name: 'resultTab10',
    subTabs: [
      { label: '额度工作条件下的检测', name: 'quotaConditionTab10' },
      { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab10' },
      { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab10' }
    ]
  }
]);

const defaultProps = {
  children: "children",
  label: "name",
  pid: "pid",
};

const handleNodeClick = (data: any) => {
  console.log(data);
};

// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> = {}) => {
    testProjectPopup.value?.open(titleType, row)
}




</script>
<style scoped>
.data-check-content {
  display: flex;
  gap: 10px;
}

.content-tree {
  width: 300px;
  height: 470px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin-right: 10px;
  overflow: auto; /* 同时启用垂直和水平滚动 */
  overflow-x: auto; /* 确保水平滚动条生效 */
}

/* 确保 el-tree 内容可以超出容器宽度 */
.el-tree {
  width: fit-content; /* 根据内容自适应宽度 */
}

.content-right-Tabs {
  flex: 1; /* 根据需要调整宽度比例 */
}

.dialog-footer{
  display: flex; 
  justify-content: flex-end; 
  margin-bottom: 10px;
}

.divider-container {
  display: flex;
  
}

.divider-container .el-divider {
  margin-right: 30px; /* 根据需要调整间距 */
}
</style>





