<template>
    <div class="help-center">
        <van-tabs v-model:active="activeTab" sticky :offset-top="46">
            <van-tab v-for="(category, index) in categories" :key="index" :title="category.title" :name="category.name">
                <van-cell-group inset class="help-list" size="large">
                    <van-cell v-for="item in category.items" :key="item.id" :title="item.title" is-link
                        @click="goToDetail(item.id, item.type)" class="help-item">
                        <template #label>
                            <van-tag v-if="item.type === 'guide'" type="primary" size="small"
                                class="guide-tag" style="background-color: var(--van-theme-primary); color: white;">引导指南</van-tag>
                        </template>
                    </van-cell>
                </van-cell-group>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeTab = ref('report')

const categories = [
    {
        title: '推广报告',
        name: 'report',
        items: [
            { id: 'report_guide', title: '直推报告页面引导', type: 'guide' },
            { id: 'invite_guide', title: '邀请下级页面引导', type: 'guide' },
            { id: 'direct_earnings', title: '如何成为天远数据代理' },
            { id: 'report_push', title: '如何推广报告' },
            { id: 'report_calculation', title: '推广报告的收益是如何计算的?' },
            { id: 'report_cost', title: '推广报告的成本是如何计算的？' },
            { id: 'report_efficiency', title: '报告推广效率飙升指南' },
            { id: 'report_secret', title: '报告推广秘籍大公开' },
            { id: 'report_types', title: '天远数据有哪些大数据报告类型' },
        ]
    },
    {
        title: '邀请下级',
        name: 'invite',
        items: [
            { id: 'invite_earnings', title: '邀请下级赚取收益' }
        ]
    },
    {
        title: '其他',
        name: 'other',
        items: [
            { id: 'vip_guide', title: '如何成为VIP代理和SVIP代理?' }
        ]
    }
]

const goToDetail = (id, type) => {
    if (type === 'guide') {
        router.push({
            path: '/help/guide',
            query: { id }
        })
    } else {
        router.push({
            path: '/help/detail',
            query: { id }
        })
    }
}

</script>

<style lang="scss" scoped>
.help-center {
    min-height: 100vh;
    background-color: #f7f8fa;

    .help-list {
        margin-top: 12px;

        .guide-tag {
            margin-top: 4px;
        }
    }

    :deep(.help-item) {
        .van-cell__title {
            font-size: 16px;
        }
    }
}

.help-detail {
    padding: 20px;

    &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        h3 {
            margin: 0;
            font-size: 18px;
        }
    }

    &-content {
        white-space: pre-line;
        line-height: 1.6;
        color: #666;
    }
}
</style>