<template>
	<view class="agency-deposit-container">
		<view v-for="(item, index) in depositStore.agentsV2" :key="index" class="list-item">
			<view class="flex-acenter flex-sbetween">
				<view class="cfff ft16">
					{{ item.name || '' }}
				</view>
				<view v-if="item.online_status === 1" class="flex-acenter">
					<view class="icon-dot"></view>
					<view class="ft13 cfff">
						{{ $t('deposit.online') }}
					</view>
				</view>
			</view>
			<view class="flex-acenter mt20">
				<view class="ft15" style="color:#F96969">
					{{ $t('deposit.supportAmount') }}：
				</view>
				<view class="ft15 cfff">
					{{ appStore.currencySign }}{{ $formatThousandDot(item.recharge_amount[0], 0) }}~{{ appStore.currencySign }}{{ $formatThousandDot(item.recharge_amount[1], 0) }}
				</view>
			</view>
			<view class="flex-acenter mt20">
				<view class="ft15" style="color:#F96969">
					{{ $t('deposit.onlineTime') }}：
				</view>
				<view class="ft15 cfff">
					{{ item.online_time || '' }}
				</view>
			</view>
			<view class="flex-acenter flex-sbetween mt32">
				<view class="list-item-btn" @click.stop="handleChatClick(item)">
					<theme-image src="@/static/wallet/icon-telegram.png" mode="aspectFit" style="width: 50rpx; height: 50rpx;"/>
					<view class="ml24">
						Telegram
					</view>
				</view>
				<view class="list-item-btn" @click.stop="handleChatClick(item)">
					<theme-image src="@/static/wallet/icon-whatsapp.png" mode="aspectFit" style="width: 50rpx; height: 50rpx;"/>
					<view class="ml24">
						Whatsapp
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, reactive } from 'vue'
	import { useDepositStore } from '@/store/useDepositStore'
	import { openUrl } from '@/module/utils/openUrl';
	import { useAppStore } from '@/store/useAppStore'
	
	const appStore = useAppStore()
	const depositStore = useDepositStore()
	
	const handleChatClick = (item) => {
		if (!item.LiveChat) { return }
		openUrl(item.LiveChat)
	}
</script>

<style lang="scss" scoped>
	.agency-deposit-container {
		padding: 30rpx;
		
		.list-item {
			border-radius: 20rpx;
			background-color: #881C1C;
			margin-bottom: 30rpx;
			padding: 30rpx;
		}
		
		.icon-dot {
			background-color: #00FF21;
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}
		
		.list-item-btn {
			background: linear-gradient(0deg, #FFEFBD, #FEC305);
			height: 70rpx;
			border-radius: 10rpx;
			color: #610606;
			font-size: 24rpx;
			width: 300rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>