<template>
	<mobile-sub-layout :title="$t('mail.title')" :bgColor="themeStore.theme.bgColor">
		<view class="mail-container">
			<view class="plr30">
				<!-- <view v-for="(item, index) in mailStore.mailList" :key="index" class="mail-list-item flex-acenter"
					@click.stop="handleMailClick(item)" :style="{ 'background-color': themeStore.theme.lightBgColor }">
					<view class="mail-img" :style="{ 'background': themeStore.theme.themeBgColor }">
						<theme-image v-if="item.isRead" src="@/static/mail/icon-mail-open.png" mode="aspectFit"
							style="width: 70rpx; height: 70rpx;"></theme-image>
						<theme-image v-else style="width: 70rpx; height: 70rpx;" src="@/static/mail/icon-mail.png"
							mode="aspectFit"></theme-image>
						<theme-image v-if="item.attaches && item.attachesStatus === 0" class="mail-img-tag"
							src="@/static/mail/icon-mail-gift.png" mode="aspectFit"></theme-image>
					</view>
					<view class="ml24">
						<view class="flex-acenter flex-sbetween">
							<view class="mail-title ft14" :style="{ 'color': themeStore.theme.text.normal }">
								{{ item.title || '' }}
							</view>
							<view class="ft11 flex-shrink-0" :style="{ 'color': themeStore.theme.text.normal }">
								{{ item.createTime || '' }}
							</view>
						</view>
						<view class="ft12 mt20 mail-content" :style="{ 'color': themeStore.theme.text.subtitle }">
							{{ item.content || '' }}
						</view>
					</view>
				</view> -->
				<view class="mail-item w-full relative" v-for="item in mailStore.mailList" :key="item.id"
					@click.stop="handleMailClick2(item)"
					:style="{ background: `top / cover no-repeat ${item.isRead ? themeStore.theme.mail.readedBg : themeStore.theme.mail.unreadBg}` }">
					<view class="mail-title"
						:style="{ color: item.isRead ? themeStore.theme.mail.titleColorReaded : themeStore.theme.mail.titleColor }">
						{{ item.title }}</view>
					<view class="mail-time"
						:style="{ color: item.isRead ? themeStore.theme.mail.timeColorReaded : themeStore.theme.mail.timeColor }">
						{{ item.createTime }}
					</view>
				</view>
				<NodataSearch v-if="!mailStore.mailList.length" :title="$t('mail.message.noMail')" />
				<empty-hold height="137rpx" />
				<view v-if="false" class="bottom-box safe-area">
					<view class="bottom-block flex-center">
						<view class="deleted-read btn-text flex-center" :style="{ color: themeStore.theme.mail.light }"
							@click="deleteAll">{{ $t('mail.deleteRead') }}</view>
						<view class="receive-all btn-text flex-center"
							:style="{ color: themeStore.theme.account.confirmBtnTextColor }" @click="receiveAll">{{
								$t('mail.receiveAll') }}
						</view>
					</view>
				</view>
			</view>
			<MailDetailPopup ref="mailDetailPopupRef" @refresh="loadData" />
		</view>

	</mobile-sub-layout>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import MailDetailPopup from './components/MailDetailPopup'
import NodataSearch from '@/components/nodata/NoDataSearch.vue'
import { useMailStore } from '@/store/useMailStore.js'
import { useThemeStore } from '@/store/useThemeStore'
import Toast from '@/module/toast/toast.js'
import { useI18n } from 'vue-i18n'
import { requestMailDel, requestMailRead, requestMailReceive } from '@/api/mail'
import { onShow } from '@dcloudio/uni-app'

const { t } = useI18n()
const themeStore = useThemeStore()
const mailStore = useMailStore()
const mailDetailPopupRef = ref(null)

const pageData = reactive({
	listData: []
})

onShow(() => {
	loadData()
})
const receiveAll = () => {
	requestMailReceive({ mailId: 0 }).then((res) => {
		if (res.totalData?.success) {
			Toast.showSuccess()
		} else {
			Toast.show(res.totalData?.msg ?? 'receive error', 'none')
		}
	}).catch(err => {
		Toast.show(err?.message ?? 'receive error', 'none')
	})
}
const deleteAll = () => {
	uni.showModal({
		title: t('mail.modal.title'),
		content: t('mail.modal.content'),
		confirmText: t('mail.modal.confirm'),
		cancelText: t('mail.modal.cancel'),
		confirmColor: themeStore.theme.mail.popConfirm,
		success(res) {
			if (res.confirm) {
				requestMailDel({ mailId: 0 }).then((res) => {
					if (res.totalData?.success) {
						Toast.showSuccess()
					} else {
						Toast.show(res.totalData?.msg ?? 'delete error', 'none')
					}
				}).catch(err => {
                    Toast.show(err?.message ?? 'delete error', 'none')
                })
			}
		}
	})
}
const handleMailClick2 = (item) => {
	uni.navigateTo({
		url: `/pages/mail/MailDetail?id=${item.id}`
	})
}
const loadData = async () => {
	Toast.showLoading('Loading')
	await mailStore.getMailList()
	Toast.hideLoading()
}

const handleMailClick = (item) => {
	mailDetailPopupRef.value.show(item)
}
</script>

<style lang="scss" scoped>
.mail-container {
	padding: 30rpx 0rpx;

	.mail-title {
		@include text-over(1);
	}

	.mail-content {
		@include text-over(2);
	}

	.mail-list-item {
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 16rpx;

		.mail-img {
			border-radius: 20rpx;
			background-color: #610606;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			width: 135rpx;
			height: 135rpx;
			flex-shrink: 0;

			.mail-img-tag {
				position: absolute;
				bottom: 0rpx;
				right: 0rpx;
				width: 61rpx;
				height: 37rpx;
			}
		}
	}

	.mail-item {
		width: 685rpx;
		height: 135rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 10rpx;

		.mail-title {
			position: absolute;
			right: 30rpx;
			top: 20rpx;
			width: 480rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 27rpx;
		}

		.mail-time {
			position: absolute;
			right: 280rpx;
			bottom: 27rpx;
			font-size: 18rpx;
		}
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: linear-gradient(0deg, #510206, #600800);
		box-shadow: 0rpx -3rpx 6rpx 1rpx rgba(0, 0, 0, 0.24);

		.bottom-block {
			width: 100%;
			height: 127rpx;
			font-size: 32rpx;

			.deleted-read {
				width: 275rpx;
				height: 73rpx;
				background: linear-gradient(0deg, #5F000B, #79000C);
				box-shadow: 0rpx 3rpx 0rpx 0rpx #420007;
				border-radius: 10rpx;
			}

			.receive-all {
				width: 275rpx;
				height: 73rpx;
				background: linear-gradient(180deg, #FFFBD1, #F6E07B, #C38F38, #E7B540);
				border-radius: 10rpx;
				box-shadow: 0rpx 6rpx 0rpx 0rpx rgba(50, 12, 6, 0.5);
				margin-left: 33rpx;
			}
		}
	}
}
</style>