<script lang="ts" setup>
import {useConfigStore, useUserStore} from "@/store";

const userStore = useUserStore();
const configStore = useConfigStore()
const {t} = useI18n();

const next = () => {
  configStore.isShowedGuidePage = true
  uni.switchTab({
    url: '/pages/home/index'
  })
};
</script>

<template>
  <view class="bg-white flex flex-col">
    <!-- 主要内容区域 -->
    <view
        class="flex-1 flex flex-col items-center justify-center px-40rpx pt-216rpx pb-120rpx"
    >
      <!-- 图标 -->
      <image
          class="w-256rpx h-256rpx rounded-full"
          src="@img-login/100220.png"
      />

      <!-- 标题 -->
      <view class="text-center mt-84rpx">
        <text class="text-50-bold mr-4rpx">{{ t('pages-login.guide-page.welcome.title') }},</text>
        <text>{{ userStore.userInfo.firstName }} {{ userStore.userInfo.surname }}</text>
      </view>

      <!-- 描述文本 -->
      <view class="text-center mt-36rpx mb-113rpx">
        <text class="text-30rpx lh-30rpx text-#999 leading-30rpx">
          {{ t('pages-login.guide-page.welcome.description') }}
        </text>
      </view>

      <!-- 主要按钮 -->
      <view class="w-full">
        <button
            class="w-full h-108rpx bg-#14181B rounded-16rpx border-none"
            @click="next"
        >
          <text class="text-white text-36rpx lh-108rpx"
          >{{ t('pages-login.guide-page.welcome.next') }}
          </text
          >
        </button>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #ffffff;
}
</style>
