<script setup>
definePage({
  layout: 'PageLayout',
  style: {
    navigationBarTitleText: '引导指南',
    navigationStyle: 'default',
  },
})

import { ref, computed, onMounted } from 'vue'

const currentStepIndex = ref(0)

const guideSteps = {
  report_guide: [
    { title: '第一步：进入直推报告页面', image: '/static/help/report-step1.jpg' },
    { title: '第二步：选择报告类型', image: '/static/help/report-step2.jpg' },
    { title: '第三步：填写推广信息', image: '/static/help/report-step3.jpg' },
    { title: '第四步：完成推广', image: '/static/help/report-step4.jpg' },
  ],
  invite_guide: [
    { title: '第一步：进入邀请页面', image: '/static/help/invite-step1.jpg' },
    { title: '第二步：获取邀请码', image: '/static/help/invite-step2.jpg' },
    { title: '第三步：分享邀请链接', image: '/static/help/invite-step3.jpg' },
  ],
}

const guideId = ref('')
const currentGuide = computed(() => guideSteps[guideId.value] || [])
const totalSteps = computed(() => currentGuide.value.length)
const currentStep = computed(() => currentGuide.value[currentStepIndex.value] || {})

function handleImageClick() {
  if (currentStepIndex.value < totalSteps.value - 1) {
    currentStepIndex.value++
  } else {
    uni.navigateBack()
  }
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  guideId.value = page?.options?.id || ''
  if (!guideSteps[guideId.value]) uni.navigateBack()
})
</script>

<template>
  <view class="help-guide min-h-screen bg-white p-4">
    <view class="guide-content" @click="handleImageClick">
      <image v-if="currentStep.image" :src="currentStep.image" class="w-full rounded-lg block" mode="widthFix" />
      <view v-if="currentStep.title" class="text-center mt-4 text-gray-700">{{ currentStep.title }}</view>
    </view>
  </view>
</template>
