<template>
	<common-layout :bgColor="themeStore.theme.bgColor">
		<mobile-header>
			<template #title>
				<view class="flex-scenter flex-acenter">
					<view class="promo-header-center" :style="{ 'background': themeStore.theme.tabsRound.bgColor }">
						<view class="promo-header-center-item"
							:style="{ 'background': headerActive == 0 ? themeStore.theme.tabsRound.selectBgColor : '', 'color': headerActive == 0 ? themeStore.theme.tabsRound.selectTextColor : themeStore.theme.tabsRound.textColor }"
							@click="headerActiveClick(0)">{{ $t('promo.header.promo') }}</view>
						<view class="promo-header-center-item"
							:style="{ 'background': headerActive == 1 ? themeStore.theme.tabsRound.selectBgColor : '', 'color': headerActive == 1 ? themeStore.theme.tabsRound.selectTextColor : themeStore.theme.tabsRound.textColor }"
							@click="headerActiveClick(1)">{{ $t('promo.header.community') }}</view>
					</view>
				</view>
			</template>
			<template #right>
				<theme-image src="@/static/dh-icon.png" v-if="headerActive == 0" class="exchange-image"
					@click="exchangeClick" mode="object-fit"></theme-image>
			</template>
		</mobile-header>
		<view class="promo-body" :style="{ paddingTop: appStore.headerStyle.height + 'px' }">
			<PromoList @changeActive="headerActiveClick" v-show="headerActive == 0"></PromoList>
			<Community v-show="headerActive == 1"></Community>
		</view>

		<!-- 兑换输入弹窗 -->
		<view v-if="exchangeVisible">
			<NormalPopupView @close="() => exchangeVisible = false">
				<view class="exchange-popup-form">
					<view class="exchange-popup-form-title pt30" :style="{ color: themeStore.theme.text.normal }">
						{{ $t('promo.header.promoCode') }}
					</view>
					<view class="mt40">
						<NormalInput v-model="pageData.promoCode" :placeholder="$t('promo.promoCodePlaceholder')" />
					</view>
					<view style="height: 1rpx;" :style="{ 'background': themeStore.theme.darkSeplineColor }"></view>
					<view class="flex-scenter pb30 mt40">
						<view class="config-btn"
							:style="{ 'background': themeStore.theme.button.normal, 'color': themeStore.theme.button.textNormal }"
							@click.stop="exchangeSubmit">{{ $t('promo.button.confirm') }}</view>
					</view>
				</view>
			</NormalPopupView>
		</view>
		<view v-if="exchangeSuccessVisible">
			<view class="popup-view">
				<view class="popup-content">
					<theme-image src="@/static/promo/tk-bg.png" style="width: 100%; height: 100%;" />
					<view class="popup-info-view flex-column flex-acenter">
						<view style="color: #F4FA87; font-size: 48rpx; padding-top: 250rpx;">
							{{ pageData.exchangeName }}
						</view>
						<view class="flex"
							style="color: #7D522E; font-weight: bold; margin-top: 110rpx; align-items: flex-end; vertical-align: bottom; line-height: 1;">
							<view style="font-size: 36rpx; line-height: 50rpx;">
								Cash
							</view>
							<view class="ml16" style="font-size: 80rpx;">
								+{{ pageData.exchangeCash }}
							</view>
						</view>
						<view class="confirm-btn"
								:style="{ 'background-image': themeStore.imageCssUrl.promoButton }"
								@click.stop="handleSuccessConfirmClick">
								Confirm
							</view>
						<!-- <view class="flex flex-center">
							<view class="confirm-btn"
								:style="{ 'background-image': themeStore.imageCssUrl.promoButton }"
								@click.stop="handleSuccessConfirmClick">
								Confirm
							</view>
							<view class="confirm-btn"
								:style="{ 'background-image': themeStore.imageCssUrl.promoButton }"
								@click.stop="handleSuccessConfirmClick">
								Confirm
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<custom-tabbar :selected="1" />
	</common-layout>
</template>

<script setup>
import MobileFooter from '@/components/footer/MobileFooter.vue';
import Community from '@/pages/promo/components/Community.vue';
import PromoList from '@/pages/promo/components/PromoList.vue';
import NormalPopupView from '@/components/popup/NormalPopupView.vue'
import NormalInput from '@/components/input/NormalInput.vue'
import { ref, onMounted, reactive } from 'vue';
import { exchangeApi, getBetRankDataApi } from '@/api/promo.js';
import Toast from '@/module/toast/toast.js';
import { useAppStore } from '@/store/useAppStore';
import { useThemeStore } from '@/store/useThemeStore';
import { usePromoStore } from '@/store/usePromoStore'
import { onLoad, onShow } from '@dcloudio/uni-app';

const themeStore = useThemeStore()
const appStore = useAppStore()
const promoStore = usePromoStore()

let headerActive = ref(0);
let exchangeVisible = ref(false);
let exchangeSuccessVisible = ref(false)

const pageData = reactive({
	exchangeName: 'SUCCESS',
	exchangeCash: 0,
	promoCode: ''
})
onLoad(() => {
	uni.hideTabBar();
})
onShow(() => {
	loadData()
})

const loadData = async () => {
	await promoStore.getPromoList()
}

/**
 * 顶部切换
 */
const headerActiveClick = (value) => {
	headerActive.value = value;
};
/**
 * 点击兑换 弹出兑换输入框
 */
const exchangeClick = () => {
	pageData.promoCode = ''
	exchangeVisible.value = true;
};
/**
 * 关闭兑换弹出框
 */
const closeExchangePopup = () => {
	exchangeVisible.value = false;
};
/**
 * 兑换
 */
const exchangeSubmit = async () => {
	Toast.showLoading('Loading')
	const { code, data } = await exchangeApi({
		code: pageData.promoCode
	});
	Toast.hideLoading()
	if (code == 200) {
		exchangeVisible.value = false;
		pageData.exchangeCash = data || 0
		exchangeSuccessVisible.value = true
	}
};

const handleSuccessConfirmClick = () => {
	exchangeSuccessVisible.value = false
}
</script>

<style lang="scss" scoped>
.popup-view {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;

	.popup-content {
		position: relative;
		width: 670rpx;
		height: 900rpx;
		padding-bottom: 120rpx;

		.bg-img {
			width: 100%;
			height: 100%;
		}

		.popup-info-view {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
		}

		.confirm-btn {
			margin-top: 140rpx;
			width: 400rpx;
			height: 96rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			color: #6A1E00;
			font-weight: bold;
			font-size: 36rpx;
			line-height: 96rpx;
			text-align: center;
		}
	}
}


.exchange-image {
	width: 54rpx;
	height: 48rpx;
}


.promo-header-center {
	width: 460rpx;
	height: 60rpx;
	background: #410505;
	border-radius: 30rpx;
	display: flex;
	justify-content: flex-start;

	.promo-header-center-item {
		font-size: 30rpx;
		color: #e7ffff;
		width: 50%;
		line-height: 60rpx;
		text-align: center;
		border-radius: 32rpx;
	}
}


.promo-body {
	width: 100vw;
}

.exchange-popup-form {
	box-sizing: border-box;

	.exchange-popup-form-title {
		width: 100%;
		text-align: center;
		color: #fff;
		font-size: 36rpx;
	}

	.config-btn {
		width: 222rpx;
		height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		color: #fff;
		line-height: 80rpx;
		font-size: 32rpx;
	}
}
</style>
