<template>
	<u-navbar :background="{backgroundColor: '#4E55AF'}" back-icon-color="#FFFFFF" height="50">
		<view class="flex justify-end items-center w-full">
			<view class="flex justify-end pr-[30rpx] ">
				<navigator hover-class="none" url="/pages/item/record">
					<u-icon size="40" name="/static/images/common/record.png"></u-icon>
				</navigator>
			</view>
		</view>
	</u-navbar>
	<view class="bg-[#4E55AF] pt-[10rpx] px-[30rpx]  mb-[30rpx] pb-[50rpx]">
		<view class="mb-[30rpx]">
			<text class="font-bold text-xl">{{data.item.title}}</text>
		</view>
		<view class="">
			{{t("item.type" + data.item.type)}}
		</view>
	</view>
	
	<view class="mt-[20rpx] pb-[30rpx]">
		<view class="bg-[#2C326B] mx-[30rpx] mb-[20rpx] rounded-lg">
			<view class=" rounded-lg p-[30rpx]">
				<view class="flex justify-between mb-[20rpx]">
					<view class="text-[#00D2E0]">
						{{t('item.moneyRange')}}
					</view>
					<view class="">
						{{getCurrency() }}{{formatMoney(data.item.min_money)}} -
						{{getCurrency() }}{{formatMoney(data.item.max_money)}} {{getCurrency2()}}
					</view>
				</view>
				<view class="flex justify-between mb-[20rpx]">
					<view class="text-[#00D2E0]">
						{{t('item.cycle')}}
					</view>
					<view class="">
						<text class="mr-[5rpx]">{{ data.item.cycle }}</text>
						<text v-if="data.item.type==1 || data.item.type==2">{{t('item.days')}}</text>
						<text v-if="data.item.type==3 || data.item.type==4">{{t('item.hour')}}</text>
					</view>
				</view>
				<view class="flex justify-between mb-[20rpx]">
					<view class="text-[#00D2E0]">
						<text v-if="data.item.type==1">{{t('item.dailyRate')}}</text>
						<text v-if="data.item.type==4">{{t('item.hourRate')}}</text>
						<text v-if="data.item.type==2 || data.item.type==3">{{t('item.totalRate')}}</text>
					</view>
					<view class="">
						{{data.item.rate}}%
					</view>
				</view>
				<view class="flex justify-between mb-[20rpx]" v-if="data.user.member.item_add_rate > 0">
					<view class="text-[#00D2E0]">
						{{t('item.vipAddRate')}}
					</view>
					<view class="">
						{{data.user.member.item_add_rate}}%
					</view>
				</view>
				<view class="flex justify-between mb-[20rpx]" v-if="data.item.point > 0">
					<view class="text-[#00D2E0]">
						{{t('item.point')}}
					</view>
					<view class="w-3/5 text-right ">
						{{data.item.point}}
					</view>
				</view>
				<view class="flex justify-between mb-[40rpx]">
					<view class="text-[#00D2E0]">
						{{t('item.limitVip')}}
					</view>
					<view class="">
						{{data.item.vip_name}}
					</view>
				</view>
				<view class="flex justify-between">
					<u-line-progress :striped="true" :percent="data.item.progress" :striped-active="true"
						active-color="#4E55AF"></u-line-progress>
				</view>
			</view>
		</view>
		<view class="bg-[#2C326B] mx-[30rpx] mb-[20rpx] rounded-lg p-[30rpx]">
			<view class="flex justify-between mb-[40rpx]">
				<view class="text-[#00D2E0]">
					{{t('item.myFunds')}}
				</view>
				<view class="">
					{{getCurrency() }}{{formatMoney(data.user.balance)}} {{getCurrency2()}}
				</view>
			</view>
			<view class="">
				<view class="bg-[#3d4277] rounded-lg px-[20rpx] py-[10rpx] mb-[30rpx]">
					<u-input v-model="formData.money" type="number" @input="checkMoney"
						:placeholder="t('item.moneyPlaceholder')" :border="false" />
				</view>
				<view class="text-right  mb-[30rpx]" v-if="data.income > 0">
					<text
						class="mr-[10rpx]">{{t('item.expIncome')}}:</text>{{getCurrency() }}{{formatMoney(data.income)}} {{getCurrency2()}}
				</view>
				<u-button type="primary" :disabled="formData.money==''" @click="handleInvest()">
					{{t('item.investBtn')}}
				</u-button>
			</view>
		</view>
		
		<view class="bg-[#2C326B] mx-[30rpx] mb-[20rpx] rounded-lg">
			<view class="leading-loose rounded-lg p-[30rpx]">
				<view class="" v-html="data.item.content"></view>
			</view>
		</view>
		<u-keyboard class="max-w-[750px]" ref="uKeyboard1" mode="number" :dot-enabled="false" :tips="t('pwd.payPwd')"
			confirm-text="" cancel-text="" v-model="show_keyboard" @change="keyboardChange" @backspace="backspace"
			:show-input-val="true" :input-value="formData.pay_pwd"></u-keyboard>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref, nextTick } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { getDetail, invest } from '@/api/item'
	import { t, formatMoney, getCurrency, getCurrency2,replaceStr } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('item.titleDetail') })
	const show_keyboard = ref(false)
	const data = reactive({
		item: {
			min_money: 0,
			max_money: 0,
			member_id: 0,
			progress: 0,
			point: 0
		},
		user: {
			today_order: 0,
			balance: 0,
			member: {
				id: 0,
				item_num: 0,
				item_add_rate: 0
			}
		},
		income: 0
	})

	const formData = reactive({
		id: 0,
		money: '',
		pay_pwd: '',
		invest: 1//验证器标识
	})

	const handleInvest = async () => {
		if (!formData.money) {
			return uni.$u.toast(t('item.moneyEmpty'))
		}
		if (parseFloat(formData.money) < data.item.min_money || parseFloat(formData.money) > data.item.max_money) {
			return uni.$u.toast(t('item.moneyError'))
		}
		if (parseFloat(formData.money) - data.user.balance > 0) {
			return uni.$u.toast(t('common.InsufficientBalance'))
		}
		if (data.item.member_id - data.user.member.id > 0) {
			return uni.$u.toast(replaceStr(t('item.limitVIpTips'), '{vip_name}', data.item.vip_name))
		}
		if (data.item.progress >= 100) {
			return uni.$u.toast(t('item.progressFull'))
		}
		if (data.user.today_order - data.user.member.item_num >= 0) {
			return uni.$u.toast(t('item.itemNumInsufficient'))
		}
		formData.pay_pwd = '';
		show_keyboard.value = true;
	}

	const submit = async () => {
		await invest(formData)
		uni.redirectTo({
			url: '/pages/item/record'
		})
	}

	const keyboardChange = (val : string) => {
		formData.pay_pwd += val;
		if (formData.pay_pwd.length == 6) {
			show_keyboard.value = false;
			submit();
		}
	}
	const backspace = () => {
		// 删除value的最后一个字符
		if (formData.pay_pwd.length) formData.pay_pwd = (formData.pay_pwd).substr(0, (formData.pay_pwd.length) - 1);
	}

	const getData = async (id : number) => {
		formData.id = id;
		const res = await getDetail({ id: id })
		if (res.need_set_pwd == 1) {
			uni.$u.toast(t('pwd.pwdSetFirstTips'))
			uni.redirectTo({
				url: '/pages/change_password/set_password_pay'
			})
			return
		}
		data.item = res.item;
		data.user = res.user;
	}

	const checkMoney = (money : string) => {
		var precision = uni.getStorageSync('precision')
		// 使用正则表达式匹配小数
		var decimalMatch = money.match(/\.(\d+)/);
		if (decimalMatch) {
			if (decimalMatch[1].length >= precision) {
				nextTick(() => {
					formData.money = parseFloat(money).toFixed(precision);
				})
			}
		}
		money = parseFloat(money).toFixed(precision);
		var rate = parseFloat(data.item.rate);

		if (data.user.member.item_add_rate > 0) rate += parseFloat(data.user.member.item_add_rate);

		if (data.item.type == 1 || data.item.type == 4) {
			data.income = parseFloat(money) * rate * data.item.cycle / 100;
		} else {
			data.income = parseFloat(money) * rate / 100;
		}


		data.income = parseFloat((data.income).toFixed(precision));
	}

	onLoad((options : any) => {
		getData(options.id)
	})
</script>

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