<template>
	<view class="page">
		<nav-bar title="To answer" bgColor="#fff"></nav-bar>
		<view style="margin: 20rpx 3%; padding: 0rpx 10rpx 160rpx; ">
			<view class="cell_list" style="padding: 0px; margin-bottom: 30rpx;">
				<view class="cell_left txt">
					<image src="/static/images/q1.png" style="width: 140rpx; height: 140rpx; margin-right: 20rpx;"></image>
				</view>
				<view style="font-weight: 600; font-size: 30rpx; width: 70%; color: #333; line-height: 50rpx; text-align: left;">{{detail.title}}</view>
			</view>
			<uni-forms :modelValue="answerModel" :rules="rules" ref="form">
				<uni-forms-item>
					<view class="cell_list">
						<view class="cell_left txt">Each number</view>
						<view class="cell_right ">{{detail.max_quantity==0?'不限制':detail.max_quantity}}</view>
					</view>
				</uni-forms-item>
				<uni-forms-item>
					<view class="cell_list">
						<view class="cell_left txt">Cloud hosting</view>
						<view class="cell_right ">
							<uni-number-box :value="answerModel.num" :max="detail.max_quantity==0?Infinity:detail.max_quantity" :min="1" background="#2979FF" color="#fff" @change="changeNum" />
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="amount">
					<view class="cell_list">
						<view class="cell_left txt" style="width: 50%;">Amount spent</view>
						<view class="cell_right ">
							{{answerModel.price}}<view style="float: right; margin-left: 20rpx;  font-size: 12px; margin-right: 20rpx;">USDT</view>
						</view>
					</view>
					<view style="font-size: 14px; color: #999; font-weight: 500; line-height: 50upx; text-align: right;">
						Available balance: {{parseFloat(user.money).toFixed(2)}} USDT</view>
				</uni-forms-item>
				<uni-forms-item>
					<view class="cell_list">
						<view class="cell_left txt">Total return</view>
						<view class="cell_right ">
							<span style="font-weight: 500;font-size: 16px;color: #1D61E7;">{{answerModel.interest_rate}} USDT</span></view>
					</view>
				</uni-forms-item>
				<uni-forms-item>
					<view class="cell_list">
						<view class="cell_left txt">Billing cycle</view>
						<view class="cell_right ">{{detail.billing_cycle}} DAYS</view>
					</view>
				</uni-forms-item>
				<uni-forms-item>
					<view class="cell_list">
						<view class="cell_left txt">Yield rate</view>
						<view class="cell_right ">{{answerModel.rate}}%</view>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view style="bottom: 0px; position: absolute; width:100vw; height: 160rpx;">
			<button type="primary" round style="width: 90%; margin: auto;" @click="submit">Submit</button>
		</view>
		
		<uni-popup ref="popup" type="dialog" :is-mask-click="true" background-color="#fff" borderRadius="40rpx">
			<view style="width: 80vw; padding: 20rpx 30rpx; border-radius: 40rpx; line-height: 50rpx;">
				<view style="font-size: 36rpx; font-weight: bold; text-align: center; margin-bottom: 30rpx;">PIN code</view>
				<uni-easyinput type="password" :passwordIcon="true" v-model="pingcode" placeholder="Enter the PIN code" />
				<button style="background-color: #1D61E7; color: #fff; margin: 40rpx auto;" @click="Confirm">Confirm</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { getUserInfo } from '@/config/utils';
	import {
		mapState,
		mapMutations
	} from 'vuex';
import detailsVue from './details.vue';
	export default {
		data() {
			return {
				answerModel:{
					num: 1,
					price: 0.00,
					interest_rate: 0.00,
					rate: 0,
				},
				pingcode: '',
				user: {},
				rules:{
					
				},
				detail: {}
			};
		},
		computed: {
			...mapState(['userInfo']),
		},
		//第一次加载
		onLoad(e) {
			uni.showLoading({
				title:'Array loading...'
			})
			if(e.id){
				getUserInfo(this.$i18n.locale).then(res => {
					this.user = res;
				});
				this.$http.get('/api/product/detail?id='+e.id+'&lang='+this.$i18n.locale).then(res => {
					if(res.code == 0){
						this.detail = res.data;
						this.answerModel.price = (parseFloat(this.answerModel.num) * parseFloat(this.detail.price)).toFixed(2);
						this.answerModel.interest_rate = (parseFloat(this.answerModel.num) * parseFloat(this.detail.interest_rate)).toFixed(2);
						this.answerModel.rate = ((parseFloat(this.answerModel.interest_rate) - parseFloat(this.answerModel.price)) * 100 / parseFloat(this.answerModel.price)).toFixed(2)
						uni.hideLoading();
					}
				}).catch(err => {
					uni.hideLoading()
				});
			}
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			submit(){
				this.$refs.popup.open('dialog');
			},
			changeNum(e){
				this.answerModel.num = e;
				this.answerModel.price = (parseFloat(this.answerModel.num) * parseFloat(this.detail.price)).toFixed(2);
				this.answerModel.interest_rate = (parseFloat(this.answerModel.num) * parseFloat(this.detail.interest_rate)).toFixed(2);
				this.answerModel.rate = ((parseFloat(this.answerModel.interest_rate) - parseFloat(this.answerModel.price)) * 100 / parseFloat(this.answerModel.price)).toFixed(2)
			},
			Confirm(){
				let data = {
					product_id: this.detail.id,
					quantity: this.answerModel.num,
					trade_password: this.pingcode
				}
				this.$http.post('/api/productOrder/create', data).then(res => {
					if(res.code == 0){
						this.pingcode = '',
						this.answerModel.num = 1;
						this.answerModel.price = this.detail.price;
						this.answerModel.interest_rate = this.detail.interest_rate;
						this.$refs.popup.close();
					}
				}).catch(err => {
					this.$refs.popup.close();
					uni.showToast({
						title:err,
						icon:'none'
					})
				});
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	body{background-color: #fff;}
	.page{min-height: 96vh;position: relative;}
	::v-deep .uni-numbox__minus{border-radius: 50%; width: 50rpx; height: 50rpx;}
	::v-deep .uni-numbox__plus{border-radius: 50%; width: 50rpx; height: 50rpx;}
	::v-deep .uni-numbox__value{ background-color: #fff !important; color: #000 !important}
	.rechargeTitle{
		font-weight: 400;font-size: 16px;color: #999999;line-height: 23px; text-align: center; margin-top: 30px;
	}
	.rechargeNet{
		font-weight: 600;font-size: 20px;color: #333;line-height: 23px; text-align: center; margin-top: 20px;
	}
	.txt{
		font-size: 14px; color:#999; font-weight: 500;
	}
	.cell_right{
		font-size: 14px; color:#333; font-weight: 500;
	}
	.s{
		border-radius: 10px; border: 1px solid #1D61E7; padding: 2px 8px; color: #1D61E7; font-size: 28rpx; font-weight: 600;
	}
</style>