<template>
	<uni-popup
		ref="popupRef"
		:round="false"
		:mask-click="false"
		mode="center"
	>
		<view class="popup-view">
			<view class="popup-content-view" :style="{ 'background': themeStore.theme.popup.bgColor }">
				<view class="ft18" style="margin-top: 30rpx;">
					{{ pageData.itemData.title || '' }}
				</view>
				<view class="flex-acenter flex-sbetween w-100p" style="margin-top: 60rpx;">
					<view class="ft14">
						{{ $t('mail.dearPlayer') }}:
					</view>
					<view class="ft12"  :style="{ 'color': themeStore.theme.text.subtitle }">
						{{ pageData.itemData.createTime || '' }}
					</view>
				</view>
				<view class="popup-content mt32 plr30 ptb30" style="border-radius: 20rpx;" :style="{ 'background': themeStore.theme.darkBgColor }">
					<!-- <scroll-view height="600rpx" style="width: 100%">
						<view class="ft12 cfff" style="word-break: break-all;">
							{{ pageData.itemData.content || '' }}
						</view>
					</scroll-view> -->
					<view class="content-text ft12" style="word-break: break-all;">
						{{ pageData.itemData.content || '' }}
					</view>
					<view v-if="pageData.itemData.attaches && pageData.itemData.attachesStatus === 0" class="item-sepline-h mt24" :style="{ 'background': themeStore.theme.darkSeplineColor }"></view>
					<view v-if="pageData.itemData.attaches && pageData.itemData.attachesStatus === 0" class="flex-acenter flex-scenter ptb30">
						<theme-image src="@/static/mail/icon-coin.png" style="width: 60rpx; height: 60rpx;"></theme-image>
						<view class="ft16 ml24" :style="{ 'color': themeStore.theme.text.highlight }">
							{{ formatFloat(JSON.parse(pageData.itemData.attaches).amount, 2) }}
						</view>
					</view>
				</view>
				<view>
					<view v-if="pageData.itemData.attaches && pageData.itemData.attachesStatus === 0" class="flex-scenter flex-acenter popup-view-btn" :style="{ 'background': themeStore.theme.button.normal }" @click.stop="handleReceiveClick">
						<view>
							{{ $t('mail.button.confirm') }}
						</view>
					</view>
					<view v-else class="flex-scenter flex-acenter popup-view-btn" :style="{ 'background': themeStore.theme.button.cancel }" @click.stop="handleDelectClick">
						<view>
							{{ $t('mail.button.delete') }}
						</view>
					</view>
				</view>
			</view>
			<theme-image class="popup-close-btn" src="@/static/mail/icon-popup-close.png" mode="aspectFit" @click.stop="hide"/>
		</view>
	</uni-popup>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	import { requestMailReceive, requestMailDel, requestMailRead } from '@/api/mail.js'
	import Toast from '@/module/toast/toast.js'
	import { formatFloat } from '@/module/formatter/data-formatter.js'
	import { useThemeStore } from '@/store/useThemeStore'
	
	const themeStore = useThemeStore()
	const emit = defineEmits(['refresh'])
	
	const pageData = reactive({
		itemData: {}
	})
	const popupRef = ref(null)
	
	const show = (item) => {
		if (!item) { return }
		if (!item.isRead) {
			requestMailRead({
				mailId: item.id
			})
			item.isRead = 1
		}
		pageData.itemData = item
		popupRef.value.open()
	}
	
	const hide = () => {
		popupRef.value.close()
	}
	
	const handleReceiveClick = async () => {
		Toast.showLoading('Loading')
		const { code, data } = await requestMailReceive({
			mailId: pageData.itemData.id
		})
		Toast.hideLoading()
		if (code !== 200) { return }
		Toast.show('Receive Success!')
		pageData.itemData.attachesStatus = 1
		emit('refresh')
		hide()
	}
	
	const handleDelectClick = async () => {
		Toast.showLoading('Loading')
		const { code, data } = await requestMailDel({
			mailId: pageData.itemData.id
		})
		Toast.hideLoading()
		if (code !== 200) { return }
		Toast.show('Delete Success!')
		emit('refresh')
		hide()
	}
	
	defineExpose({
		show,
		hide
	})
</script>

<style lang="scss">
	.van-popup {
		background: none;
		overflow-y: visible;
	}
</style>

<style lang="scss" scoped>
	.popup-view {
		position: relative;
	}
	
	
	.popup-close-btn {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		right: -20rpx;
		top: -20rpx;
	}
	
	.popup-content-view {
		border-radius: 20rpx;
		width: 630rpx;
		max-height: 1100rpx;
		background-color: #922222;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
		
		.content-text {
			max-height: 300rpx;
			overflow: hidden;
			overflow-y: scroll;
		}
		
		.popup-view-btn {
			font-size: 32rpx;
			width: 232rpx;
			height: 80rpx; 
			border-radius: 40rpx; 
			margin-top: 40rpx; 
			margin-bottom: 50rpx;
			color: #ffffff;
		}
	}
</style>