<template>
    <view class="invite-wrap" :class="[`${themeInfo.theme}-theme`]">
		<navBar></navBar>
        <view class="top-wrap">
            <view class="text">{{ $t("invite.title1") }} <br> {{ $t("invite.title2") }}</view>
            <uv-icon class="right-icon" name="present" custom-prefix="custom-icon" size="30" color="#FFFFFF"></uv-icon>
        </view>
        <view class="activity-wrap" v-for="item in state.activityList" :key="item.id">
            <view class="top">
                <view class="name-wrap">
                    <view class="dot"></view>
                    <view class="name">{{ item.name }}</view>
                </view>
                <view class="right">{{ $t("invite.number") }} 0/2</view>
            </view>
            <view class="content">
                <view class="item">
                    <view class="label">{{ $t("invite.activity") }}: {{ item.mechanism }}</view>
                    <view class="label">{{ $t("invite.branch") }}: {{ item.branch }}</view>
                    <view class="label">{{ $t("invite.details") }}: {{ item.details }}</view>
                </view>
            </view>
            <view class="bottom">
                <view class="invite-btn">{{ $t("invite.toInvite") }}</view>
                <view class="record">{{ $t("invite.record") }}>></view>
            </view>
        </view>
        <view class="disclaimer1">{{ $t("invite.disclaimer") }}</view>
        <view class="disclaimer2">{{ $t("invite.disContent") }}</view>
        <image class="bottom-bg" src="@/static/personal/bottom-bg.png" mode="widthFix"></image>
    </view>
</template>

<script setup>
    // 主题色配置
    import { useMainStore } from "@/store/index.js";
	const { themeInfo } = useMainStore();
	import navBar from '@/components/navBar.vue';

    import { reactive } from "vue";
    const state = reactive({
        activityList: [
            { id: 33, name: "活动名称1", mechanism: "WInvite X friends to follow and register official account to get promotion coupon for storage rental.", branch: "ALL shops", details: 28008800, number: 1 },
            { id:2, name: "活动名称2", mechanism: "", branch: "ALL shops", details: 28008800, number: 1 },
        ]
    })
    
</script>

<style lang="scss" scoped>
    .invite-wrap {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 40rpx;
        background: linear-gradient(to bottom, var(--right-linear), var(--left-linear));

        .top-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-top: 40rpx;
            color: #FFFFFF;
            border-radius: 20rpx;
            padding: 30rpx 40rpx;
            background: linear-gradient(to bottom, var(--left-linear), var(--right-linear));

            .text {
                font-size: 40rpx;
                font-weight: bold;
                margin-right: 60rpx;
            }

            .right-icon {
                margin: 0 20rpx;
            }
        }

        .activity-wrap {
            width: 100%;
            border-radius: 16rpx;
            margin-top: 40rpx;
            background-color: #FFFFFF;
            overflow: hidden;

            .top {
                padding: 0 20rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #F6F6F6;
                height: 80rpx;
                .name-wrap {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .dot {
                        width: 12rpx;
                        height: 12rpx;
                        border-radius: 50%;
                        margin-right: 18rpx;
                        background: var(--active-color);
                    }
                }
                .right {
                    font-size: 26rpx;
                }
            }

            .content {
                padding: 20rpx 20rpx 20rpx 50rpx;
                font-size: 30rpx;
            }

            .bottom {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 40rpx 20rpx 20rpx 50rpx;
                .invite-btn {
                    color: var(--text-color);
                    border-radius: 30rpx;
                    padding: 8rpx 30rpx;
                    font-size: 26rpx;
                    background: var(--active-color);
                }
                .record {
                    font-size: 24rpx;
                }
            }
        }

        .bottom-bg {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
        }

        .disclaimer1,
        .disclaimer2 {
            font-size: 28rpx ;
            align-self: flex-start;
            color: var(--text-color);
        }
        .disclaimer1 {
            margin-top: 40rpx;
        }
        .disclaimer2 {
            margin-left: 20rpx;
            padding-bottom: 60px;
        }
    }
</style>