<template>
  <transition name="guide-fade">
    <div class="new-user-guide-mask" v-if="visible">
      <!-- 跳过按钮 -->
      <div class="guide-skip" @click="handleSkip">跳过</div>

      <!-- 步骤指示器（动态自适应已注册步骤数） -->
      <div class="guide-steps-indicator">
        <span
          v-for="i in totalSteps"
          :key="i"
          class="step-dot"
          :class="{ active: i === currentStep, done: i < currentStep }"
          @click="handleDotClick(i)"
          :title="'第 ' + i + ' 步'"
        ></span>
      </div>

      <!-- 动态渲染当前步骤组件 -->
      <div class="guide-content-wrapper" @click.self="handleMaskClick">
        <transition name="guide-step" mode="out-in">
          <component
            :is="currentComponent"
            :key="currentStep"
            :isLast="isLastStep"
            :isFirst="isFirstStep"
            @next="goNext"
            @prev="goPrev"
          />
        </transition>
      </div>
    </div>
  </transition>
</template>

<script>
import WelcomeGuide from './steps/WelcomeGuide.vue'
import SignInGuide from './steps/SignInGuide.vue'
import PointsMallGuide from './steps/PointsMallGuide.vue'
import ActivityGuide from './steps/ActivityGuide.vue'
import EarnPointsGuide from './steps/EarnPointsGuide.vue'
import ProfileGuide from './steps/ProfileGuide.vue'
import ExchangeGuide from './steps/ExchangeGuide.vue'
import CouponGuide from './steps/CouponGuide.vue'
import RewardGuide from './steps/RewardGuide.vue'

/**
 * 步骤组件注册表
 * 新增步骤只需：1. 创建组件文件  2. 在此数组末尾追加  3. 组件需接收 isLast prop 并 emit('next')
 */
const stepComponents = [
  WelcomeGuide,      // Step 1 — 欢迎来到誉商城
  SignInGuide,       // Step 2 — 每日签到
  PointsMallGuide,   // Step 3 — 积分商城
  ActivityGuide,     // Step 4 — 参与活动
  EarnPointsGuide,   // Step 5 — 完成任务
  ProfileGuide,      // Step 6 — 个人中心：我的积分
  ExchangeGuide,     // Step 7 — 个人中心：我的兑换
  CouponGuide,       // Step 8 — 个人中心：礼品券兑换
  RewardGuide,       // Step 9 — 引导完成领奖
]

export default {
  name: 'NewUserGuide',
  // 动态注册所有步骤组件
  components: stepComponents.reduce((acc, comp) => {
    acc[comp.name] = comp
    return acc
  }, {}),
  data() {
    return {
      visible: false,
      currentStep: 1,
      totalSteps: stepComponents.length,
      steps: stepComponents,
    }
  },
  computed: {
    /** 当前是否为第一步 */
    isFirstStep() {
      return this.currentStep === 1
    },
    /** 当前是否为最后一步 */
    isLastStep() {
      return this.currentStep === this.totalSteps
    },
    /** 当前步骤组件 */
    currentComponent() {
      return this.steps[this.currentStep - 1]
    },
  },
  methods: {
    /** 显示引导（可由外部调用） */
    show() {
      this.visible = true
      this.currentStep = 1
      this.totalSteps = this.steps.length
    },

    /** 下一步 */
    goNext() {
      if (this.currentStep < this.totalSteps) {
        this.currentStep++
      } else {
        this.handleFinish()
      }
    },

    /** 上一步 */
    goPrev() {
      if (this.currentStep > 1) {
        this.currentStep--
      }
    },

    /** 点击步骤圆点跳转（允许回到已访问步骤或下一个步骤） */
    handleDotClick(step) {
      if (step === this.currentStep) return
      if (step < this.currentStep || step === this.currentStep + 1) {
        this.currentStep = step
      }
    },

    /** 点击蒙层（Step1 可忽略，其他步骤弹确认） */
    handleMaskClick() {
      if (this.currentStep === 1) return
      this.handleSkip()
    },

    /** 跳过引导 */
    handleSkip() {
      const mask = this.$el
      if (mask) mask.style.zIndex = '1000'
      this.$confirm(
        '跳过引导将错过新手积分奖励，确定跳过？',
        '跳过引导',
        {
          confirmButtonText: '确定跳过',
          cancelButtonText: '继续引导',
          type: 'warning',
          customClass: 'guide-skip-confirm',
        }
      )
        .then(() => {
          if (mask) mask.style.zIndex = ''
          this.handleFinish()
        })
        .catch(() => {
          if (mask) mask.style.zIndex = ''
        })
    },

    /** 完成引导 */
    handleFinish() {
      this.visible = false
      this.$emit('finish')
    },
  },
}
</script>

<style scoped>
.new-user-guide-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3000;
  background-color: rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 跳过按钮 */
.guide-skip {
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.25s;
  z-index: 3001;
}
.guide-skip:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
}

/* 步骤指示器 */
.guide-steps-indicator {
  display: flex;
  gap: 10px;
  margin-bottom: 32px;
}
.step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transition: all 0.3s;
  cursor: default;
}
.step-dot.done {
  background-color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}
.step-dot.done:hover {
  background-color: #fff;
  transform: scale(1.2);
}
.step-dot.active {
  width: 28px;
  border-radius: 5px;
  background-color: #2C6FBF;
}

/* 内容区域 */
.guide-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- 动画 ---- */
.guide-fade-enter-active,
.guide-fade-leave-active {
  transition: opacity 0.35s ease;
}
.guide-fade-enter,
.guide-fade-leave-to {
  opacity: 0;
}

.guide-step-enter-active,
.guide-step-leave-active {
  transition: all 0.35s ease;
}
.guide-step-enter {
  opacity: 0;
  transform: translateX(40px);
}
.guide-step-leave-to {
  opacity: 0;
  transform: translateX(-40px);
}
</style>
