<script setup>
	/**
	 * 榴莲首页
	 */
	import {
		useStore,
	} from 'vuex'
	import {
		onMounted,
		ref,
		reactive,
		computed,
		getCurrentInstance,
		watch,
		defineExpose,
	} from 'vue';

	import {
		onLoad,
		onReady,
		onHide,
	} from '@dcloudio/uni-app'
	// 未登录
	import noLogin from '@/components/login/noLogin.vue'
	// 工具库
	import util from '@/common/js/util.js'
	// 进度
	import task from '@/components/index/task'
	// 接口
	import api from '@/api/index.js'
	// 二级支付
	import payPwd from '@/components/mine/payPwd.vue'
	const {
		proxy
	} = getCurrentInstance()
	// 仓库
	const store = useStore()
	// 互转表单
	const form = reactive({
		// 交易对方的用户ID
		targetUserId: '',
		// 账户
		account: '',
		// 榴莲果数量
		fruitAmount: '',
		// 姓名首字
		first: '',
		// 姓名
		name: '',
		// 
		secondPassword: '',
	})
	//读秒记录
	const viewData = ref({
		seconds: 0
	})
	// 用户信息
	const userinfo = computed(() => {
		return store.state.userinfo
	})
	// 进度条
	const progress = computed(() => {
		let result = viewData.value.seconds
		result = Math.min(Number(result), 100)
		return result
	})
	// 我的钱包
	const purse = computed(() => {
		return store.state.purse || {}
	})

	// 榴莲果配置
	const configData = reactive({
		minConsumption: '',
		platformPercentage: ''
	})

	onReady(() => {
		// proxy.$refs.dealRef.open()
		// proxy.$refs.payPwdRef.open()
	})

	onLoad(() => {
		// 获取钱包
		util.getPurse()

		getConfig()
	})

	// 榴莲果交易
	function handleSubmit() {
		// 验证必填项
		if (!form.account) {
			util.alert('请输入账号')
			return
		}
		if (!form.fruitAmount) {
			util.alert('请输入榴莲果转账数量')
			return
		}

		// 验证添加最低金额限制
		const min = parseFloat(configData.minConsumption)
		const price = parseFloat(form.fruitAmount)
		if (price < min) {
			util.alert(`榴莲果最低${min}起转`)
			return
		}


		// 根据账号查询用户id
		api.mine.getUserDataByAccount({
			query: {
				account: form.account,
			},
		}).then(rs => {
			if (rs.code === 200) {
				const result = rs.data
				// 交易对方的id
				form.targetUserId = result.userName
				form.name = result.userRealName.slice(1, result.userRealName.length)
				// 打开姓名校验
				proxy.$refs.payee.open()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 验证真实姓名
	function handlePayeeConfirm() {
		// 验证必填项
		if (!form.first) {
			util.alert('请输入对方姓名首字母')
			return
		}

		api.durian.nameComparison({
			query: {
				// 对方账号
				account: form.account,
				// 对方姓名
				name: `${form.first}${form.name}`,
			}
		}).then(rs => {
			if (rs.code == 200) {
				if (rs.data) proxy.$refs.payPwdRef.open()
				else {
					util.alert({
						content: '姓名不匹配',
						showCancel: false,
					})
					form.first = ''
				}
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 交易
	 * @param {Object} ev 二级密码
	 */
	function handlePwdConfirm(ev) {
		// 验证必填项
		if (!form.first) {
			util.alert('请输入对方姓名首字母')
			return
		}
		if (!form.account) {
			util.alert('请输入账号')
			return
		}
		if (!form.fruitAmount) {
			util.alert('请输入榴莲果转账数量')
			return
		}

		// 榴莲果交易
		api.durian.consume({
			data: {
				// 更新用户信息
				userId: userinfo.value.id,
				// 交易对方的用户id
				targetUserId: form.targetUserId,
				// 交易类型
				transactionType: 10,
				// 榴莲果交易数量
				fruitAmount: form.fruitAmount,
				// 交易值
				totalAmount: form.fruitAmount,
				// 对方姓名
				name: `${form.first}${form.name}`,
				// 对方账号
				account: form.account,
				// 二级密码
				secondPassword: ev
			}
		}).then(rs => {
			if (rs.code === 200) {
				form.fruitAmount = ''
				form.account = ''
				form.first = ''
				proxy.$refs.dealRef.close()
				proxy.$refs.payee.close()
				// 
				util.getPurse()
				// 
				util.alert('转让成功')
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 跳转
	function link(path) {
		uni.navigateTo({
			url: path
		})
	}

	// 榴莲果配置
	function getConfig() {
		api.durian.durianFruitConfig().then(rs => {
			if (rs.code == 200) {
				configData.minConsumption = rs.data.minConsumption
				configData.platformPercentage = +rs.data.platformPercentage * 100
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>

<template>
	<view class="page" v-if="!userinfo.id">
		<noLogin class="f1" />
	</view>

	<view class="appbw plr30" v-else>

		<!-- 有效读秒 -->
		<view class="task mtb30">
			<task />
		</view>

		<!-- 树苗 -->
		<view class="sapling bgColor mtb30 ptb15 plr30">
			<view class="df">
				<view class="f1 fmid" @click="link('/pages/index/seedLog')">
					<image class="wh110" src="/static/sapling.png" mode="aspectFit" />
				</view>
				<view class="f1 fmid">
					<view class=" f38 b wsn">* {{ purse.seed }}</view>
				</view>
			</view>
		</view>

		<!-- 说明 -->
		<view class="explain ptb30 plr30 bgColor">
			<view class="df">
				<view class="list f1 fmid">
					<view class="item ver f1">
						<image class="wh300" src="/static/tree.png" mode="aspectFit" />
					</view>
				</view>

				<view class="df fdc jcsa f1">
					<view class="button btn colourful plr30" @click="link('/pages/index/orchard')">置换</view>

					<view class="button btn colourful plr30 fmid" @click="link('/pages/index/durainActivation')">
						<view class="">我的榴莲果树</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 榴莲果专区 -->
		<view class="durianSection bgColor mtb30 ptb30 plr30">
			<!-- <image class="fruit" src="/static/fruit.png" mode="aspectFit" /> -->
			<view class="df mlr30">
				<view class="ver f1">
					<navigator url="/pages/index/durianLog" hover-class="none">
						<image class="fruit wh150" src="/static/fruit.png" mode="aspectFit" />
						<view class="mt30 f20">
							<view class=" f1  b">可用: {{ purse.fruit }}</view>
							<view class="cFF4242 f1 mt10">待释放: {{ purse.fruitFrozen }}</view>
						</view>
					</navigator>
				</view>
				<view class="notice df fdc jcsa aic f1">
					<view class="item ver f1" @click="$refs.dealRef.open()">
						<view class="key fmid c333 f24">互转</view>
						<!-- <view class="value mt5 c333 f20">销毁30%</view> -->
					</view>
					<view class="item ver f1 mt30" @click="link('/pages/index/trade')">
						<view class="key fmid c333 f24">交易</view>
						<!-- <view class="value mt5 c333 f20">求购 出售</view> -->
					</view>
				</view>
			</view>

			<view class="btn plus black mt60 mlr60" @click="link('/pages/index/dataCenter/push')">置换流量</view>
		</view>

		<navigator hover-class="nonwe" :url="'/pages/index/article' + '?id=7'" class="c999 f30 mtb30 fmid">
			<uni-icons type="info" color="#333" class="mr10" />
			<text>玩法规则说明</text>
		</navigator>

		<view class="fill" style="height: 60rpx;"></view>
	</view>

	<!-- 互转 -->
	<uni-popup ref="dealRef" type="center">
		<view class="dealAlt popMid ptb40 plr60 bfff br30">
			<view class="title thd tac c333 f32"> 当前可用榴莲果 {{purse.fruit}}</view>
			<view class="content rows mtb30">
				<image class="wh140" src="/static/fruit.png" mode="aspectFit" />
				<image class="wh70" src="/static/dealMid.png" mode="aspectFit" />
				<image class="wh140" src="/static/dealUser.png" mode="aspectFit" />
			</view>

			<view class="inputBox mtb20 plr30">
				<input v-model.trim="form.account" type="text" placeholder="输入对方账号" />
			</view>

			<view class="inputBox mtb20 plr30">
				<input v-model.trim="form.fruitAmount" type="number" placeholder="输入数量" />
			</view>

			<view class="hint mtb30 tac f22">
				<view>销毁{{ configData.platformPercentage }}%</view>
				<view>(最低{{ configData.minConsumption }}起转)</view>
			</view>

			<view class="button btn lg bar black" @click="handleSubmit">转移</view>
		</view>
	</uni-popup>

	<!-- 收款方 -->
	<uni-popup ref="payee" type="center">
		<view class="payee popMid ver ptb40 plr60 bfff br30">
			<view class="title tac c333 f28">收款方确认</view>

			<view class="mtb20 f28">请补全对方姓名首字，以防转错</view>

			<view class="inputEdit rows mauto mtb20 plr30">
				<input class="first side" v-model.trim="form.first" type="text" placeholder="" />
				<view class="mlr20">*</view>
				<view class="side tar">
					<text v-if="0">{{ form.name }}</text>
				</view>
			</view>

			<view class="rows mt50">
				<view class="btn sm cancel plr40" @click="$refs.payee.close()">取消</view>
				<view class="btn sm black plr40" @click="handlePayeeConfirm">验证</view>
			</view>

		</view>
	</uni-popup>

	<!-- 二级支付 -->
	<payPwd ref="payPwdRef" @confirm="handlePwdConfirm" />
</template>

<style lang="scss">
	// 
	.board {
		background-image: linear-gradient(103deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
	}

	// 背景颜色
	.bgColor {
		background-color: #FFFBF3;
		border-radius: 20rpx;
	}

	.explain {
		.button {
			width: 250rpx;
			margin-left: 0;
		}
	}

	// 树苗
	.sapling {
		.button {
			width: 300rpx;
		}
	}

	// 榴莲果专区
	.durianSection {

		// 须知
		.notice {

			.key {
				width: 140rpx;
				height: 70rpx;
				color: #fff;
				background: linear-gradient(99deg, #27efe2 0%, #a45eff 43%, #ff004f 100%), linear-gradient(108deg, #d7f550 -2%, #afef4d 98%);
				border-radius: 100rpx;
			}
		}
	}

	// 
	.dealAlt {
		.hint {
			color: #3d3d3d;
			opacity: .7;
		}
	}

	// 支付
	.payee {

		// 侧边
		.side {
			width: 80rpx;
		}

		// 
		.first {
			padding: 20rpx;
			background-color: #f4f4f4;
			border-radius: 20rpx;
		}
	}
</style>