<template>
	<mobile-sub-layout :title="$t('deposit.title3')" :bgColor="themeStore.theme.bgColor">
		<template #header-right>
			<view v-if="depositStore.fillOrderSwitch" class="flex-acenter" @click.stop="() => pageData.isSelfUtr = !pageData.isSelfUtr">
				<view class="check-radio flex-acenter flex-scenter cfff ft26" :style="{ 'border-color': themeStore.theme.themeDarkBgColor, 'background': themeStore.theme.themeDarkBgColor }">
					<image v-if="pageData.isSelfUtr" src="@/static/images/check-2.png" mode="aspectFit" style="width: 30rpx; height: 30rpx;" />
				</view>
				<view class="ft10" style="width: 120rpx;" :style="{ 'color': themeStore.theme.text.light }">
					{{ $t('deposit.button.selfUtrCheck') }}
				</view>
			</view>
		</template>
		<view class="withdraw-history-container" :style="{ 'background': themeStore.theme.bgColor }">
			<view class="tabs-view" :style="{ 'top': appStore.headerStyle.height + 'px', 'background': themeStore.theme.bgColor  }">
				<SegmentControl
					:lineWidth="100"
					:listData="[
						{ title: $t('deposit.tabs.tab1') },
						{ title: $t('deposit.tabs.tab2') },
						{ title: $t('deposit.tabs.tab3') }
					]"
					@change="handleTabChange"
				/>
				<view style="height: 4rpx;" :style="{ 'background': themeStore.theme.darkSeplineColor }"></view>
			</view>
			<view class="flex-acenter flex-sbetween ptb16 pt32 plr30" :style="{color: themeStore.theme.text.normal}">
				<view class="flex-acenter">
					<view class="ft12">
						{{ pageData.dateShow }}
					</view>
					<view v-if="appStore.appId === 306" class="ml24 gmt-view flex-acenter" :style="{ 'background': themeStore.theme.themeDarkBgColor }">
						<theme-image src="@/static/wallet/icon-gmt.png" mode="aspectFit" style="width: 25rpx; height: 25rpx;"></theme-image>
						<view class="ml8 ft11">
							{{ appStore.timeZone }}
						</view>
					</view>
				</view>
				<view class="ft12">
					{{ $t('deposit.total') }} :{{ $formatThousandDot(pageData.total) }}
				</view>
			</view>
			<view :style="{color: themeStore.theme.text.normal}">
				<view class="plr30 pb16" v-for="item in listData" :key="item" @click="handleItemClick(item)">
					<view class="list-item-content plr30 ptb16 flex-acenter flex-sbetween" :style="{ 'background': themeStore.theme.lightBgColor }">
						<view class="list-item-icon flex-shrink-0">
							<theme-image v-if="item.status === 1" src="@/static/icon-succeed.png" style="width: 50rpx; height: 50rpx;"></theme-image>
							<!-- <theme-image v-else-if="item.status === 0" src="@/static/wallet/icon-fail.png" style="width: 50rpx; height: 50rpx;"></theme-image> -->
							<theme-image v-else src="@/static/icon-pending.png" style="width: 50rpx; height: 50rpx;"></theme-image>
							<view v-if="(item.manualRechargeStatus === 0 || item.manualRechargeStatus === 3) && item.status === 0" class="list-item-utr-conner">
								<view>Self</view>
							</view>
						</view>
						<view class="plr30 flex-1">
							<view class="ft10">
								{{ item.orderedOn || '' }}
							</view>
							<view class="flex-acenter">
								<view class="ft10">
									{{ $t('deposit.orderId') }}: {{ item.orderNo || '' }}
								</view>
								<view class="ml16" @click.stop="handleCopyClick(item.orderNo)">
									<theme-image src="@/static/icon-copy.png" mode="aspectFit" style="width: 20rpx; height: 20rpx;" />
								</view>
							</view>
							<view class="ft8" :style="{ 'color': themeStore.theme.text.subtitle }">
								Method: {{ item.rechargeType }}
							</view>
						</view>
						<view class="flex-shrink-0 text-a-right">
							<view class="ft13" :style="{ 'color': themeStore.theme.text.highlight }">
								+{{ $formatThousandDot(item.amount, 2) }}
							</view>
							<view v-if="!!item.giftAmount" class="ft11 mt16">
								{{ $t('deposit.bonus') }}: +{{ item.giftAmount }}
							</view>
						</view>
					</view>
				</view>
				<NoDataSearch
					v-if="!listData.length"
					:title="$t('deposit.message.nodata')"
				/>
			</view>
		</view>
	</mobile-sub-layout>
</template>

<script setup>
	import { onMounted, reactive, ref, computed } from 'vue'
  import { useThemeStore } from '@/store/useThemeStore'
	import { requestRecordList } from '@/api/deposit.js'
	import Toast from '@/module/toast/toast.js'
	import NoDataSearch from '@/components/nodata/NoDataSearch.vue'
	import { getCurrentDateStr, getNextDaysDateStr } from '@/module/formatter/date-formatter.js'
	import SegmentControl from '@/components/segment/SegmentControl.vue'
	import { useAppStore } from '@/store/useAppStore'
	import { useDepositStore } from '@/store/useDepositStore.js'
	
	const themeStore = useThemeStore()
	const appStore = useAppStore()
	const depositStore = useDepositStore()

	const pageData = reactive({
		active: 0,
		total: 0,
		dateShow: getCurrentDateStr(2),
		list: [],
		isSelfUtr: false
	})
	
	const listData = computed(() => {
		if (pageData.isSelfUtr) {
			return pageData.list.filter(el => {
				return el.manualRechargeStatus !== 0
			})
		}
		return pageData.list
	})
	
	onMounted(() => {
		loadData()
	})
	
	const loadData = async () => {
		let dayRange = 0
		if (pageData.active === 0) {
			dayRange = 0
			pageData.dateShow = `${getCurrentDateStr(2)}`
		} else if (pageData.active === 1) {
			dayRange = 7
			pageData.dateShow = `${getCurrentDateStr(2)} ~ ${getNextDaysDateStr(7, 2)}`
		} else if (pageData.active === 2) {
			dayRange = 30
			pageData.dateShow = `${getCurrentDateStr(2)} ~ ${getNextDaysDateStr(30, 2)}`
		}
		Toast.showLoading('Loading')
		const { code, data } = await requestRecordList({
			dayRange: dayRange,
			page: 1,
			pageSize: 100
		})
		Toast.hideLoading()
		if (code !== 200) { return }
		const listData = data || []
		pageData.list = listData
		let total = 0
		listData.forEach(el => {
			total = total + el.amount + el.giftAmount
		})
		pageData.total = total
	}
	
	const handleTabChange = ({ index }) => {
		pageData.active = index
		loadData()
	}
	
	const handleCopyClick = (text) => {
		uni.setClipboardData({
			data: text,
			success() {
				uni.showToast({
					title: 'Copy Success',
					icon: 'success'
				});
			}
		})
	}
	
	const handleItemClick = (item) => {
		uni.navigateTo({
			url: `/pages/wallet/DepositOrderDetail?orderId=${item.id}`
		})
	}
</script>

<style lang="scss" scoped>
	.check-radio {
		width: 36rpx;
		height: 36rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
		margin-right: 10rpx;
		border: 1rpx solid #963333;
		flex-shrink: 0;
	}
	
	.withdraw-history-container {
		position: relative;
		padding-top: 100rpx;
		
		.gmt-view {
			height: 40rpx;
			border-radius: 20rpx;
			padding: 0rpx 16rpx;
		}
			
		.list-item-content {
			border-radius: 20rpx;
			position: relative;
			overflow: hidden;
			
			.list-item-utr-conner {
				position: absolute;
				left: 0rpx;
				top: 0rpx;
				width: 100rpx;
				height: 30rpx;
				z-index: 1;
				background-color: #FF690F;
				color: white;
				font-size: 18rpx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom-right-radius: 30rpx;
			}
		}
		
		.tabs-view {
			position: fixed;
			left: 0rpx;
			right: 0rpx;
			z-index: 50;
		}
	}
</style>