<template>
	<view :style="'background-color: '+theme.bg+';color: '+theme.text" style="height: 100vh;">
		<!-- 头部 -->
		<view class="width-750 relative flex align-center justify-center"
			:style="{height: `calc(${statusBar}px + 110rpx)`}">
			<view class="width-750 fixed1" :style="{paddingTop: statusBar + 'px', height: `calc(${statusBar}px + 110rpx)`}">
				<view class="width-750 height-110 padding-w-30 flex align-center justify-center">
					<view @click="_goback" class="cuIcon-back font-40 "
						style="position: absolute;left: 30rpx;"></view>
					<text class="font-36 weight-bold">{{data.name}}</text>
					<view @click="router.push('/pages/index/white_paper?ico='+ico)" class="font-30 absolute" style="right: 30rpx;">{{i18n.ico.three6}}</view>
				</view>
			</view>
		</view>
		<!-- 身体 -->
		<view class="width-750">
			<view class="padding-w-30 padding-t-45 ">
				<view class="padding-b-200">
					<view class="flex align-center justify-between">
						<text class="font-36 numbold-font">{{i18n.ico.title}}</text>
						<view @click="router.push('/pages/index/icoDetails?ico=' + ico)" class="morebtn">{{i18n.ico.text3}}</view>
					</view>
					<view class="margin-t-20 width-100b hidden-nowrap-ellipsis-3 font-26">
						{{data.content_txt}}
					</view>
					<view class="inputbox padding-t-24 padding-w-16"  :style="'background-color: '+theme.fu_bg">
						<text class="font-30 weight-bold">{{i18n.ico.title}}{{i18n.ico.text4}}</text>
						<u-line-progress class="margin-t-23" :striped="true" :striped-active="true"
							:percent="percentage" height="24" active-color="#3ECEB2">
						</u-line-progress>
						<view class="flex align-center justify-between margin-t-18">
							<text class="font-26 color-0165EE numbold-font">{{data.count_num}} {{data.curr_name}}</text>
							<text class="font-26 numbold-font">{{data.real_num}} {{data.curr_name}}</text>
						</view>
						<!-- 数量 -->
						<view class="width-100b height-192 padding-c-27 flex direction-column justify-between margin-t-24">
							<view class="font-28 weight-bold">{{i18n.ico.text5}}</view>
							<view class="flex align-center justify-between">
								<input class="font-28" :placeholder="i18n.ico.tos1" placeholder-class="color-C3C3C3"
									type="digit" v-model="number" />
								<text class="font-28 weight-bold">{{data.curr_name}}</text>
							</view>
						</view>
						<view class="flex align-center font-26 weight-bold">
							<text>{{i18n.ico.text6}}</text>
							<text class="color-0165EE numbold-font margin-w-5">{{(number*data.price).toFixed(4)}}</text>
							<text class="numbold-font">USDT</text>
						</view>
						<!-- 密码 -->
						<view class="width-100b height-192 padding-c-27 flex direction-column justify-between margin-t-77">
							<view class="font-28 weight-bold">{{i18n.ico.text7}}</view>
							<input class="font-28" :placeholder="i18n.ico.tos2" placeholder-class="color-C3C3C3"
								type="text" v-model="paypwd" password/>
						</view>
					</view>
				</view>
				<!-- 预约按钮 -->
				<view class="yuyuebtn">
					<u-button v-if="data.status==3" @click="openPopup" class="custom-style" type="primary">{{i18n.ico.text8}}</u-button>
					<u-button v-if="data.status==2&&(!data.is_yuyue)" @click="getYuyue" class="custom-style" type="primary">{{i18n.ico.text1}}</u-button>
					<view v-if="data.status==2&&data.is_yuyue" class="btn2">{{i18n.ico.text2}}</view>
				</view>
			</view>
		</view>
		

		<!-- 确认弹窗 -->
		<u-popup v-model="show" mode="center" border-radius="20">
			<view class="width-600 height-298 bj-white" style="overflow: hidden;">
				<view class="height-203 padding-t-93 padding-b-65 text-center">
					<text class="font-30 color-333333 weight-bold">{{i18n.ico.text9}}</text>
				</view>
				<view class="height-96 flex">
					<view @click="show=false" class="flex-1 line-height-96 text-center bj-c3c3c3-02">
						<text class="font-28 color-C3C3C3 weight-bold">{{i18n.ico.text10}}</text>
					</view>
					<view @click="getBuy()" class="flex-1 line-height-96 text-center bj-0165EE">
						<text class="font-28 color-white weight-bold">{{i18n.ico.text11}}</text>
					</view>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBar: uni.getSystemInfoSync().statusBarHeight,
				data: '',
				number: '',
				paypwd: '',
				percentage: 0,
				show: false,
				flag: true,
				
				theme: '',
				ico:""
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		onLoad:function(e){
			this.ico = e.ico
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
			this.getDetails()
		},
		methods: {
			// 购买私募
			getBuy() {
				if (!this.flag) {
					return
				} else {
					uni.showLoading({
						title: '',
						mask: true
					});
					this.flag = false
					let obj = {
						id: this.data.id,
						num: this.number,
						pay_pwd: this.paypwd
					}
					this.post('/index/ico_sub', obj).then(res => {
						console.log('购买私募返回', res)
						this.flag = true
						if (res.code == 1) {
							this.tos(res.msg)
							uni.hideLoading()
							setTimeout(() => {
								uni.navigateBack()
							}, 500)
						}
					})
				}
			},
			// 预约私募
			getYuyue() {
				if (!this.flag) {
					return
				} else {
					this.flag = false
					uni.showLoading({
						title: '',
						mask: true
					});
					this.post('/index/ico_yuyue', {
						id: this.data.id
					}).then(res => {
						console.log('预约返回', res)
						this.flag = true
						if (res.code == 1) {
							this.tos(res.msg)
							this.getDetails()
						}
					})
				}
			},
			// 打开确认弹窗
			openPopup() {
				if (this.number == '') return this.tos(this.i18n.ico.tos1)
				if (this.paypwd == '') return this.tos(this.i18n.ico.tos2)
				this.show = true
			},
			// 获取私募内容
			getDetails() {
				this.post('/index/ico_content',{
					id: this.ico
				}).then(res => {
					console.log('私募内容', res)
					if (res.code == 1) {
						this.data = res.data
						this.percentage = Math.floor((res.data.count_num - res.data.real_num) / res.data.count_num * 100)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.fixed1 {
		position: fixed;
		top: 0;
		z-index: 1000;
	}

	.bj-589CF8 {
		background: linear-gradient(to bottom, #52F3C9 0%, #3ECEB2 100%);
		border-radius: 0rpx 0rpx 120rpx 120rpx;
	}

	.yuyuebtn {
		margin-top: 50rpx;
	}

	.custom-style {
		width: 600rpx;
		height: 86rpx;
		background: #3ECEB2;
		border-radius: 20rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.morebtn {
		width: 180rpx;
		height: 66rpx;
		background: #3ECEB2;
		border: 1rpx solid #C9E0FF;
		opacity: 1;
		border-radius: 33rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 66rpx;
		text-align: center;
	}

	.inputbox {
		width: 690rpx;
		height: 682rpx;
		// background: #FFFFFF;
		box-shadow: 0rpx 3rpx 6rpx rgba(220, 220, 220, 0.16);
		opacity: 1;
		border-radius: 20rpx;
		margin-top: 42rpx;
	}

	.bj-c3c3c3-02 {
		background: rgba(195, 195, 195, 0.2);
	}
	.btn2 {
		width: 690rpx;
		height: 86rpx;
		background: rgb(210, 210, 210);
		border-radius: 20rpx;
		font-size: 30rpx;
		color: #8B8F95;
		line-height: 86rpx;
		text-align: center;
	}
</style>
