<script setup>
import { computed } from 'vue';
import { useThemeStore } from '@/store/useThemeStore';
import { useAppStore } from '@/store/useAppStore';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

const themeStore = useThemeStore();
const appStore = useAppStore();
const dw = computed(() => themeStore.theme.depositWheel);

const textRows = [
    {
        title: t('redeposit.row1'),
        icon: 'xuhao1.png'
    },
    {
        title: t('redeposit.row2'),
        icon: 'xuhao2.png'
    },
    {
        title: t('redeposit.row3'),
        icon: 'xuhao3.png'
    },
    {
        title: t('redeposit.row4'),
        icon: 'xuhao4.png'
    },
    {
        title: t('redeposit.row5'),
        icon: 'xuhao5.png'
    },
]
const wheels = ['rulezp_01.png', 'rulezp_02.png', 'rulezp_03.png', 'rulezp_04.png']
</script>
<template>
    <mobile-custom-layout :bgColor="dw.bgColor" :headBgColor="themeStore.theme.bgColor"
        :title="$t('redeposit.myReward')">
        <view class="rule-box" :style="{ paddingTop: appStore.headerStyle.height + 'px', color: dw.light }">
            <view class="title">{{ $t('redeposit.title') }}</view>
            <view class="desc-wrap">
                <view v-for="(item, index) in textRows" :key="index" class="text-row flex items-start">
                    <theme-image :src="`@/static/deposit_wheel/${item.icon}`" class="icon-index"></theme-image>
                    <text class="desc" :style="{color: dw.light}">{{ item.title }}</text>
                </view>
                <view class="wheel-sm flex justify-between">
                    <theme-image v-for="(item, index) in wheels" :key="index" :src="`@/static/deposit_wheel/${item}`" class="icon-wheel"></theme-image>
                </view>
            </view>
        </view>
    </mobile-custom-layout>
</template>
<style lang="scss" scoped>
.rule-box {
    .title {
        font-family: Roboto;
        font-weight: 400;
        font-size: 38rpx;
        color: #FFFFFF;
        padding-top: 110rpx;
        text-align: center;
    }

    .desc-wrap {
        padding: 30rpx 40rpx;

        .text-row {
            margin-top: 20rpx;
            .icon-index{
                width: 36rpx;
                height: 36rpx;
                flex-shrink: 0;
                padding-top: 6rpx;
            }
            .desc {
                font-family: Roboto;
                font-weight: 400;
                font-size: 25rpx;
                color: #FFFFFF;
                line-height: 48rpx;
                margin-left: 20rpx;
            }
        }
        .wheel-sm{
            margin-top: 102rpx;
        }
        .icon-wheel{
            width: 136rpx;
            height: 146rpx;
        }
    }
}
</style>