<template>
	<view class="signup" @tap="cancleChoose">
		<custom-nav :title="pageTitle"></custom-nav>
		<custom-toast ref='toast'></custom-toast>
		<view class="content">
			<navigator url="../rules/rules">
				<image :src="userServerInfo.banner_2" mode="scaleToFill"></image>
			</navigator>
			<view class="form">
				<view class="title">确认个人身份信息</view>
				<view class="input">
					昵称：<input placeholder="请输入昵称"disabled v-model="name" type="text"/>
				</view>
				<!--隐藏等级 -->
				<!-- <view class="input" @tap.stop="down">
					类别：<input placeholder="请输入类别" v-model="level" disabled type="text"/>
					<view class="down" :class="showDown ? 'show' : 'hide'">
						<view class="showitem" v-for="(item, index) in showList" :key="index" @tap="choose(item)">{{ item }}</view>
					</view>
					<text class="cuIcon" :class="showDown ? 'cuIcon-fold' : 'cuIcon-unfold'"></text>
				</view> -->
				<!-- <view v-if="userServerInfo.type == 1" class="title">确认上级批发商</view>
				<view v-if="userServerInfo.type == 1" class="input">
					批发商：<input placeholder="请输入批发商信息" v-model="superInfo" class="super" disabled type="text"/>
				</view> -->
			</view>
			<view class="pay" @tap="signup">缴纳￥{{ userServerInfo.money }}报名</view>
		</view>
	</view>
</template>

<script>
	import { api_signup } from '../../api.js'
	export default {
		data() {
			return {
				pageTitle: '报名参赛',
				showDown: false,  //是否显示下拉容器
				name: '',  //用户名
				level: '',  //用户等级
				superInfo: '',  //经销商信息
				levelList: ['批发商', '经销商'],  //点击下拉数组
				showList: [],  //下拉选择框里显示的内容
				loading: false
			};
		},
		computed: {
			userWeixinInfo () {
				return this.$store.state.userWeixinInfo
			},
			userServerInfo () {
				return this.$store.state.userServerInfo
			}
		},
		created() {
			this.name = this.userServerInfo.name,
			this.level = this.userServerInfo.level_name
			this.superInfo = this.userServerInfo.super_name
		},
		methods: {
			down (e) {  //点击下拉效果
				this.showList = []
				this.levelList.forEach(e => {
					if (e !== this.level) {
						this.showList.push(e)
					}
				})
				this.showDown = !this.showDown
			},
			cancleChoose () {  //收起下拉效果
				this.showDown = false
			},
			choose (level) {  //选择下拉选择里的等级
				this.level = level
			},
			async signup () {  //报名
				if (!this.loading) {
					uni.showLoading({ title: '加载中', mask: true })  //显示loading
					const [ , { code }] = await uni.login()
					this.loading = true
					const that = this 
					this.$ajax.get(`${api_signup}?code=${code}&season=${this.userServerInfo.season}&name=${this.name}&level=${this.level}`).then(([ , { data: res }]) => {  //发送code 获取 package 和 paySign
						uni.hideLoading()
						that.loading = false
						if (res.code === 200) {
							this.$hideLoading()
							uni.requestPayment({
								provider: 'wxpay',
								...res.data,
								success: res => {
									// uni.navigateBack({ delta: 6 })
									uni.redirectTo({
										url: "../certificate/notice"
									})
									this.$store.commit('SIGNUP')
									console.log(this.$store.state.userServerInfo.signuped);
									uni.$emit('MESSAGE', '报名成功')
									let user = this.$store.state.userServerInfo
									user.enroll_time = Date.now();
									this.$store.commit("GETUSERSERVERINFO", user);
								},
								fail: function (err) {
									uni.$emit('MESSAGE', '报名失败')
								}
							})
						} 
						// else if (+res.code === 300) {
						// 	uni.showModal({
						// 		content: "报名失败",
						// 		showCancel: false
						// 	})
						// } else if (+res.code === 400) {
						// 	uni.showModal({
						// 		content: "已报名，请勿重复报名",
						// 		showCancel: false
						// 	})
						// 	uni.navigateBack()
						// } else if (+res.code === 600) {
						// 	uni.showModal({
						// 		content: "报名时间未到，请确认报名时间",
						// 		showCancel: false
						// 	})
						// 	uni.navigateBack()
						// } 
						else {
							uni.showModal({
								content: res.msg,
								showCancel: false
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.signup {
		@include page();
		.content {
			display: flex;
			flex-direction: column;
			image {
				display: block;
				width: 100%;
				height: 215rpx;
			}
			.form {
				box-sizing: border-box;
				padding: 30rpx;
				.title {
					height: 90rpx;
					line-height: 90rpx;
					font-size: 40rpx;
					color: rgba(44,44,44,1);
				}
				.input {
					position: relative;
					width: 100%;
					height: 70rpx;
					line-height: 70rpx;
					margin-bottom: 44rpx;
					input {
						width: 594rpx;
						height: 100%;
						box-sizing: border-box;
						padding: 0 26rpx;
						line-height: 70rpx;
						font-size: 30rpx;
						color: #2C2C2C;
						background:rgba(238,238,238,1);
						border: none;
						border-radius: 2rpx;
						float: right;
						&.super {
							width: 530rpx;
						}
					}
					.down {
						position: absolute;
						height: 0;
						overflow: hidden;
						width: 594rpx;
						top: 70rpx;
						right: 0;
						background: #FFFFFF;
						box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.2);
						.showitem {
							height: 70rpx;
							width: 100%;
							line-height: 70rpx;
							box-sizing: border-box;
							padding: 0 26rpx;
							font-size: 30rpx;
						}
						&.show {
							animation: down-show .2s;
							animation-fill-mode: forwards;
						}
						&.hide {
							animation: down-hide .2s;
							animation-fill-mode: forwards;
						} 
					}
					.cuIcon {
						position: absolute;
						right: 26rpx;
						font-size: #2C2C2C;
						font-size: 38rpx;
					}
				}
			}
			.pay {
				width: 400rpx;
				height: 70rpx;
				background: rgba(250,99,66,1);
				border-radius: 35rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 14rpx auto 0;
			}
		}
	}
	@keyframes down-show {
		0% {
			height: 0;
		}
		100% {
			height: 140rpx;
		}
	}
	@keyframes down-hide {
		0% {
			height: 140rpx;
		}
		100% {
			height: 0;
		}
	}
</style>
