<script setup>
defineProps(['data'])

const step = ref(1)

const stepLength = 4
function handlePrev() {
  if (step.value === 1) return true
  step.value--
}

function handleNext() {
  if (step.value === stepLength) return true
  step.value++
}
defineExpose({ step, handlePrev, handleNext })
</script>

<template>
  <div class="wechat-video">
    <div class="wechat-video-step" v-show="step === 1">
      <h6 class="wechat-video-step__title">第1步：请点击下图示例的“视频号”</h6>
      <img src="/wechat_video/1.png" />
    </div>
    <div class="wechat-video-step" v-show="step === 2">
      <h6 class="wechat-video-step__title">第2步：请点击下图示例的</h6>
      <img src="/wechat_video/2.png" />
    </div>
    <div class="wechat-video-step" v-show="step === 3">
      <h6 class="wechat-video-step__title">第3步：请点击下图示例的“发表视频”</h6>
      <img src="/wechat_video/3.png" />
    </div>
    <div class="wechat-video-step" v-show="step === 4">
      <h6 class="wechat-video-step__title">第4步：上传头像，维护视频号名称，勾选相关规范和隐私说明，点击“创建”</h6>
      <img src="/wechat_video/4.png" />
    </div>
  </div>
</template>

<style lang="scss">
.wechat-video {
  .wechat-video-step {
    margin-bottom: 20px;
    img {
      display: block;
      width: 375px;
      margin: 0 auto;
    }
    &__title {
      margin-bottom: 20px;
    }
  }
}
</style>
