<template>
  <view class="splash-page">
    <swiper
      class="swiper"
      circular
      :indicator-dots="false"
      :autoplay="true"
      interval="3000"
      duration="400"
      :current="curStep"
      @change="
        (event) => {
          curStep = event.detail.current;
        }
      "
    >
      <swiper-item class="swiper-item">
        <image
          src="https://puton.huimeimeta.com/imgs/splash1.png"
          mode="widthFix"
          class="splash-img"
        ></image>

        <view class="text-box">
          <view class="text-title">专业全维度风格诊断</view>
          <view>让您科学变美</view>
          <view>包含：基因风格、心里风格、四季色彩季型、发型</view>
        </view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <image
          src="https://puton.huimeimeta.com/imgs/splash2.png"
          mode="widthFix"
          class="splash-img"
        ></image>

        <view class="text-box">
          <view class="text-title">个人在线衣橱管理工具</view>
          <view>My衣橱管家</view>
        </view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <image
          src="https://puton.huimeimeta.com/imgs/splash3.png"
          mode="widthFix"
          class="splash-img"
        ></image>

        <view class="text-box">
          <view class="text-title">【美搭】可视化智慧穿搭</view>
          <view>可实现发型、上衣、下衣、外套、连衣裙、套装试穿</view>
        </view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <image
          src="https://puton.huimeimeta.com/imgs/splash4.png"
          mode="widthFix"
          class="splash-img"
        ></image>

        <view class="text-box">
          <view class="text-title">【美搭】可视化智慧穿搭SSS+系统</view>
          <view>个人形象服务私域运营工具</view>
          <view>适用：各类提供穿搭服务和服装离店营销创景</view>
        </view>
      </swiper-item>
    </swiper>

    <view class="step-box">
      <view
        :class="['step-item', curStep === item - 1 ? 'curStep' : '']"
        v-for="item in 4"
        :key="item"
      />
    </view>

    <view class="arrow-box" @click="jumpPage">
      <image src="https://puton.huimeimeta.com/imgs/splash-arrow.png" class="arrow-img"></image>
    </view>
  </view>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import sheep from '@/sheep';

  const isLogin = computed(() => sheep.$store('user').isLogin);

  const curStep = ref(0);

  const jumpPage = () => {
    if (!isLogin.value) {
      uni.redirectTo({ url: '/pages/login/index' });
    } else if (curStep.value === 0) {
      sheep.$router.go('/pages/index/index');
    } else {
      sheep.$router.go('/pages/index/room');
    }
  };
</script>

<style lang="scss" scoped>
  .splash-page {
    width: 100%;
    height: 100%;
    background: #000;

    .swiper {
      width: 100%;
      height: 100%;

      .swiper-item {
        width: 100%;
        height: 100%;
        position: relative;

        .splash-img {
          width: 100%;
          height: 1332rpx;
        }

        .text-box {
          width: 100%;
          text-align: center;
          color: #fff;
          position: absolute;
          left: calc(50%);
          bottom: 180px;
          transform: translateX(-50%);
          font-size: 14px;
          line-height: 24px;

          .text-title {
            font-size: 16px;
          }
        }
      }
    }

    .step-box {
      width: 708rpx;
      height: 2rpx;
      position: absolute;
      left: calc(50% - 354rpx);
      bottom: 160px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .step-item {
        width: 172rpx;
        height: 2rpx;
        background: #fff;

        &.curStep {
          background: $purple;
        }
      }
    }

    .arrow-box {
      width: 100%;
      height: 160px;
      position: absolute;
      left: 0;
      bottom: 0;

      .arrow-img {
        width: 30px;
        height: 28px;
        position: absolute;
        left: calc(50% - 15px);
        top: calc(50% - 14px);
      }
    }
  }
</style>
