<template>
	<view class="main">
		<!-- nav -->
		<navigation>{{ i18n.Subscription }}</navigation>
		<view class="body">
			<!-- 倒计时 -->
			<view class="countDown">
				<view class="item">
					<view class="title">{{ i18n.Days }}</view>
					<view class="value">{{day}}</view>
				</view>
				<view class="item">
					<view class="title">{{ i18n.Hours }}</view>
					<view class="value">{{hr}}</view>
				</view>
				<view class="item">
					<view class="title">{{ i18n.Minutes }}</view>
					<view class="value">{{min}}</view>
				</view>
				<view class="item">
					<view class="title">{{ i18n.Seconds }}</view>
					<view class="value">{{sec}}</view>
				</view>
			</view>

			<!-- input -->
			<view class="input-item">
				<u-input class="input" v-model="SubscribeCount" color="#A1A0A8" fontSize="32rpx" border="none"
					:placeholder="i18n.PleaseChooseCoin" @focus="SubscribeCount=''">
				</u-input>
				<view class="selectCoin" @click="USDTPopupShow = true">{{deinfo.sysCoinInfo.coinCode}}
				</view>
			</view>
			<!-- total -->
			<key-value-row :keyName="i18n.Total" :value="'≈'+coinPirce+deinfo.coins[0].code" :size="'24rpx'"
				:leftColor="'#A1A0A8'" :rightColor="'#A1A0A8'"></key-value-row>

			<!-- 按钮 -->
			<u-button class="button" color="#00E8A2" throttleTime="500" :disabled="SubscribeNowed" @click="subscribe">{{
                    i18n.SubscribeNow
            }}
			</u-button>

			<!-- ProjectDetails -->
			<view class="contentTitle">
				<view class="ProjectDetails">{{ i18n.ProjectDetails }}</view>
				<view class="videoBtn" @click="getContact('video')">{{ i18n.Video }}</view>
				<view class="whiteBook" @click="getContact('book')">{{ i18n.WhiteBook }}</view>
			</view>

			<!-- 文字内容 -->
			<view class="content">{{des}}</view>

		</view>
	</view>
</template>

<script>
	import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue';
	import UButton from '../../uview-ui/components/u-button/u-button'
	import api from '@/utils/api'
	import constant from '@/utils/constant.js';
	export default {
		name: "subscriptionDetails",
		data() {
			return {
				// 计算的价格
				coinPirce: 0,
				toLiveBtn: '',
				_interval: null,
				des: '',
				SubscribeCount: 0,
				DonatePopupShow: false,
				USDTPopupShow: false,
				DonatePopupDisabled: true,
				coinInfo: {},
				rules: {},
				radioValue: '',
				baseURL: '',
				deinfo: {
					sysCoinInfo:{},
					coins:[{}]
				},
				day: '',
				hr: '',
				min: '',
				sec: '',
			};
		},
		computed: {
			i18n() {
				return this.$t("subscription");
			},
			SubscribeNowed() {
				if (this.SubscribeCount == 0 || !this.SubscribeCount || isNaN(this.SubscribeCount)) {
					return true
				} else {
					return false
				}
			}
		},
		watch: {
			SubscribeCount: {
				handler(newName, oldName) {
					this.SubscribeCount = newName
					this.coinPirce = newName / this.deinfo.sysCoinInfo.initalPrice
					this.coinPirce = parseFloat(this.coinPirce.toPrecision(10))
					this.coinPirce = String(this.coinPirce)
					this.coinPirce = this.coinPirce.substring(0, this.coinPirce.indexOf(".") + 9);
				}
			}
		},

		onLoad(res) {
			this.baseURL = constant.BASE_URL
			this.getDetail(res.id);
			// console.log(this.$t('login.emailInputMessage'));
		},
		onShow() {},
		methods: {
			//提交申购订单
			subscribe() {
				api.exchangeCoin({
					baseSymbol: this.deinfo.coins[0].code,
					coinSymbol: this.deinfo.sysCoinInfo.coinCode,
					baseAmount: this.SubscribeCount,
				}).then(res => {
					uni.$u.toast(this.$t("login").Successfulsubscription)
				})
			},
			//当离开页面时，清除倒计时
			beforeDestroy() {
				clearInterval(this._interval)
			},
			// 倒计时事件
			countdown(e) {
				const that = this
				that._interval = setInterval(() => {
					if (e == 0) {
						// 计时结束，清除缓存
						clearInterval(that._interval)
					} else {
						e--
						let day = parseInt(e / 60 / 60 / 24)
						let hr = parseInt(e / 60 / 60 % 24)
						let min = parseInt(e / 60 % 60)
						let sec = parseInt(e % 60)
						this.day = day > 9 ? day : '0' + day
						this.hr = hr > 9 ? hr : '0' + hr
						this.min = min > 9 ? min : '0' + min
						this.sec = sec > 9 ? sec : '0' + sec
						that.toLiveBtn = `${this.day}天${this.hr}时${this.min}分${this.sec}秒`
					}
				}, 1000);
			},

			radioChange(e) {
				// console.log(e);
			},
			// 跳转视频和pdfe
			getContact(e) {
				let url;
				if (e == 'video') {
					url = this.deinfo.sysCoinInfo.videoWebsite
				} else {
					url = this.deinfo.sysCoinInfo.whitePaperWebsite
				}
				// #ifdef APP-PLUS
				plus.runtime.openURL(url);
				// #endif
				// #ifdef H5
				window.location.href = url
				// #endif
			},
			// 申购详情
			getDetail(e) {
				api.subscription({
					coinCode: e,
				}).then(res => {
					this.deinfo = res;
					this.des = this.deinfo.sysCoinInfo.info
					this.deinfo.lefttime=this.deinfo.lefttime/1000
					this.countdown(this.deinfo.lefttime)
				})
			},
		},
		components: {
			UButton,
			KeyValueRow
		}
	}
</script>

<style lang="scss" scoped>
	.main {

		.body {
			overflow: hidden;
			margin-top: 200rpx;
			padding: 0 48rpx;

			.countDown {
				margin-top: 60rpx;
				height: 248rpx;
				background-image: url(../../static/subscription/RoundedRectangle.png);
				background-repeat: no-repeat;
				background-size: 654rpx 248rpx;
				color: #15141F;
				padding: 36rpx 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				box-sizing: border-box;

				.item {
					// width: 140rpx;
					height: 174rpx;
					font-weight: bold;


					.title {
						font-size: 32rpx;
						text-align: center;
					}

					.value {
						margin-top: 10rpx;
						font-size: 96rpx;
						text-align: center;
					}
				}

			}

			.input-item {
				position: relative;
				overflow: hidden;
				height: 124rpx;
				line-height: 124rpx;
				background: #323045;
				margin: 32rpx 0;
				border-radius: 32rpx;
				padding: 0 40rpx;

				/deep/.u-form-item__body {
					padding: 0;
				}

				.input {
					width: 80%;
					height: 124rpx;
				}

				.selectCoin {
					position: absolute;
					width: 150rpx;
					height: 54rpx;
					top: 36rpx;
					right: 0rpx;
					line-height: 56rpx;
					font-size: 36rpx;
					padding: 0;
					color: #fff;
				}
			}

			.button {
				margin-top: 38rpx;
				margin-bottom: 48rpx;
				height: 112rpx;
				line-height: 112rpx;
				border-radius: 32rpx;
				font-size: 32rpx;
				color: #15141F !important;
				font-weight: bold;
			}

			.contentTitle {
				position: relative;
				margin-bottom: 32rpx;

				.ProjectDetails {
					font-size: 32rpx;
					color: #fff;
				}

				.videoBtn {
					position: absolute;
					top: 0;
					right: 184rpx;
					width: 134rpx;
					height: 48rpx;
					line-height: 48rpx;
					background: #F2FE8D;
					border-radius: 8rpx;
					text-align: right;
					color: #15141F;
					font-size: 24rpx;
					font-weight: bold;
					box-sizing: border-box;
					padding: 0 16rpx;

					&::before {
						display: block;
						position: absolute;
						content: '';
						background-image: url(../../static/subscription/ic_play.png);
						background-repeat: no-repeat;
						background-size: 32rpx;
						width: 32rpx;
						height: 32rpx;
						top: 8rpx;
						left: 10rpx;
					}
				}

				.whiteBook {
					position: absolute;
					top: 0;
					right: 0rpx;
					width: 164rpx;
					height: 48rpx;
					line-height: 48rpx;
					background: #F2FE8D;
					border-radius: 8rpx;
					text-align: center;
					color: #15141F;
					font-size: 24rpx;
					font-weight: bold;
					box-sizing: border-box;
				}
			}


			.content {
				font-size: 24rpx;
				color: #A1A0A8;
				margin-bottom: 48rpx;
				line-height: 40rpx;
			}




		}

	}
</style>
