<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">
            <Tree />
        </div>

        <div class="content-right-Tabs" style="height: 570px; 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: 500px">
                        <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>
                                <el-button :icon="CirclePlus" type="primary" @click="openAddDialog()">
                                    保存测试项
                                </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: '390px', 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">
                                        <template #default="scope">
                                            <el-descriptions border :column="1" size="small">
                                                <el-descriptions-item label="V">0.000V 　 0.000°</el-descriptions-item>
                                                <el-descriptions-item label=" I">0.000A 　 0.000°</el-descriptions-item>
                                            </el-descriptions>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="L2" label="L2">
                                        <template #default="scope">
                                            <el-descriptions border :column="1" size="small">
                                                <el-descriptions-item label="V">0.000V 　 0.000°</el-descriptions-item>
                                                <el-descriptions-item label=" I">0.000A 　 0.000°</el-descriptions-item>
                                            </el-descriptions>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="L3" label="L3">
                                        <template #default="scope">
                                            <el-descriptions border :column="1" size="small">
                                                <el-descriptions-item label="V">0.000V　 0.000°</el-descriptions-item>
                                                <el-descriptions-item label=" I">0.000A 　 0.000°</el-descriptions-item>
                                            </el-descriptions>
                                        </template>
                                    </el-table-column>
                                    <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;">
                                        
                                  </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 Tree from './tree.vue'
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' }
        ]
    }
])




// 打开 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: 560px;
    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; /* 根据需要调整间距 */
}
:deep(.el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell) {
    padding: 3px 11px;
}
</style>
