<template>
  <view class="first-deposit-body">
    <Header :title="$t('promo.header.firstDeposit')"></Header>
    <view
      class="first-deposit-content"
      :style="{ height: `calc(100vh - ${appStore.headerStyle.height}px)` }"
    >
      <view class="activity-award">
        <view class="activity-award-title"
          >{{ $t("promo.public.activityAward") }}:</view
        >
        <view class="activity-award-content">
          <view class="activity-award-content-item">
            <view class="depoist-amoout">{{
              $t("promo.public.depoistAmoout")
            }}</view>
            <view class="reward-amoout">{{
              $t("promo.public.rewardAmoout")
            }}</view>
          </view>
          <view
            class="activity-award-content-item"
            v-for="(item, index) in promoStore.firstdepositList"
          >
            <view class="depoist-amoout">≥{{ item.amount }}</view>
            <view class="reward-amoout">{{ item.reward }}</view>
          </view>
        </view>
      </view>
      <view class="plr30">
        <Rules :list="firstDepositRules"></Rules>
      </view>
    </view>
  </view>
</template>

<script setup>
import Header from "@/pages/account/components/Header/Header.vue"
import Rules from "@/pages/promo/components/Rules.vue"
import { firstDepositTable, firstDepositRules } from "@/pages/promo/constants/index.js"
import { usePromoStore } from "@/store/usePromoStore"
import { useAppStore } from '@/store/useAppStore.js'

const appStore = useAppStore()
const promoStore = usePromoStore()
</script>

<style lang="scss" scoped>
.first-deposit-body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #2c0303;
  .first-deposit-content {
    width: 100%;
    overflow-y: auto;
    background: #610606;
  }
  .activity-award {
    margin-top: 10rpx;
    width: 100%;
    box-sizing: border-box;
    padding-top: 35rpx;

    .activity-award-title {
      width: 100%;
      box-sizing: border-box;
      padding-left: 35rpx;
      color: #fff;
      font-size: 30rpx;
    }
    .activity-award-content {
      width: 100%;
      box-sizing: border-box;
      padding: 0 30rpx;
      margin-top: 31rpx;
      .activity-award-content-item {
        width: 100%;
        margin-bottom: 10rpx;
        background: #8d120e;
        border-radius: 20rpx;
        display: flex;
        height: 62rpx;
        justify-content: flex-start;
        text-align: center;
        line-height: 62rpx;
        .depoist-amoout {
          width: 50%;
          font-size: 28rpx;
          color: #ffffff;
        }
        .reward-amoout {
          width: 50%;
          font-size: 28rpx;
          color: #f8eb59;
        }
      }
    }
  }
}
</style>
