<template>
	<view>
		<!-- 头部 -->
		<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 bgimg1 flex align-center justify-center">
					<view @click="_goback" class="cuIcon-back font-40 color-white"
						style="position: absolute;left: 30rpx;"></view>
					<text class="font-36 color-white weight-bold">{{i18n.ico.title}}</text>
				</view>
			</view>
		</view>
		<!-- 身体 -->
		<view class="width-750">
			<view class="height-110 padding-t-90 bj-589CF8">
				<view class="detailbox" v-html="data.content"></view>
			</view>
		</view>
		<!-- 预约按钮 -->
		<view class="yuyuebtn">
			<!-- <u-button class="custom-style" type="primary">立即预约</u-button> -->
			<view @click="getYuyue" v-if="status==2&&(!data.is_yuyue)" class="btn1">{{i18n.ico.text1}}</view>
			<view v-if="status==1" class="btn2">{{i18n.ico.text1}}</view>
			<view v-if="status==2&&data.is_yuyue" class="btn2">{{i18n.ico.text2}}</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBar: uni.getSystemInfoSync().statusBarHeight,
				data: '',
				status: -1,
				flag: true,
				ico:""
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		onLoad:function(e){
			this.ico = e.ico
		},
		onShow() {
			this.getDetails()
		},
		methods: {
			// 预约私募
			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()
							setTimeout(() => {
								uni.hideLoading()
							},1000)
						}
					})
				}
			},
			// 获取私募内容
			getDetails() {
				this.post('/index/ico_content',{
					id: this.ico
				}).then(res => {
					console.log('私募内容', res)
					if (res.code == 1) {
						this.data = res.data
						this.status = res.data.status
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	.fixed1 {
		position: fixed;
		top: 0;
		z-index: 1000;
		background: linear-gradient(180deg, #52F3C9 0%, #3ECEB2 100%);
	}

	.bj-589CF8 {
		background: linear-gradient(180deg, #3ECEB2 0%, #52F3C9 100%);
	}

	.detailbox {
		width: 750rpx;
		padding: 30rpx 30rpx 200rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 6rpx rgba(220, 220, 220, 0.16);
		border-radius: 20rpx;
	}

	.yuyuebtn {
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		margin-left: -300rpx;
	}

	.btn1 {
		width: 600rpx;
		height: 86rpx;
		background: #0165EE;
		border-radius: 20rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 86rpx;
		text-align: center;
	}

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