<template>
	<mobile-sub-layout :title="$t('withdraw.title2')" :bgColor="themeStore.theme.bgColor">
		<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('withdraw.tabs.tab1') },
					{ title: $t('withdraw.tabs.tab2') },
					{ title: $t('withdraw.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('withdraw.total') }} :{{ $formatThousandDot(pageData.total) }}
				</view>
			</view>
			<view class="" v-if="pageData.list.length > 0">
				<view class="plr30 pb16" v-for="item in pageData.list" :key="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 src="@/static/icon-pending.png" v-if="item.status == 0"
								style="width: 50rpx; height: 50rpx"></theme-image>
							<theme-image src="@/static/icon-succeed.png" v-if="item.status == 1"
								style="width: 50rpx; height: 50rpx"></theme-image>
							<theme-image src="@/static/icon-fail.png" v-if="item.status == 2"
								style="width: 50rpx; height: 50rpx"></theme-image>
						</view>
						<view class="plr30 flex-1" :style="{color: themeStore.theme.text.normal}">
							<view class="ft10">{{ item.createTime }}</view>
							<view class="flex-acenter">
								<view class="ft8">{{ $t('withdraw.orderId') }}: {{ item.orderNo }}</view>
								<view class="ml16">
									<theme-image src="@/static/icon-copy.png" @click="copy(item.orderNo)"
										mode="aspectFit" style="width: 20rpx; height: 20rpx" />
								</view>
							</view>
						</view>
						<view class="flex-shrink-0" :style="{color: themeStore.theme.text.normal}">
							<view v-if="appStore.phoneNumberPrefix === '+91' && !!item.successAmount" class="ft13"
								style="text-align: right;" :style="{ 'color': themeStore.theme.text.highlight }">+{{
									item.withdrawAmount }}/{{ item.successAmount }}</view>
							<view v-else class="ft13" style="text-align: right;"
								:style="{ 'color': themeStore.theme.text.highlight }">+{{ item.withdrawAmount }}</view>
							<view class="ft11 mt16">{{ getStatusText(item.status) }}</view>
						</view>
					</view>
				</view>
			</view>
			<NoDataSearch v-if="!pageData.list.length" :title="$t('withdraw.mesaage.nodata')" />
		</view>
	</mobile-sub-layout>
</template>

<script setup>
import Toast from '@/module/toast/toast.js';
import { onMounted, reactive, ref } from 'vue';
import { useThemeStore } from '@/store/useThemeStore';
import { conversionTime } from '@/module/utils/conversionTime.js';
import NoDataSearch from '@/components/nodata/NoDataSearch.vue'
import { getWithdrawListApi } from '@/api/withdraw.js';
import SegmentControl from '@/components/segment/SegmentControl.vue'
import { useAppStore } from '@/store/useAppStore'
import { getCurrentDateStr, getNextDaysDateStr } from '@/module/formatter/date-formatter.js'

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

let time = ref('');
const pageData = reactive({
	active: 0,
	total: 0,
	dateShow: getCurrentDateStr(2),
	loading: false,
	error: false,
	list: []
});
const getStatusText = (value) => {
	return value == 1 ? 'Succeeded' : value == 2 ? 'Failed' : 'Pending';
};

const tabOnClick = (name) => {
	if (name == 0) {
		time.value = conversionTime(name);
	} else {
		time.value = conversionTime(name) + '~' + conversionTime(0);
	}
	active.value = name;
	loadData();
};

onMounted(() => {
	time.value = conversionTime(0);
	loadData();
});

const copy = (text) => {
	uni.setClipboardData({
		data: text,
		success() {
			uni.showToast({
				title: 'Copy Success',
				icon: 'success'
			});
		}
	});
};
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 getWithdrawListApi({
		dayRange: dayRange
	});
	Toast.hideLoading();
	if (code == 200) {
		const listData = data || []
		pageData.list = listData
		let total = 0
		listData.forEach(el => {
			total = total + el.withdrawAmount
		})
		pageData.total = total
	}
};

const handleTabChange = ({ index }) => {
	pageData.active = index
	loadData()
}
</script>

<style lang="scss" scoped>
.withdraw-history-container {
	position: relative;
	padding-top: 100rpx;

	.gmt-view {
		height: 40rpx;
		border-radius: 20rpx;
		padding: 0rpx 16rpx;
	}

	.list-item-content {
		border-radius: 20rpx;
	}

	.nodata-body {
		width: 100%;
		height: calc(100vh - 390rpx);
		background: #610606;
	}

	.tabs-view {
		position: fixed;
		left: 0rpx;
		right: 0rpx;
		z-index: 50;
	}
}
</style>
