<template>
	<view class="content">
		<view class="head">
			<image src="../../static/images/liangbiao-bg.png"></image>
		</view>
		<view class="con">
			<view class="tab-con">
				<view :class="['tab', tabCur == 0 ? 'tab-first' : '']" @click="selectAuto">自动选择</view>
				<view :class="['tab', tabCur == 1 ? 'tab-second' : '']" @click="selectTab">手动输入</view>
			</view>
			<view class="info" v-if="tabCur == 0">
				<view class="line">
					<view class="title">我的儿童:</view>
					<input type="text" v-model="child" name="child" placeholder-style="color:#c7c7c7"
						placeholder="选择绑定的儿童>" auto-focus @click="popChild" />
				</view>
				<view class="line">
					<view class="title">儿童姓名:</view>
					<input type="text" v-model="childName" name="childName" placeholder-style="color:#c7c7c7"
						placeholder="选择完儿童自动填写">
				</view>
				<view class="line">
					<view class="title">性别:</view>
					<input type="text" v-model="childSexAuto" name="childSex" placeholder-style="color:#c7c7c7"
						placeholder="选择完儿童自动填写">
				</view>
				<view class="line">
					<view class="title">出生日期:</view>
					<input type="text" v-model="birthday" name="birthday" placeholder-style="color:#c7c7c7"
						placeholder="选择完儿童自动填写">
				</view>
				<view class="line">
					<view class="title">联系电话:</view>
					<input type="text" v-model="phone" name="phone" placeholder-style="color:#c7c7c7"
						placeholder="选择完儿童自动填写">
				</view>
				<view class="address">
					<view class="title">地址(选填):</view>
					<textarea class="text" type="text" v-model="address" name="address"
						placeholder-style="color:#c7c7c7" placeholder="请输入地址"></textarea>
				</view>
			</view>
			<view class="hand" v-if="tabCur == 1">
				<view class="line">
					<view class="title">儿童姓名:</view>
					<input type="text" v-model="childName" name="childName" placeholder-style="color:#c7c7c7"
						placeholder="请输入儿童真实姓名">
				</view>
				<view class="line">
					<view class="title">性别:</view>
					<input type="text" v-model="childSex" name="childSex" placeholder-style="color:#c7c7c7"
						placeholder="请选择儿童性别>" @click="popSex">
				</view>
				<view class="line">
					<view class="title">出生日期:</view>
					<input type="text" v-model="birthday" name="birthday" placeholder-style="color:#c7c7c7"
						placeholder="请选择儿童出生日期>" @click="popBirthday">
				</view>
				<view class="line">
					<view class="title">联系电话:</view>
					<input type="text" v-model="phone" name="phone" placeholder-style="color:#c7c7c7"
						placeholder="请输入家长手机号">
				</view>
				<view class="address">
					<view class="title">地址(选填):</view>
					<textarea class="text" type="text" v-model="address" name="address"
						placeholder-style="color:#c7c7c7" placeholder="请输入地址"></textarea>
				</view>
			</view>
		</view>
		<view class="treaty">
			<checkbox-group @change="checkboxChange" class="checkbox">
				<label>
					<checkbox value="1" :checked="treatyChecked" style="transform:scale(0.7)" />
				</label>
			</checkbox-group>
			<view class="privacy-policy-text">
				<text>同意运营商收集以上信息1，</text>
				<text class="privacy-policy-text-btn" @click="goPolicy">《隐私政策》</text>
			</view>
		</view>
		<view class="btn" @click="goTest">开始测试</view>

		<uni-popup type="bottom" ref="childPop" :animation="true" :maskClick="true">
			<view class="agency-popup">
				<view class="head">
					<button type="default" @tap.stop="close">取消</button>
					<button type="default" @tap.stop="sure">确定</button>
				</view>
				<picker-view :value="value" indicator-style="height: 50px;" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in childList" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
		<uni-popup type="bottom" ref="sexPop" :animation="true" :maskClick="true">
			<view class="agency-popup">
				<view class="head">
					<button type="default" @tap.stop="closeSex">取消</button>
					<button type="default" @tap.stop="sureSex">确定</button>
				</view>
				<picker-view :value="sex" indicator-style="height: 50px;" @change="bindChangeSex" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in sexList" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
		<uni-popup type="bottom" ref="birthdayPop" :animation="true" :maskClick="true">
			<view class="agency-popup">
				<view class="head">
					<button type="default" @tap.stop="closeBirthday">取消</button>
					<button type="default" @tap.stop="sureBirthday">确定</button>
				</view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})

			return {
				tabList: [{
						name: '自动选择',
					},
					{
						name: '手动输入',
					},
				],
				tabCur: 0,
				childList: [{
					name: '绝对是'
				}, {
					name: '第三方'
				}, {
					name: '大范围'
				}],
				child: '',
				childName: '',
				childSexAuto: '',
				birthday: '',
				phone: '',
				address: '',
				treatyChecked: false, // 用户服务协议与隐私协议
				value: [0],
				sex: [0],

				childSex: '',
				sexList: [{
					name: '男'
				}, {
					name: '女'
				}],
				date: currentDate,
			}
		},
		methods: {
			goPolicy() {
				uni.navigateTo({
					url: "/loginPackage/pages/PrivacyPolicy"
				})
			},
			goTest() {
				uni.redirectTo({
					url: "/homePackage/pages/answerDetail"
				})
			},
			selectAuto() {
				this.tabCur = 0;
			},
			selectTab() {
				this.tabCur = 1;
			},
			checkboxChange(e) {
				if (e.detail.value.indexOf('1') == 0) {
					this.treatyChecked = true;
				} else {
					this.treatyChecked = false
				}
			},
			popChild() {
				this.$refs.childPop.open();
			},

			bindChange(e) { //选择器中的滑动
				console.log(e.detail.value)
				this.value = e.detail.value;
			},
			sure() {
				this.child = this.childList[this.value].name;
				this.close();
			},
			close() {
				this.$refs.childPop.close();
			},
			bindChangeSex(e) { //选择器中的滑动
				console.log(e.detail.value)
				this.sex = e.detail.value;
			},
			popSex() {
				this.$refs.sexPop.open();
			},
			sureSex() {
				this.childSex = this.sexList[this.sex].name;
				this.closeSex();
			},
			closeSex() {
				this.$refs.sexPop.close();
			},
			bindChangeBirthday(e) { //选择器中的滑动
				console.log(e.detail.value)
				// this.sex = e.detail.value;
			},
			popBirthday() {
				this.$refs.birthdayPop.open();
			},
			sureBirthday() {
				// this.childSex = this.sexList[this.sex].name;
				// this.closeBirthday();
			},
			closeBirthday() {
				this.$refs.birthdayPop.close();
			},
			bindDateChange(e) {
				this.date = e.detail.value
			},
			getDate(type) {
				console.log('225')
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
	}
</script>

<style lang="less">
	.privacy-policy-text {
		margin-left: 10rpx;
		font-size: 26rpx;
		color: #fff;

		.privacy-policy-text-btn {
			color: #fff;
		}
	}

	.content {
		.head {
			width: 100%;

			image {
				width: 100%;
			}
		}

		.con {
			line-height: 20px;
			border-radius: 10px;
			background-color: rgba(255, 255, 255, 1);
			text-align: center;
			box-shadow: 0px 2px 6px 0px rgba(228, 228, 228, 100);
			margin: 0rpx 30rpx;

			.tab-con {
				display: flex;

				.tab {
					width: 50%;
					height: 94rpx;
					line-height: 94rpx;

					&.tab-first {
						background-color: rgba(40, 123, 206, 1);
						color: #fff;
						border-top-left-radius: 20rpx;
					}

					&.tab-second {
						background-color: rgba(40, 123, 206, 1);
						color: #fff;
						border-top-right-radius: 20rpx;
					}
				}
			}

			.info,
			.hand {
				.line {
					display: flex;
					border-bottom: 2rpx solid #ddd;
					padding: 20rpx 0rpx;
					margin: 0rpx 40rpx;
					justify-content: space-between;

					.title {
						margin-right: 30rpx;
						color: rgba(16, 16, 16, 1);
						font-size: 14px;
					}

					input {
						width: 70%;
					}
				}

				.address {
					display: flex;
					flex-direction: column;
					text-align: left;
					padding: 20rpx 0rpx;
					margin: 0rpx 40rpx;

					.text {
						margin-top: 10rpx;
						border: 1px solid rgba(187, 187, 187, 1);
					}
				}
			}
		}

		.treaty {
			display: flex;
			margin-left: 60rpx;
			margin-top: 20rpx;

			.checkbox {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.btn {
			width: 332px;
			height: 50px;
			border-radius: 30px;
			background-color: rgba(40, 123, 206, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 14px;
			text-align: center;
			line-height: 100rpx;
			margin: 20rpx auto;
		}

		.agency-popup {
			width: 100%;
			min-height: 500rpx;
			max-height: 700rpx;
			// overflow: auto;
			background: #fff;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.head {
				width: 100%;
				height: 100rpx;
				margin-top: 20rpx;
				border-bottom: 2rpx #e2e2e2 solid;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.title {
					font-size: 32rpx;
					font-weight: 600;
				}

				button {
					border: none;
					background-color: transparent;
					font-size: 28rpx;
				}

				button::after {
					border: none;
				}

				button:first-of-type {
					margin-left: 20rpx;
					color: #737171;
				}

				button:last-of-type {
					color: #1769ff;
					margin-right: 20rpx;
				}
			}

			.picker-view {
				width: 100%;
				height: 300rpx;
				margin-top: 50rpx;

				.item {
					height: 100rpx;
					line-height: 100rpx;
					font-size: 32rpx;
					align-items: center;
					justify-content: center;
					text-align: center;
				}
			}
		}

	}
</style>