<template>
	<view class="cotainer">
		<image class="login-top" :src="require('@/static/login-top.png')"></image>
		<view class="login">
			<view class="login-title">
				<image :src="require('@/static/login-title.png')"></image>
				<view class="login-title-text">——通安镇2023-2024年度基层党员冬训</view>
				<!-- <view class='login-title-time'>
					<span>答题时间</span>
					<span>{{startTime}}至{{endTime}}</span>
				</view> -->
			</view>
			<view class="login-form">
				<view>
					<u-input :placeholderStyle="'color:#999;font-size:30rpx'" v-model="form.name" placeholder="请输入姓名"
						:border="false" shape="circle" clearable></u-input>
				</view>
				<view>
					<u-input :placeholderStyle="'color:#999;font-size:30rpx'" v-model="form.mobile" placeholder="请输入手机号"
						:border="false" shape="circle" clearable></u-input>
				</view>
				<view>
					<u-input @focus="openPicker" :placeholderStyle="'color:#999;font-size:30rpx'" v-model="form.address"
						placeholder="请选择居住地所属党支部" :border="false" shape="circle">
					</u-input>
					<view class="icon-right">
						<view>|</view>
						<u-icon size="30" name="arrow-down" @click="openPicker"></u-icon>
					</view>
				</view>
			</view>
			<view class="login-btn">
				<view class="login-btn-btn" @click="submit" :class="{'login-btn-disabled':isEnd}">提   交</view>
				<!-- <view class="login-btn-tips">
					活动<span>须知</span><image :src="require('@/static/login-tip.png')" mode=""></image>
					
				</view> -->
			</view>
		</view>
		<u-picker v-model="showParty" @confirm="confirmParty" :range="partyList" range-key="name" confirm-color="#156e68" mode="selector"></u-picker>
		<view class="show-modal" v-if="showSuccess">
			<view class="show-modal-main">
				<view class="show-modal-top"></view>
				<view class="show-modal-center">
					<image :src="require('@/static/login-success.png')" mode="widthFix"></image>
					<view>注册成功</view>
				</view>
				<view class="show-modal-footer">
					<view class="toMap" @click="toMap">去打卡</view>
				</view>
			</view>
			
		</view>
	
	</view>
</template>

<script>
	import {
		toast,
		formatDateToMonthDay,
		isCurrentTimeBetween,
		isOnlyChinese,
		isNull,
		isMobile
	} from "@/common/util.js"
	export default {
		data() {
			return {
				startTime: '--',
				endTime: '--',
				isEnd: false,
				showParty:false,
				partyList:[],
				form: {
					name: '',
					mobile: '',
					address: ''
				},
				showSuccess:false

			}
		},
		onLoad() {
			// this.getConfig()
			this.getParty()
		},
		methods: {
			async getConfig() {
				const res = await this.$u.api.getAppId()
				this.startTime = formatDateToMonthDay(res.start_time)
				this.endTime = formatDateToMonthDay(res.end_time)
				this.isEnd = isCurrentTimeBetween(res.start_time,res.end_time)
				console.log("isEnd",this.isEnd)
			},
			async getParty(){
				const res = await this.$u.api.getParty()
				this.partyList = res
			},
			

			openPicker() {
				uni.hideKeyboard()
				this.showParty = true
			},
			confirmParty(e){
				console.log(e)
				if(e){
					this.form.address = this.partyList[e].name
				}
			},
			toMap(){
				uni.redirectTo({
					url:'/pages/map/map'
				})
			},
			submit() {
				// if(this.isEnd){
				// 	toast("活动已结束")
				// 	return
				// }
				if(isNull(this.form.name)||isNull(this.form.mobile)||isNull(this.form.address)){
					toast("请填写所有信息")
					return
				}
				if(!isOnlyChinese(this.form.name)){
					toast("请输入中文姓名")
					return
				}
				if(!isNull(this.form.mobile)&&!isMobile(this.form.mobile)){
					toast("请输入正确的手机号")
					return
				}
				this.$u.api.saveUser(this.form).then(res=>{
					// toast('注册成功')
					// this.$u.vuex('vuex_user', res)
					this.showSuccess = true
				})
			}
		}
	}
</script>

<style lang="scss">
	.cotainer {
		height: 100vh;
		width: 100vw;
		background: #e1f1f2;
		position: relative;
		overflow: scroll;
		::v-deep .u-drawer-content-visible{
			height:60%!important;
			.u-datetime-picker{
				height:100%!important;
				.u-picker-body{
					height:100%!important;
				}
			}
		}
		.show-modal{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 11;
			background-color: rgba(0, 0, 0, 0.6);
			&-main{
				width: 70%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: #fff;
				border-radius: 20rpx;
				box-shadow: 0.5px 3px 9px 0px rgba(255,255,255,.2);
				padding:30rpx
				
			}
			&-center{
				text-align: center;
				font-size: 32rpx;
				min-height:300rpx;
				margin-top:30rpx;
				image{
					width:70%;
					margin-bottom:30rpx;
				}
			}
			&-footer{
				text-align: center;
				margin-bottom:30rpx;
				view{
					box-shadow: 0.5px 3px 9px 0px rgba(235,107,85,0.3);
					background:#e50015;
					border-radius: 44rpx;
					text-align: center;
					height:60rpx;
					color:#fff;
					line-height: 60rpx;
					font-size: 28rpx;
					width:70%;
					margin:0 auto
				}
			}
		}
		
		.login-top {
			width: 100%;
			height: 416rpx;
		}

		.login {
			border-radius: 50rpx 50rpx 0 0;
			margin-top: -60rpx;
			background: #e1f1f2;
			position: relative;

			&-title {
				margin: 0 auto;
				text-align: center;
				padding-top: 70rpx;

				image {
					width: 536rpx;
					height: 62rpx;
				}

				&-text {
					color: #156e68;
					font-size: 28rpx;
					padding: 10rpx 0
				}

				&-time {
					margin-top: 20rpx;
					text-align: center;

					span {
						font-size: 26rpx;
						color: #999999;
						border-radius: 0 20rpx 20rpx 0;
						background-color: #fff;
						padding: 10rpx 35rpx;
						display: inline-block;
					}

					span:first-child {
						background-color: #156e68;
						color: #fff;
						border-radius: 20rpx 0 0 20rpx;
					}
				}
			}
			&-form{
				padding:20rpx 60rpx;
				margin-top:20rpx;
				>view{
					margin-bottom: 30rpx;
					background-color: #fff;
					padding: 20rpx 40rpx;
					border-radius: 20rpx;
					display: flex;
					.icon-right{
						display: flex;
						align-items: center;
						.u-icon{
							margin:0 20rpx;
							color:#999;
						}
					}
					
				}
			}
			&-btn{
				padding:30rpx 60rpx;
				padding-top:0;
				&-btn{
					box-shadow: 0.5px 3px 9px 0px rgba(235,107,85,0.3);
					background:#e50015;
					border-radius: 44rpx;
					text-align: center;
					height:88rpx;
					color:#fff;
					line-height: 88rpx;
					font-size: 34rpx;
				}
				&-disabled{
					background-color: #ddd;
				}
				&-tips{
					color:#999999;
					font-size: 25rpx;
					text-align: center;
					margin-top:30rpx;
					span{
						color:#e50015
					}
					image{
						width:28rpx;
						height:28rpx;
						vertical-align: sub;
						margin-left:10rpx
					}
				}
				
			}
		}
	}
</style>