<template>
	<!-- 兼职注册 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box1">
				<view class="reg-name">
					* 姓名
				</view>
				<view class="reg-value">
					<input type="text" placeholder="请填写姓名"
						style="background: #eee;height: 40px;line-height: 40px;padding: 9px 10px;border-radius: 10px;">
				</view>
			</view>
			<view class="box1">
				<view class="reg-name">
					* 学生证上传 <text style="font-size: 12px;font-weight: 400;color: #777;">身份信息仅用于认证身份，平台会严格保密</text>
				</view>
				<view class="reg-value">
					<img @tap="pictureAdd('mentou')"
						src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/89d37db7e34c490da24c5dd62183bf2d.png" alt=""
						style="width: 80px;height: 80px;background-size: 100%;margin-right: 10px;" />
					<img @tap="largeImg" :src="formData.studentCard" alt=""
						style="width: 80px;height: 80px;background-size: 100%;" />
				</view>
			</view>
			<view class="box1">
				<view class="reg-name">
					* 兼职类型
				</view>
				<view class="reg-value" style="display: flex;">
					<view class="box-check-btn" @tap="daimaiOrpaotui('daimai')"
						:style="{background:formData.daimai?'rgba(180, 255, 238, 0.27)':'#eee',border:formData.daimai?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
						代买饭
					</view>
					<view class="box-check-btn" @tap="daimaiOrpaotui('paotui')"
						:style="{background:formData.paotui?'rgba(180, 255, 238, 0.27)':'#eee',border:formData.paotui?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
						快递
					</view>
				</view>
			</view>
			<view class="box1" v-if="formData.daimai != false || formData.paotui != false">
				<view class="reg-name">
					* 规则配置
				</view>
				<view class="reg-value">
					<view class="value1" v-if="formData.daimai">
						<view class="value-title">
							<view class="title-1">
								代买饭规则
							</view>
							<view class="title-2" @tap="checkAddress">
								选择地址
								<uni-icons type="right" size="12"></uni-icons>
							</view>
						</view>
						<view class="guize-list">
							<view class="guize1">
								<view class="guize1-qusong">
									<view class="qusong1">
										取
									</view>
									<view class="qusong2">
										第三食堂
									</view>
								</view>
								<view class="guize1-qusong">
									<view class="qusong1">
										送
									</view>
									<view class="qusong2" style="background: rgba(209, 206, 255, 1);">
										1号宿舍楼
									</view>
								</view>
								<view class="qusong3">
									<input type="number" placeholder="填写配送费">
								</view>
							</view>
							<view class="guize1">
								<view class="guize1-qusong">
									<view class="qusong1">
										取
									</view>
									<view class="qusong2">
										第三食堂
									</view>
								</view>
								<view class="guize1-qusong">
									<view class="qusong1">
										送
									</view>
									<view class="qusong2" style="background: rgba(209, 206, 255, 1);">
										1号宿舍楼
									</view>
								</view>
								<view class="qusong3">
									<input type="number" placeholder="填写配送费">
								</view>
							</view>
						</view>
					</view>
					<view class="value1" v-if="formData.paotui">
						<view class="value-title">
							<view class="title-1">
								快递规则
							</view>
							<view class="title-2" @tap="checkAddress">
								选择地址
								<uni-icons type="right" size="12"></uni-icons>
							</view>
						</view>
						<view class="guize-list">
							<view class="guize1">
								<view class="guize1-qusong">
									<view class="qusong1">
										取
									</view>
									<view class="qusong2">
										第三食堂
									</view>
								</view>
								<view class="guize1-qusong">
									<view class="qusong1">
										送
									</view>
									<view class="qusong2" style="background: rgba(209, 206, 255, 1);">
										1号宿舍楼
									</view>
								</view>
								<view class="qusong3">
									<input type="number" placeholder="填写配送费">
								</view>
							</view>
							<view class="guize1">
								<view class="guize1-qusong">
									<view class="qusong1">
										取
									</view>
									<view class="qusong2">
										第三食堂
									</view>
								</view>
								<view class="guize1-qusong">
									<view class="qusong1">
										送
									</view>
									<view class="qusong2" style="background: rgba(209, 206, 255, 1);">
										1号宿舍楼
									</view>
								</view>
								<view class="qusong3">
									<input type="number" placeholder="填写配送费">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view
				style="width: 120px;height: 140px;background: rgba(166, 255, 234, 1);margin: 10px auto;border-radius: 20px;text-align: center;">
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/3a4e68eb14d7417cbb4f15fa85907c64.jpg" alt=""
					style="width: 90px;height: 90px;margin-top: 10px;" />
				<view style="height: 25px;line-height: 25px;font-weight: 700;">关注公众号</view>
			</view>
			<view class="btn">
				提交注册
			</view>
		</view>
		<!-- 查看大图弹出层 -->
		<uni-popup ref="imgPopup" background-color="#fff">
			<view class="img-popup-content">
				<img :src="bigImg" alt="" style="width: 100%;height: 100%;">
			</view>
		</uni-popup>
		<!-- 规则选择弹出层 -->
		<uni-popup ref="guizePopup" background-color="#fff">
			<view class="guize-popup-content">
				<view style="margin-top: 10px;">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/f06433fa1bd34b31948eaefe5338c357.png"
						alt="" style="width: 102px;height: 25px;" />
				</view>
				<view style="margin-top: 10px;height: 45px;">
					<view class="box-check-btn" @tap="qucanOrsongcan('qucan',index)" v-for="(item,index) in qucan" :key="index"
						style="float: left;padding: 0 10px;width: auto;margin-bottom:10px;"
						:style="{background:item.checked?'rgba(180, 255, 238, 0.27)':'#eee',border:item.checked?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
						{{item.name}}
					</view>
				</view>
				<view style="margin-top: 65px;">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/32fd9d723fbf4d778f2631277d316940.png"
						alt="" style="width: 102px;height: 25px;" />
				</view>
				<view style="margin-top: 10px;height: 45px;">
					<view class="box-check-btn" @tap="qucanOrsongcan('songcan',index)" v-for="(item,index) in songcan" :key="index"
						style="float: left;padding: 0 10px;width: auto;margin-bottom:10px;"
						:style="{background:item.checked?'rgba(180, 255, 238, 0.27)':'#eee',border:item.checked?'1px solid rgba(180, 255, 238, 1)':'1px solid #777'}">
						{{item.name}}
					</view>
					
				</view>
				<view class="guize-btn" @tap="closeGuize">
					确定
				</view>
				<view style="position: absolute;bottom: -50px;left: 150px;" @tap.stop="$refs.guizePopup.close()">
					<uni-icons type="close" size="40" color="#fff"></uni-icons>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
				formData: {
					paotui: false,
					daimai: false,
					studentCard: '',
				},
				bigImg: '',
				qucan:[{
					name:'第一食堂',
					checked:false,
				},{
					name:'第二食堂',
					checked:false,
				},{
					name:'第三食堂',
					checked:false,
				},{
					name:'第四食堂',
					checked:false,
				}],
				songcan:[{
					name:'男生宿舍1号楼',
					checked:false,
				},{
					name:'男生宿舍2号楼',
					checked:false,
				},{
					name:'男生宿舍3号楼',
					checked:false,
				},{
					name:'男生宿舍4号楼',
					checked:false,
				}]
			}
		},
		components: {

		},
		onLoad() {

		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			//查看大图
			largeImg(img) {
				this.bigImg = this.formData.studentCard;
				this.$refs.imgPopup.open()
			},
			daimaiOrpaotui(type) {
				if (type == 'daimai') {
					this.formData.daimai = !this.formData.daimai
				} else {
					this.formData.paotui = !this.formData.paotui
				}
				this.$forceUpdate()
			},
			qucanOrsongcan(type,index){
				if (type == 'qucan') {
					this.qucan[index].checked = !this.qucan[index].checked
				} else {
					this.songcan[index].checked = !this.songcan[index].checked
				}
				this.$forceUpdate()
			},
			closeGuize(){
				
				this.$refs.guizePopup.close()
			},
			checkAddress(type) {
				if (type == 'daimai') {
					this.$refs.guizePopup.open()
				} else {
					this.$refs.guizePopup.open()
				}

			},
			pictureAdd() {
				let that = this
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album'],
					success(res) {
						uni.showLoading({
							title: '加载中...',
							mask: true
						})
						for (let i = 0; i < res.tempFiles.length; i++) {

							that.upLoadFile(res.tempFiles[i].tempFilePath)
						}

					}
				})
			},
			async upLoadFile(path) {
				let that = this;
				let hiver_token = uni.getStorageSync("hiver_token")
				await uni.uploadFile({
					url: that.tui.interfaceUrl() + '/upload/file',
					filePath: path,
					name: 'file',
					header: {
						"content-type": "multipart/form-data",
						'accessToken': hiver_token
					},
					formData: {},
					success: (uploadFileRes) => {
						let pathData = JSON.parse(uploadFileRes.data)
						that.formData.studentCard = pathData.result
						that.$forceUpdate()
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: JSON.stringify(err),
							icon: 'none'
						})
					}
				});
				await setTimeout(res => {
					uni.hideLoading();
				}, 1000)
			},
		}

	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/461dd2d5ba1f462ca05da7e2379d1d90.png') no-repeat;
		width: 100%;
		height: 320px;
		background-size: 100%;
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.content {
		position: absolute;
		top: 225px;
		width: 100%;
		border-radius: 20px;
		background: #fff;
		padding: 8px 10px;
	}

	.reg-name {
		font-size: 16px;
		font-weight: 700;
		height: 35px;
		line-height: 35px;
		margin-top: 10px;
	}

	.reg-value {
		margin-top: 5px;
	}

	.img-popup-content {
		width: 500rpx;
		height: 500rpx;
	}

	.box-check-btn {
		width: 80px;
		height: 35px;
		background: rgba(180, 255, 238, 0.27);
		text-align: center;
		line-height: 35px;
		border-radius: 35px;
		font-weight: 700;
		border: 1px solid rgba(180, 255, 238, 1);
		margin-right: 10px;
	}

	.value1 {
		background: #eee;
		border-radius: 10px;
		padding: 10px;
		margin-bottom: 10px;
	}

	.value-title {

		display: flex;
		height: 35px;
		line-height: 35px;
		font-size: 15px;
		font-weight: 400;

	}

	.title-1 {
		font-weight: 700;
	}

	.title-2 {

		flex: 1;
		color: #777;
		text-align: right;

	}

	.guize1-qusong {
		display: flex;
		flex: 1;
		padding-top: 10px;
	}

	.guize1 {
		display: flex;
		margin-top: 10px;
	}

	.qusong1 {
		width: 20px;
		height: 20px;
		background: rgba(0, 35, 28, 1);
		color: #fff;
		border-radius: 20px;
		text-align: center;
		line-height: 20px;
		font-size: 10px;
		z-index: 80;
	}

	.qusong2 {
		height: 20px;
		font-size: 12px;
		line-height: 19px;
		text-align: center;
		background: rgba(166, 255, 234, 0.5);
		padding: 0 10px;
		margin-left: -5px;
		font-weight: 700;
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	.qusong3 {
		width: 95px;
		height: 35px;
		background: #fff;
		border-radius: 5px;
		padding: 5px 10px;
		flex: 1;
	}

	.btn {
		width: 95%;
		height: 50px;
		font-size: 16px;
		font-weight: 700;
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		border-radius: 50px;
		line-height: 50px;
		text-align: center;
		margin: 20px auto;
	}

	.guize-popup-content {
		height: auto;
		background: #fff;
		padding: 20px;
		border-radius: 20px;
		width: 90%;
		margin: 0 auto;
		max-height: 430px;
		overflow: scroll;
		position: relative;
	}
	.guize-btn{
		    background: #00231c;
		    border-radius: 50px;
		    height: 50px;
		    width: 100%;
		    margin: 60px auto 0;
		    color: #b4ffee;
		    clear: both;
		    text-align: center;
		    line-height: 50px;
			font-size:15px;
			font-weight: 700
	}
</style>