<!-- 解析结果面板 -->
<template>
    <div class="analysis-result-panel">
        <div class="panel-header" v-if="!hideHeader">
            <h3>解析结果</h3>
        </div>
        <div class="panel-content">
            <!-- 主标签页（可选，可通过hideMainTabs隐藏） -->
            <el-tabs v-if="!hideMainTabs" v-model="activeMainTab" @tab-click="handleMainTabClick" class="main-tabs">
                <el-tab-pane v-for="tab in mainTabs" :key="tab.name" :label="tab.label" :name="tab.name">
                    <template v-if="hasSubTabs(tab)">
                        <el-tabs v-model="activeSubTab" @tab-click="handleSubTabClick" class="sub-tabs">
                            <el-tab-pane v-for="subTab in tab.subTabs" :key="subTab.name" :label="subTab.label"
                                :name="subTab.name">
                                <div class="tab-content">
                                    <template v-if="hasSections(subTab.sections)">
                                        <div class="content-section" v-for="section in subTab.sections"
                                            :key="section.id">
                                            <div class="section-title">{{ section.title }}</div>
                                            <template v-if="hasTable(section.tableRows)">
                                                <table class="section-table">
                                                    <thead>
                                                        <tr>
                                                            <th>{{ hasScoreRange(section) ? '名称' : '标题' }}</th>
                                                            <th>{{ hasScoreRange(section) ? '详情' : '内容' }}</th>
                                                            <th v-if="hasScoreRange(section)">分值范围</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr v-for="row in section.tableRows"
                                                            :key="`${section.id}-${row.title}`">
                                                            <td class="cell-title">{{ row.title }}</td>
                                                            <td class="cell-value">
                                                                <div v-if="!row.isHtml"
                                                                    v-html="formatPlainText(row.value)"></div>
                                                                <div v-else v-html="row.value"></div>
                                                            </td>
                                                            <td class="cell-score" v-if="hasScoreRange(section)">
                                                                {{ formatScoreRange(row) }}
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </template>
                                            <template v-else>
                                            <div class="section-content" v-if="!section.isHtml"
                                                v-html="formatPlainText(section.content)"></div>
                                            <div class="section-content html-content" v-else v-html="section.content">
                                            </div>
                                            </template>
                                        </div>
                                    </template>
                                    <div v-else class="empty-content">暂无数据</div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </template>
                    <template v-else>
                        <div class="tab-content">
                            <template v-if="hasSections(tab.sections)">
                                <div class="content-section" v-for="section in tab.sections" :key="section.id">
                                    <div class="section-title">{{ section.title }}</div>
                                    <template v-if="hasTable(section.tableRows)">
                                        <table class="section-table">
                                            <thead>
                                                <tr>
                                                    <th>{{ hasScoreRange(section) ? '名称' : '标题' }}</th>
                                                    <th>{{ hasScoreRange(section) ? '详情' : '内容' }}</th>
                                                    <th v-if="hasScoreRange(section)">分值范围</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="row in section.tableRows"
                                                    :key="`${section.id}-${row.title}`">
                                                    <td class="cell-title">{{ row.title }}</td>
                                                    <td class="cell-value">
                                                        <div v-if="!row.isHtml"
                                                            v-html="formatPlainText(row.value)"></div>
                                                        <div v-else v-html="row.value"></div>
                                                    </td>
                                                    <td class="cell-score" v-if="hasScoreRange(section)">
                                                        {{ formatScoreRange(row) }}
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </template>
                                    <template v-else>
                                        <div class="section-content" v-if="!section.isHtml"
                                            v-html="formatPlainText(section.content)"></div>
                                        <div class="section-content html-content" v-else v-html="section.content"></div>
                                    </template>
                                </div>
                            </template>
                            <div v-else class="empty-content">暂无数据</div>
                        </div>
                    </template>
                </el-tab-pane>
            </el-tabs>
            <!-- 隐藏主标签页时，直接显示当前主标签的内容 -->
            <template v-else>
                <template v-for="tab in mainTabs">
                    <template v-if="tab.name === activeMainTab">
                        <template v-if="hasSubTabs(tab)">
                            <el-tabs v-model="activeSubTab" @tab-click="handleSubTabClick" class="sub-tabs"
                                :key="`sub-tabs-${tab.name}`">
                                <el-tab-pane v-for="subTab in tab.subTabs" :key="subTab.name" :label="subTab.label"
                                    :name="subTab.name">
                                    <div class="tab-content">
                                        <template v-if="hasSections(subTab.sections)">
                                            <div class="content-section" v-for="section in subTab.sections"
                                                :key="section.id">
                                                <div class="section-title">{{ section.title }}</div>
                                                <template v-if="hasTable(section.tableRows)">
                                                    <table class="section-table">
                                                        <thead>
                                                            <tr>
                                                                <th>{{ hasScoreRange(section) ? '名称' : '标题' }}</th>
                                                                <th>{{ hasScoreRange(section) ? '详情' : '内容' }}</th>
                                                                <th v-if="hasScoreRange(section)">分值范围</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr v-for="row in section.tableRows"
                                                                :key="`${section.id}-${row.title}`">
                                                                <td class="cell-title">{{ row.title }}</td>
                                                                <td class="cell-value">
                                                                    <div v-if="!row.isHtml"
                                                                        v-html="formatPlainText(row.value)"></div>
                                                                    <div v-else v-html="row.value"></div>
                                                                </td>
                                                                <td class="cell-score" v-if="hasScoreRange(section)">
                                                                    {{ formatScoreRange(row) }}
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </template>
                                                <template v-else>
                                                    <div class="section-content" v-if="!section.isHtml"
                                                        v-html="formatPlainText(section.content)"></div>
                                                    <div class="section-content html-content" v-else
                                                        v-html="section.content"></div>
                                                </template>
                                            </div>
                                        </template>
                                        <div v-else class="empty-content">暂无数据</div>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </template>
                        <template v-else>
                            <div class="tab-content" :key="`content-${tab.name}`">
                                <template v-if="hasSections(tab.sections)">
                                    <div class="content-section" v-for="section in tab.sections" :key="section.id">
                                        <div class="section-title">{{ section.title }}</div>
                                        <template v-if="hasTable(section.tableRows)">
                                            <table class="section-table">
                                                <thead>
                                                    <tr>
                                                        <th>{{ hasScoreRange(section) ? '名称' : '标题' }}</th>
                                                        <th>{{ hasScoreRange(section) ? '详情' : '内容' }}</th>
                                                        <th v-if="hasScoreRange(section)">分值范围</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr v-for="row in section.tableRows"
                                                        :key="`${section.id}-${row.title}`">
                                                        <td class="cell-title">{{ row.title }}</td>
                                                        <td class="cell-value">
                                                            <div v-if="!row.isHtml"
                                                                v-html="formatPlainText(row.value)"></div>
                                                            <div v-else v-html="row.value"></div>
                                                        </td>
                                                        <td class="cell-score" v-if="hasScoreRange(section)">
                                                            {{ formatScoreRange(row) }}
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </template>
                                        <template v-else>
                                            <div class="section-content" v-if="!section.isHtml"
                                                v-html="formatPlainText(section.content)"></div>
                                            <div class="section-content html-content" v-else
                                                v-html="section.content">
                                            </div>
                                        </template>
                                    </div>
                                </template>
                                <div v-else class="empty-content">暂无数据</div>
                            </div>
                        </template>
                    </template>
                </template>
            </template>
        </div>
    </div>
</template>

<script>
export default {
    name: 'AnalysisResultPanel',
    props: {
        // 主标签页数据
        mainTabs: {
            type: Array,
            default: () => []
        },
        // 默认激活的主标签
        defaultMainTab: {
            type: String,
            default: 'project'
        },
        // 默认激活的子标签
        defaultSubTab: {
            type: String,
            default: ''
        },
        // 是否隐藏主标签页
        hideMainTabs: {
            type: Boolean,
            default: false
        },
        // 是否隐藏头部标题
        hideHeader: {
            type: Boolean,
            default: false
        }
    },
    data() {
        // 初始化时，如果 defaultSubTab 为空，获取第一个子标签
        const initialSubTab = this.defaultSubTab || this.getDefaultSubTab(this.defaultMainTab)
        return {
            activeMainTab: this.defaultMainTab,
            activeSubTab: initialSubTab,
        }
    },
    watch: {
        defaultMainTab(newVal, oldVal) {
            if (newVal !== oldVal) {
                this.activeMainTab = newVal
                // 切换主标签时，总是获取第一个子标签
                const firstSubTab = this.getDefaultSubTab(newVal)
                if (firstSubTab) {
                    this.activeSubTab = firstSubTab
                } else {
                    this.activeSubTab = ''
                }
            }
        },
        defaultSubTab(newVal, oldVal) {
            // 当 defaultSubTab 变化时，更新 activeSubTab
            if (newVal && newVal !== oldVal) {
                this.activeSubTab = newVal
            } else if (!newVal) {
                // 如果为空，获取当前主标签的第一个子标签
                this.activeSubTab = this.getDefaultSubTab(this.activeMainTab)
            }
        },
        hideMainTabs(newVal) {
            if (newVal) {
                // 当隐藏主标签时，确保子标签正确初始化
                if (!this.defaultSubTab) {
                    this.activeSubTab = this.getDefaultSubTab(this.defaultMainTab)
                } else {
                    this.activeSubTab = this.defaultSubTab
                }
            }
        }
    },
    created() {
        // 初始化时，如果 activeSubTab 为空，确保获取第一个子标签
        if (!this.activeSubTab) {
            this.activeSubTab = this.getDefaultSubTab(this.activeMainTab)
        }
    },
    methods: {
        handleMainTabClick(tab) {
            // 切换主标签时，重置子标签为第一个
            const currentMainTab = this.mainTabs.find(t => t.name === tab.name)
            if (currentMainTab && currentMainTab.subTabs && currentMainTab.subTabs.length > 0) {
                this.activeSubTab = currentMainTab.subTabs[0].name
            } else {
                this.activeSubTab = ''
            }
            this.$emit('main-tab-change', tab.name, this.activeSubTab)
        },
        handleSubTabClick(tab) {
            this.$emit('sub-tab-change', this.activeMainTab, tab.name)
        },
        getDefaultSubTab(mainTabName) {
            const mainTab = this.mainTabs.find(t => t.name === mainTabName)
            if (mainTab && mainTab.subTabs && mainTab.subTabs.length > 0) {
                return mainTab.subTabs[0].name
            }
            return ''
        },
        hasSubTabs(tab) {
            return Boolean(tab && tab.subTabs && tab.subTabs.length > 0)
        },
        hasSections(sections) {
            return Array.isArray(sections) && sections.length > 0
        },
        hasTable(rows) {
            return Array.isArray(rows) && rows.length > 0
        },
        hasScoreRange(section) {
            return Boolean(section && section.hasScoreRange)
        },
        formatPlainText(text) {
            if (!text) {
                return '--'
            }
            return text.replace(/\n/g, '<br/>')
        },
        formatScoreRange(row) {
            if (!row) {
                return '--'
            }
            if (row.scoreRange !== undefined && row.scoreRange !== null && row.scoreRange !== '') {
                return row.scoreRange
            }
            const hasMin = row.minScore !== undefined && row.minScore !== null && row.minScore !== ''
            const hasMax = row.maxScore !== undefined && row.maxScore !== null && row.maxScore !== ''
            if (hasMin && hasMax) {
                return `${row.minScore} ~ ${row.maxScore}`
            }
            if (hasMin) {
                return `${row.minScore}`
            }
            if (hasMax) {
                return `${row.maxScore}`
            }
            return '--'
        }
    }
}
</script>

<style scoped lang="scss">
.analysis-result-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;

    .panel-header {
        padding: 16px 20px;
        border-bottom: 1px solid #EBEEF5;
        background: #fff;

        h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            color: #303133;
        }
    }

    .panel-content {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        ::v-deep .main-tabs {
            height: 100%;
            display: flex;
            flex-direction: column;

            .el-tabs__header {
                margin: 0;
                padding: 12px 20px;
                border-bottom: 1px solid #EBEEF5;
                background: #F5F7FA;
                border-radius: 0;
            }

            .el-tabs__nav-wrap {
                &::after {
                    display: none;
                }
            }

            .el-tabs__nav {
                border: none;
                display: flex;
                align-items: center;
                gap: 0;
            }

            .el-tabs__item {
                height: 36px;
                line-height: 36px;
                padding: 0 20px;
                font-size: 14px;
                color: #606266;
                background: #FFFFFF;
                border: none;
                border-radius: 0;
                margin-right: 0;
                position: relative;
                transition: all 0.3s ease;
                cursor: pointer;
                box-shadow: none;

                // 第一个标签左圆角
                &:first-child {
                    border-top-left-radius: 6px;
                    border-bottom-left-radius: 6px;
                }

                // 最后一个标签右圆角
                &:last-child {
                    border-top-right-radius: 6px;
                    border-bottom-right-radius: 6px;
                }

                // 激活状态：蓝色背景 + 白色文字
                &.is-active {
                    color: #FFFFFF;
                    background: #1F72EA;
                    font-weight: 500;
                    z-index: 1;

                    // 激活标签的左侧圆角（如果是第一个，已经有圆角了）
                    &:not(:first-child) {
                        border-top-left-radius: 6px;
                        border-bottom-left-radius: 6px;
                    }

                    // 激活标签的右侧保持直边（除非是最后一个）
                    &:not(:last-child) {
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                }

                // 非激活状态：白色背景 + 深色文字
                &:not(.is-active) {
                    background: #FFFFFF;
                    color: #606266;

                    &:hover {
                        background: #F0F4FF;
                        color: #1F72EA;
                    }
                }
            }

            .el-tabs__content {
                flex: 1;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                padding: 0;
            }

            .el-tab-pane {
                height: 100%;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }
        }

        ::v-deep .sub-tabs {
            height: 100%;
            display: flex;
            flex-direction: column;

            .el-tabs__header {
                margin: 0;
                // padding: 0 20px;
                border-bottom: 1px solid #EBEEF5;
                background: #FFFFFF;
            }

            .el-tabs__nav-wrap {
                &::after {
                    display: none;
                }
            }

            .el-tabs__nav {
                border: none;
            }

            .el-tabs__item {
                height: 44px;
                line-height: 44px;
                padding: 0 20px;
                font-size: 14px;
                color: #606266;
                background: transparent;
                border: none;
                border-bottom: none !important;
                border-radius: 0;
                margin-right: 0;
                position: relative;
                transition: all 0.3s ease;
                cursor: pointer;

                // 激活状态：蓝色文字 + 蓝色下划线
                &.is-active {
                    color: #1F72EA;
                    font-weight: 500;
                    background: transparent;
                    border-bottom: none !important;

                    // 蓝色下划线，稍微超出文字宽度
                    &::after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                        height: 2px;
                        background: #1F72EA;
                    }
                }

                // 非激活状态：深灰色文字
                &:not(.is-active) {
                    color: #606266;
                    background: transparent;
                    border-bottom: none !important;

                    &:hover {
                        color: #1F72EA;
                    }
                }
            }

            .el-tabs__content {
                flex: 1;
                overflow-y: auto;
                overflow-x: hidden;
                padding: 20px 0;
            }

            .el-tab-pane {
                height: 100%;
            }
        }

        .tab-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 20px;

            .empty-content {
                text-align: center;
                color: #909399;
                padding: 40px 0;
            }
        }
    }
}

.content-section {
    margin-bottom: 24px;

    &:last-child {
        margin-bottom: 0;
    }

    .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 12px;
    }

    .section-content {
        font-size: 14px;
        color: #606266;
        line-height: 1.8;
        white-space: normal;
        word-break: break-word;
        background: #F5F7FA;
        padding: 16px;
        border-radius: 4px;

        &.html-content {
            white-space: normal;
            background: #FFFFFF;
            border: 1px solid #EBEEF5;
        }
    }

    .section-table {
        width: 100%;
        border: 1px solid #EBEEF5;
        border-collapse: collapse;
        font-size: 14px;
        background: #FFFFFF;

        th,
        td {
            border: 1px solid #EBEEF5;
            padding: 12px 16px;
            text-align: left;
            vertical-align: top;
        }

        th {
            background: #FAFBFF;
            color: #909399;
            font-weight: 500;
        }

        .cell-title {
            width: 180px;
            color: #303133;
            font-weight: 500;
        }

        .cell-value {
            color: #606266;
            word-break: break-word;
        }

        .cell-score {
            width: 140px;
            color: #303133;
            text-align: center;
            white-space: nowrap;
        }
    }
}
</style>
