<template>
    <div>
        <div class="divider-container">
            <el-divider style="width: 260px" content-position="left">检测脚本信息</el-divider>
            <el-divider style="flex: 1" content-position="left">检测项目概要信息</el-divider>
        </div>
        <div class="data-check-content">
            <div class="content-tree">
                <Tree :treeData="treeData" @setTab="setTab" />
            </div>

            <div class="content-right-Tabs" style="height: calc(100vh - 315px); width: 100px">
                <el-tabs type="border-card" style="height: 100%" v-model="activeName" @tab-change="tabChange">
                    <el-tab-pane v-for="tab in tabData" :key="tab.value" :label="tab.label" :name="tab.value">
                        <div v-if="activeName == tab.value">
                            <div class="dialog-footer">
                                <el-button :icon="CirclePlus" type="primary" @click="openDialog('add')">新增</el-button>
                            </div>
                            <div style="display: flex">
                                <!-- 2级tab -->
                                <el-tabs
                                    type="border-card"
                                    style="flex: 1; margin-left: 10px"
                                    v-model="childActiveName"
                                    @tab-change="inquireTable"
                                >
                                    <el-tab-pane
                                        v-for="subTab in tab.children || []"
                                        :key="subTab.value"
                                        :label="subTab.label"
                                        :name="subTab.value"
                                        style="width: 100%"
                                    >
                                        <el-table
                                            :data="tableData"
                                            :header-cell-style="{
                                                textAlign: 'center',
                                                backgroundColor: '#003078',
                                                color: '#fff'
                                            }"
                                            stripe
                                            :cell-style="{ textAlign: 'center' }"
                                            height="calc(100vh - 480px)"
                                            style="width: 100%"
                                        >
                                            <el-table-column type="index" label="组次" width="60" />
                                            <el-table-column prop="ffreq" label="频率(Hz)" width="90" />
                                            <el-table-column
                                                :label="item.label"
                                                v-for="item in column"
                                                :key="item.label"
                                            >
                                                <template #default="{ row }">
                                                    <table class="tableL">
                                                        <tbody>
                                                            <tr>
                                                                <td class="theFirst">V</td>
                                                                <td>
                                                                    {{
                                                                        row.channelList[item.num].famp == null
                                                                            ? '/'
                                                                            : '' +
                                                                              row.channelList[item.num]?.famp +
                                                                              (valueCode == 'Absolute' ? 'V' : '%')
                                                                    }}
                                                                </td>
                                                                <td>
                                                                    {{
                                                                        row.channelList[item.num].fphase == null
                                                                            ? '/'
                                                                            : '' +
                                                                              row.channelList[item.num].fphase +
                                                                              '°'
                                                                    }}
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td class="theFirst">I</td>
                                                                <td>
                                                                    {{
                                                                        row.channelList[item.num + 1].famp == null
                                                                            ? '/'
                                                                            : '' +
                                                                              row.channelList[item.num + 1].famp +
                                                                              (valueCode == 'Absolute' ? 'V' : '%')
                                                                    }}
                                                                </td>
                                                                <td>
                                                                    {{
                                                                        row.channelList[item.num + 1].fphase == null
                                                                            ? '/'
                                                                            : '' +
                                                                              row.channelList[item.num + 1].fphase +
                                                                              '°'
                                                                    }}
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="操作" width="165">
                                                <template #default="{ row }">
                                                    <div class="actionButtons">
                                                        <el-button type="primary" link :icon="View" @click="view(row)">
                                                            查看
                                                        </el-button>
                                                    </div>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-tab-pane>
                                </el-tabs>
                                <div class="page">
                                    <div class="loading-container">
                                        <el-progress
                                            v-if="loading"
                                            type="circle"
                                        >
                                        <template #default="{}">
                                            <span class="Loading">Loading</span>
                                        </template>
                                        </el-progress>
                                    </div>
                                    <el-button :icon="CirclePlus" 
                                                type="primary" 
                                                size="large" 
                                                @click="startLoading" 
                                                style="margin-left: 70px;margin-top: 10px;"
                                    >启动</el-button>
                                    <el-button :icon="CirclePlus" 
                                                type="primary" 
                                                size="large" 
                                                @click="stopLoading"  
                                                style="margin-top: 10px;"
                                    >停止</el-button>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>

        <TestProjectPopup
            ref="testProjectPopupRef"
            :options="props.options"
            :activeName="activeName"
            :childActiveName="childActiveName"
            :formContent="props.formContent"
            :communicationList="communicationList"
            @addTab="addTab"
            @getCommunication="getCommunication"
            @close="showDialog = false"
            v-if="showDialog"
        />
        <!-- 查看 -->
        <ViewRow ref="viewRowRef"  
                :activeName="activeName"
                :formContent="props.formContent"
                @close="viewDialog = false"
                v-if="viewDialog"
                />
    </div>
</template>

<script setup lang="ts">
import { type PropType, ref, nextTick, onMounted, watch } from 'vue'
import Tree from './tree.vue'
import Commun from './communication.vue'
import type { CascaderOption } from 'element-plus'
import { getTreeData } from '@/api/check/test'
import { CirclePlus, Delete, Check, CopyDocument, View, EditPen } from '@element-plus/icons-vue'
import type { TestScript } from '@/api/device/interface/testScript'
import TestProjectPopup from '@/views/machine/testScript/components/testProjectPopup.vue'
import { CheckData } from '@/api/check/interface'
import { dlsDetails, deleteDtls, updateDtls, addScriptDtls, checkDataList } from '@/api/device/testScript'
import { useDictStore } from '@/stores/modules/dict'
import { useHandleData } from '@/hooks/useHandleData'
import { scriptDtlsCheckDataList } from '@/api/device/testScript/index'
import ViewRow from '@/views/machine/testScript/components/viewRow.vue'
interface TabOption {
    label?: string
    name?: string
    value?: string
    code?: string
    children?: TabOption[]
}
const communRef = ref()
const treeData = ref<CheckData.TreeItem[]>([])
const valueCode = ref('') //Absolute绝对值
const props = defineProps({
    options: {
        type: Array as PropType<TabOption[]>,
        required: true
    },
    formContent: {
        type: Object,
        required: true
    }
})
const showDialog = ref(false)
const viewDialog = ref(false)
const dictStore = useDictStore()
const activeName = ref('')
const childActiveName = ref('')
const firstName = 'first'
const viewRowRef = ref()
const communicationList = ref([])
const testProjectPopupRef = ref()
const tableData: any = ref([])
const tabData: any = ref([])

const loading = ref(true)
const column = ref([
    {
        label: 'L1',
        num: 0
    },
    {
        label: 'L2',
        num: 2
    },
    {
        label: 'L3',
        num: 4
    }
])
// 获取树
const getTree = () => { 
    getTreeData({
        scriptId: '9ff96807cf8c7524587982ed8baa8b57'
    }).then(res => {
        if (res.code === 'A0000') {
            treeData.value = res.data
            
            // 添加tab子项
            props.options.forEach((k: any, i: number) => {
                tabData.value[i].children = []
                treeData.value.forEach((item: any) => {
                    if (k.value == item.scriptTypeCode) {
                        item.children.forEach((s: any) => {
                            k.children.forEach((P: any) => {
                                if (P.code == s.scriptTypeCode) {
                                    tabData.value[i].children.push({
                                        label: P.label,
                                        value: P.code,
                                        children: []
                                    })
                                } else {
                                    s.children.forEach((j: any) => {
                                        if (j.scriptTypeCode == P.code) {
                                            tabData.value[i].children.push({
                                                label: P.label,
                                                value: P.code,
                                                children: []
                                            })
                                        }
                                    })
                                }
                            })
                        })
                    }
                })
            })
            tabChange()
        }
    })
}


// 设置树点击tab
const setTab = row => {
    activeName.value = row.activeName
    childActiveName.value = row.childActiveName
    getTree()
}
const copyActiveName = ref('')
// 获取通讯脚本点击
const getCommunication = () => {
    communicationList.value = communRef.value[0]?.getData()
}
// 切换大tab控制小tab
const tabChange = () => {
    if (copyActiveName.value != activeName.value) {
        copyActiveName.value == activeName.value

        if (
            tabData.value
                .filter((item: any) => item.value == activeName.value)[0]
                ?.children.filter((item: any) => item.value == childActiveName.value).length == 0
        ) {
            childActiveName.value =
                tabData.value.filter((item: any) => item.value == activeName.value)[0]?.children[0]?.value || ''
        }

     
    }
    inquireTable()
}
//根据脚本id查询检测脚本详情
const inquireTable = () => {
    const sortOrder = ['Ua', 'Ia', 'Ub', 'Ib', 'Uc', 'Ic']
    dlsDetails({
        scriptId: '9ff96807cf8c7524587982ed8baa8b57',
        scriptType: activeName.value,
        scriptSubType: childActiveName.value
    }).then((res: any) => {
        if (res.code === 'A0000') {
            res.data.forEach((item: any) => {
                item.channelList = item.channelList.sort((a: any, b: any) => {
                    const indexA = sortOrder.indexOf(a.channelType)
                    const indexB = sortOrder.indexOf(b.channelType)
                    return indexA - indexB
                })
            })

            tableData.value = res.data
        }
    })


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

// 查看
const view = (row: Partial<TestScript.ResTestScript> = {}) => {

    getCommunication()
    //当前点击的一级tab
    const parentTabName = communicationList.value.find(t => t.id === activeName.value)?.name || '未找到对应名称';
    //当前点击的二级tab
    const childrenTabName = ref('')
    tabData.value.forEach((item: any) => {
        if (item.value == activeName.value) {
            item.children.forEach((k: any) => {
                if (k.value == childActiveName.value) {
                    childrenTabName.value = k.label
                }
            })
        }
    })
    viewDialog.value = true
    setTimeout(() => {
        viewRowRef.value?.open(row, communicationList.value, parentTabName, childrenTabName.value)
    }, 0)
    
}


// 获取左边树数据
// 新增保存
const addTab = (row: any) => {
    getTree()
}

onMounted(() => {
    getTree()
    props.options.forEach((item: any) => {
        tabData.value.push({
            label: item.label.replace(/准确度|检测/g, ''),
            value: item.value,
            code: item.code,
            children: []
        })
    })
    activeName.value = tabData.value[0].value
   
    valueCode.value = dictStore
        .getDictData('Script_Value_Type')
        .filter(item => item.id == props.formContent.valueType)[0].code
})
</script>
<style lang="scss" scoped>
.data-check-content {
    display: flex;
    gap: 10px;
}

.content-tree {
    width: 260px;
    height: calc(100vh - 315px);
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    // margin-right: 10px;
    overflow: auto; /* 同时启用垂直和水平滚动 */
    overflow-x: hidden;
}
.scriptTree {
    height: calc(100vh - 520px);
}

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

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

.dialog-footer {
    display: flex;
    margin-left: 10px;
    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;
}
:deep(.el-loading-mask) {
    z-index: 3000;
}
.tableL {
    border-collapse: collapse;
    width: 100%;

    td {
        border: 1px solid #ccc;
        padding: 5px;
        width: 45%;
    }
    .theFirst {
        background-color: #003078;
        color: #fff;
        width: 20px !important;
    }
}
.actionButtons {
    .el-button {
        margin-left: 0px;
        margin: 5px 6px;
    }
}

.loading-container {
    background-color: #000;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
}
</style>
<style>
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
}
.el-divider--horizontal {
    margin: 4px 0 24px 0;
}
.el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
</style>
