<template>
	<view :style="'background-color: '+theme.bg+';color: '+theme.text">
		<myNav :title="i18n.licai.text8"></myNav>
		
		<view class="topBox flex direction-column align-start justify-between">
			<text class="font-28 color-white">{{i18n.licai.text9}}</text>
			<text class="font-36 color-white">{{obj.money_trx}}</text>
		</view>
		
		<view class="width-670 margin-20-auto radiu-10 padding-b-30"
		:style="'background-color: '+theme.fu_bg+';color: '+theme.text"
		 style="overflow: hidden;">
			<view class="height-96 padding-w-24 flex align-center justify-between">
				<text class="font-28">{{i18n.licai.text10}}</text>
				<text class="font-28">{{obj.min_num}} {{obj.curr_name}}</text>
			</view>
			<view class="height-96 padding-w-24 flex align-center justify-between">
				<text class="font-28">{{i18n.licai.text11}}</text>
				<text class="font-28">{{obj.max_num}} {{obj.curr_name}}</text>
			</view>
			<view class="height-96 padding-w-24 flex align-center justify-between">
				<text class="font-28">{{i18n.licai.text12}}</text>
				<text class="font-28">{{obj.day}} {{i18n.licai.text6}}</text>
			</view>
			<view class="height-96 padding-w-24 flex align-center justify-between">
				<text class="font-28">{{i18n.licai.text13}}</text>
				<text class="font-28">{{rixi}}%</text>
			</view>
			<view class="padding-w-20 padding-c-10">
				<p class="font-28 margin-c-10">{{i18n.licai.text14}}</p>
				<view class="height-96 radiu-16 padding-w-24 flex align-center justify-between">
					<input class="height-96 flex-1 line-height-96 font-26 padding-w-20" type="number" v-model="money" :placeholder="i18n.licai.text15" />
				</view>
			</view>
			<view class="padding-w-20 padding-c-10">
				<p class="font-28 margin-c-10">{{i18n.licai.text16}}</p>
				<view class="height-96 radiu-16 padding-w-24 flex align-center justify-between">
					<input class="height-96 flex-1 line-height-96 font-26 padding-w-20" type="text" v-model="pay_pwd" password :placeholder="i18n.licai.text17"/>
				</view>
			</view>
			<view class="width-100b margin-c-20 text-right padding-w-30">
				<text class="font-26 color-EA466F">{{money||0}} + ( {{money||0}} * {{rixi}}% * {{obj.day}}) ≈ {{allNumber}}</text>
			</view>
			<view class="height-96 flex align-center justify-center">
				<button @click="touzi" type="default" class="cu-btn" style="width: 600rpx;height: 96rpx;color: #FFFFFF;font-size: 28rpx;background: #2DD1AF;opacity: 1;">{{i18n.licai.text8}}</button>
			</view>
		</view>
		
		<view class="height-64 flex align-center padding-w-60">
			<text class="font-28 color-3C2E33 weight-bold">{{i18n.licai.text18}}</text>
		</view>
		
		<view class="width-670 margin-20-auto radiu-10 padding-b-30"
		 :style="'background-color: '+theme.fu_bg+';color: '+theme.text"
		 style="overflow: hidden;">
			<view class="height-96 padding-w-24 flex align-center justify-between">
				<text class="font-28">{{i18n.licai.text19}}</text>
				<text class="font-28">{{obj.name}}</text>
			</view>
			<view class="height-96 padding-w-24 flex align-center justify-between">
				<text class="font-28">{{i18n.licai.text20}}</text>
				<text class="font-28">{{i18n.licai.text21}}</text>
			</view>
			<view class="height-96 padding-w-24 flex align-center justify-between">
				<text class="font-28">{{i18n.licai.text14}}</text>
				<text class="font-28">{{money||0}} {{obj.curr_name}}</text>
			</view>
			<view class="height-96 padding-w-24 flex align-center justify-between">
				<text class="font-28">{{i18n.licai.text13}}</text>
				<text class="font-28">{{rixi}}%</text>
			</view>
			<view class="height-96 padding-w-24 flex align-center justify-between">
				<text class="font-28">{{i18n.licai.text12}}</text>
				<text class="font-28">{{obj.day}} {{i18n.licai.text6}}</text>
			</view>
			<view class="height-96 padding-w-24 flex align-center justify-between">
				<text class="font-28">{{i18n.licai.text22}}</text>
				<text class="font-28">{{rixi}}% * {{obj.day}} = {{Number(rixi*obj.day).toFixed(2)}}%</text>
			</view>
			<view class="padding-w-24">
				<text class="height-60 font-28 line-height-60">{{i18n.licai.text23}}</text>
				<view class="padding-c-20">
					<text class="font-24">{{obj.msg}}</text>
				</view>
			</view>
		</view>
		
		<view class="height-40"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				obj:{},
				money:'',
				pay_pwd:'',
				flag:true,
				rixi_arr:[],
				theme: '',
			};
		},
		computed:{
			i18n() {
				return this.$t('message');
			},
			allNumber(){
				if(this.money==''){
					return 0
				}else{
					let temp = Number(this.money) + Number(this.money*this.rixi/100*this.obj.day)
					return Number(temp).toFixed(2)
				}
			},
			rixi(){
				if(this.money==''){
					return this.obj.rixi
				}else{
					let num = 0
					this.rixi_arr.forEach((item)=>{
						if(this.money >= item.key){
							num = item.value
						}
					})
					return num
				}
			}
		},
		onLoad(e) {
			this.id = e.id
			this.product_con()
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
		},
		methods:{
			touzi(){
				if(!this.flag) return
				if(this.money == ''){
					this.tos(this.i18n.licai.text15)
					return
				}
				if(this.pay_pwd == ''){
					this.tos(this.i18n.licai.text17)
					return
				}
				this.post('/product/product_buy',{
					num:this.money,
					pay_pwd:this.pay_pwd,
					id:this.id
				},true).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.tos(res.msg)
						this.pay_pwd = ''
						setTimeout(()=>{
							uni.redirectTo({
								url:'/pages/index/money/my_record'
							})
						},500)
					}
				})
			},
			product_con(){
				this.post('/product/product_con',{
					id:this.id
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.obj = res.data
						this.rixi_arr = res.data.rixi_arr
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.topBox{
		width: 670rpx;
		height: 183rpx;
		margin: 24rpx auto;
		border-radius: 10rpx;
		padding: 36rpx 20rpx;
		background-color: #2DD1AF;
	}
</style>
