<template>
	<view>
		<u-navbar :is-back="false" :background="{backgroundColor: '#4E55AF'}" height="50">
			<view class="flex justify-between items-center w-full">
				<view class="flex justify-start items-center">
					<view class="rounded-lg ml-[30rpx] bg-white p-[10rpx] mr-[12rpx]">
						<u-image width="40rpx" height="40rpx" :src="appStore.getWebsiteConfig.shop_logo"></u-image>
					</view>
					<view class="">
						{{t('mine.title')}}
					</view>
				</view>
				<view class="flex justify-end pr-[30rpx] ">
					<navigator hover-class="none" url="/pages/mine/record">
						<u-icon size="40" name="/static/images/common/record.png"></u-icon>
					</navigator>
				</view>
			</view>
		</u-navbar>

		<view class="mx-[30rpx]">
			<view class="max-w-[300px] mx-[30%] mt-[100rpx] mb-[50rpx]">
				<u-image width="100%" mode="widthFix" src="/static/images/mine/mine_bg.gif"></u-image>
			</view>
			<view class="bg-[#2C326B] rounded-lg p-[30rpx] mb-[50rpx]">
				<view class="flex justify-between mb-[50rpx]">
					<view class="flex items-center">
						<text class="mr-[10rpx]">{{t('mine.vipNow')}}:</text>
						<u-icon class="mr-[10rpx]" size="42" :name="state.user.member_logo"></u-icon>
						<text class="">{{ state.user.member_name }}</text>
					</view>
					<view class="">
						{{state.user.mine_speed}}
					</view>
				</view>
				<view class="flex justify-between mb-[30rpx]">
					<u-line-progress height="42" :striped="true" :percent="state.config.percent" :striped-active="true"
						active-color="#4E55AF"></u-line-progress>
				</view>
				<view class="mb-[30rpx] text-2xl font-bold text-center">
					{{state.config.nowNum}} {{state.config.symbol}}
				</view>
				<view class="">
					<u-button type="primary" disabled v-if="state.config.status == 1">
						<u-count-down format="HH:mm:ss" :timestamp="state.config.endTime" @end="handleCountDownEnd()"
							@change="handleCountDownChange()"></u-count-down>
					</u-button>
					<u-button type="primary" v-if="state.config.status == 0" @click="handleStart()">
						{{t('mine.btnStart')}}
					</u-button>
					<u-button type="primary" v-if="state.config.status == 2" @click="handleReceive()">
						{{t('mine.btnGet')}}
					</u-button>
				</view>
			</view>
		</view>
		<view class="pb-[30rpx]">
			<view class="my-[30rpx] font-bold mx-[30rpx]">
				{{t('mine.vipLevel')}}
			</view>
			<view class="wrap mb-[20rpx]">
				<u-swiper :list="vip.list" :current="vip.current" :effect3d="true" :autoplay="false" mode="none"
					bg-color="none" :showText="true" :showTips="true" @change="changeHandle"></u-swiper>
			</view>
			<view class="pt-[30rpx] mb-[20rpx] rounded-xl mx-[30rpx]">
				<view class="mb-[30rpx]">
					<text class="">{{vip.currentVip.text}} {{t('vip.upgradeConditions')}}</text>
				</view>
				<view class=" bg-[#2C326B] rounded-xl p-[30rpx]">
					<view class="flex justify-between mb-[20rpx]">
						<view class="text-[#00D2E0]">
							{{t('vip.totalInvest')}}
						</view>
						<view class="">
							{{formatMoney(state.user.total_invest)}}/{{vip.currentVip.money}}
						</view>
					</view>
					<view class="flex justify-between">
						<view class="text-[#00D2E0]">
							{{t('vip.levelNum')}}
						</view>
						<view class="">
							{{state.user.invite_count}}/{{vip.currentVip.level1_num}}
						</view>
					</view>
				</view>
			</view>
			<view class="pt-[30rpx] rounded-xl mx-[30rpx]">
				<view class="mb-[30rpx]">
					<text class="">{{vip.currentVip.text}} {{t('vip.rights')}}</text>
				</view>
				<view class=" bg-[#2C326B] rounded-xl p-[30rpx]">
					<view class="flex justify-between mb-[20rpx]">
						<view class="text-[#00D2E0]">
							{{t('vip.itemNum')}}
						</view>
						<view class="">
							{{vip.currentVip.item_num}}
						</view>
					</view>
					<view class="flex justify-between mb-[20rpx]">
						<view class="text-[#00D2E0]">
							{{t('vip.itemAddRate')}}
						</view>
						<view class="">
							{{vip.currentVip.item_add_rate}}%
						</view>
					</view>
					<view class="flex justify-between">
						<view class="text-[#00D2E0]">
							{{t('vip.mineSpeed')}}
						</view>
						<view class="">
							{{vip.currentVip.mine_speed}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

	<tabbar />
</template>

<script lang="ts" setup>
	import { onShow } from '@dcloudio/uni-app'
	import { reactive } from 'vue'
	import { useAppStore } from '@/stores/app'
	import { getMineIndex, mineStart, mineReceive } from '@/api/user'
	import { t, formatMoney } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('mine.title') })

	const appStore = useAppStore()
	const state = reactive<{
		user : any
		members : any
		config : any
	}>({
		user: [],
		members: [],
		config: {
			status: 0,//矿机状态0已暂停1挖矿中2待领取
			endTime: 0,
			nowNum: 0,//当前挖矿数量
			maxNum: 0,//最大挖矿数量
			mine_speed_sec: 0,
			precision2: 2,
			percent: 0
		}
	})

	const vip = reactive({
		list: [],
		currentVip: [],
		current: 0
	})

	const changeHandle = (index : number) => {
		vip.currentVip = vip.list[index]
	}

	const handleCountDownChange = () => {
		state.config.nowNum = parseFloat(state.config.nowNum) + state.config.mine_speed_sec
		let num = state.config.nowNum
		if (num > state.config.maxNum) num = state.config.maxNum
		state.config.nowNum = num.toFixed(state.config.precision2)
	}

	const handleCountDownEnd = () => {
		getData()
	}

	const handleStart = async () => {
		await mineStart({ 'start': 1 })
		getData()
	}

	const handleReceive = async () => {
		await mineReceive({ 'receive': 1 })
		uni.$u.toast(t('mine.getSuccess'))
		getData()
	}

	const getData = async () => {
		const res = await getMineIndex()
		state.user = res.user
		state.members = res.members
		state.config = res.config

		const vips = state.members
		vips.forEach((item : any, index : number) => {
			if (state.user.member_id >= item.id) {
				vip.current = index;
				vip.currentVip = item;
				item['locked'] = false;
				item['tips'] = t('vip.unlocked');
			} else {
				item['locked'] = true;
				item['tips'] = t('vip.locked');
			}
			item['textStyle'] = {
				color: item['text_color']
			}
			item['tipsStyle'] = {
				color: item['text_color']
			}
		})
		vip.list = vips;
	}
	onShow(() => {
		getData()
	})
</script>

<style lang="scss">
</style>