<template>
	<view class="home-download-app-container relative flex row-center"
		:style="{ 'background': `left / cover no-repeat ${themeStore.imageCssUrl.downloadAppBg}` }">
		<view class="flex-column flex-center pos-absolute slogan-center">
			<!-- <view class="app-name">
				{{ $t('home.downloadSlogan') }}
			</view>
			<view class="app-award">
				{{ $t('home.award') }}₹10-17
			</view> -->
			<theme-image src="@/static/home/top_wz1.png" class="slogan-img" mode="aspectFit"></theme-image>
			<theme-image src="@/static/home/top_wz2.png" class="award-img" mode="aspectFit"></theme-image>
		</view>
		<view class="download-btn flex col-center">
			<theme-image src="@/static/home/dw_btn.png" class="download-btn-icon"
				@click.stop="handleDownloadClick"></theme-image>
			<theme-image src="@/static/home/dw_close.png" class="close-btn"
				@click.stop="handleCloseClick"></theme-image>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue'
import GlobalConfig from '@/config/global.config.js'
import { useAppStore } from '@/store/useAppStore'
import { openUrl } from '@/module/utils/openUrl.js'
import { useThemeStore } from '@/store/useThemeStore'
import { saveUinfoApi } from '@/api/account'

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

const handleCloseClick = () => {
	appStore.appDownloadHomeVisible = false
}

// #ifdef H5
const handleDownloadClick = () => {
	const params = {
		uniKey: '',
		fbc: '',
		fbp: '',
		channel: appStore.channelId,
		h5No: appStore.h5No,
		referralCode: '',
		appId: appStore.appId,
		mcId: appStore.mcId,
	}
	saveUinfoApi(params)
	const a = document.createElement('a')
	a.setAttribute('download', import.meta.env.VITE_APP_NAME + '.apk')
	a.href = appStore.appDownloadUrl
	a.click()
	a.remove()
}
// #endif
</script>

<style lang="scss" scoped>
.home-download-app-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 96rpx;

	.slogan-center {
		font-size: 12px;
		width: 260rpx;
		left: 212rpx;

		.slogan-img {
			width: 240rpx;
			height: 41rpx;
		}

		.award-img {
			width: 125rpx;
			height: 19rpx;
			margin-top: 10rpx;
		}
	}

	.app-logo {
		width: 30px;
		height: 30px
	}

	.app-name {
		font-weight: bold;
		font-size: 12px;
		color: #FFFFFF;
	}

	.app-award {
		font-weight: bold;
		font-size: 24rpx;
		color: #FFBE00;
	}

	.download-btn {
		position: absolute;
		right: 29rpx;

		.download-btn-icon {
			width: 165rpx;
			height: 58rpx;
			margin-right: 26rpx;
		}

		.close-btn {
			width: 34rpx;
			height: 34rpx;
		}
	}
}
</style>