<script setup>
definePage({
  layout: 'PageLayout',
  style: {
    navigationBarTitleText: '帮助中心',
    navigationStyle: 'default',
  },
})

import { ref } from 'vue'

const activeTab = ref(0)

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: [],
  },
]

function goToDetail(id, type) {
  if (type === 'guide') {
    uni.navigateTo({ url: `/pages/help/guide?id=${encodeURIComponent(id)}` })
  } else {
    uni.navigateTo({ url: `/pages/help/detail?id=${encodeURIComponent(id)}` })
  }
}
</script>

<template>
  <view class="help-center min-h-screen bg-gray-100">
    <wd-tabs v-model="activeTab" sticky>
      <wd-tab v-for="(category, index) in categories" :key="index" :title="category.title">
        <view class="help-list p-4">
          <view
            v-for="item in category.items"
            :key="item.id"
            class="help-item flex items-center justify-between py-4 px-4 bg-white rounded-lg mb-2 shadow-sm"
            @click="goToDetail(item.id, item.type)"
          >
            <view class="flex items-center">
              <text class="text-base text-gray-800">{{ item.title }}</text>
              <wd-tag v-if="item.type === 'guide'" type="primary" size="small" class="ml-2">引导指南</wd-tag>
            </view>
            <wd-icon name="arrow-right" />
          </view>
        </view>
      </wd-tab>
    </wd-tabs>
  </view>
</template>

<style scoped>
.help-center {
  padding-bottom: 20px;
}
</style>
