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

import { ref, onMounted } from 'vue'

const currentHelp = ref({ title: '', image: '', images: null })

const titleMap = {
  report_calculation: '推广报告的收益是如何计算的?',
  report_efficiency: '报告推广效率飙升指南',
  report_cost: '推广报告的成本是如何计算的？',
  report_types: '全能查有哪些大数据报告类型',
  report_push: '如何推广报告',
  report_secret: '报告推广秘籍大公开',
  invite_earnings: '如何邀请下级成为代理',
  direct_earnings: '如何成为全能查代理',
}

const imageMap = {
  report_calculation: '/static/help/report-calculation.jpg',
  report_efficiency: '/static/help/report-efficiency.jpg',
  report_cost: '/static/help/report-cost.jpg',
  report_types: '/static/help/report-types.jpg',
  report_push: '/static/help/report-push.jpg',
  report_secret: ['/static/help/report-secret-1.jpg', '/static/help/report-secret-2.jpg'],
  invite_earnings: '/static/help/invite-earnings.jpg',
  direct_earnings: '/static/help/direct-earnings.jpg',
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const id = page?.options?.id || ''
  if (id && titleMap[id]) {
    currentHelp.value = {
      title: titleMap[id],
      image: Array.isArray(imageMap[id]) ? null : imageMap[id],
      images: Array.isArray(imageMap[id]) ? imageMap[id] : null,
    }
  }
})
</script>

<template>
  <view class="help-detail p-5 min-h-screen bg-white">
    <view class="text-xl font-semibold text-gray-800 mb-5">{{ currentHelp.title }}</view>
    <template v-if="Array.isArray(currentHelp.images)">
      <image v-for="(img, index) in currentHelp.images" :key="index" :src="img" class="w-full rounded-lg mb-3 block" mode="widthFix" />
    </template>
    <image v-else-if="currentHelp.image" :src="currentHelp.image" class="w-full rounded-lg block" mode="widthFix" />
  </view>
</template>
