<template>
	<view class="content">
		<view class="top">
			<image src="../../static/img/jiuzai.png" mode="widthFix" class="bgi"></image>
		</view>
		<view class="pop-box">公众参与</view>
		<view class="pop-list">
			<view class="list-box1" v-for="(item, index) in peoplelist" :key="index" v-if="index < 20">
				<view class="list-top">
					<image src="../../static/img/002.png" mode="" class="avatar-img"></image>
				</view>
				<view class="nickname">{{ item.name }}</view>
			</view>
		</view>
		<view class="red-box">救在身边报名</view>
		<!-- 	<view class="people">
			
		</view> -->
		<view class="list-box">
			<view class="list">
				<view class="list-left">姓名 <text>*</text></view>
				<input type="text" v-model="name" class="list-input" placeholder="请填写您的姓名" />
			</view>
			<view class="list">
				<view class="list-left">手机号码 <text>*</text></view>
				<input type="text" v-model="phone" class="list-input" placeholder="请填写您的联系方式" />
			</view>
			<view class="list" @click="getLocation">
				<view class="list-left">地址 <text>*</text></view>
				<!-- <picker-address class="box-right" @change="onCityClick">{{ address }}</picker-address> -->
				<input type="text" v-model="showaddress" class="list-input" placeholder="请选择常用地址" />
			</view>
			<view class="list">
				<view class="list-left">机构 <text>*</text></view>
				<picker @change="bindPickerChange" :range="chooseMechanismList" style="width: 100%;">
					<input type="text" v-model="mechanism" class="list-input" placeholder="请填写您的所在机构" disabled />
					<!-- <view class="list-input">{{'请填写您的所在机构'}}</view> -->
				</picker>
			</view>
			<view class="list">
				<view class="list-left">志愿者编号 / 证书编号</view>
				<input type="text" v-model="volunteer_id" class="list-input" placeholder="请填写您的志愿者编号 / 证书编号" />
			</view>
			<view class="upload-box">
				<view class="upload-left">证件 <text>*</text></view>
				<view class="upload-right">
					<image :src="certificates" mode="" class="upload-img" @click.stop="imgsub" v-if="certificates">
					</image>
					<image src="../../static/images/upload.png" class="upload-img" mode="" v-if="!certificates"
						@click.stop="imgsub"></image>
				</view>
			</view>
		</view>
		<view class="sub" :class="{ action: loding }" @click="!loding ? applyRescuer() : ''">提交申请</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		mechanism
	} from '@/api/ask.js';
	import {
		getNumber,
		getInstitution
	} from '@/api/index.js';
	import {
		upload,
		addrescuer
	} from '@/api/ask.js';
	import {
		getMechanismList,
		applyRescuer,
		getRescuerList,
		getApplyList
	} from '@/api/category.js'

	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				longitude4: '',
				latitude4: '',
				longitude: '',
				latitude: '',
				name: '',
				phone: '',
				mechanism: '',
				title: '选择机构',
				show: false,
				list: [],
				initSelected: [],
				searchVal: '',
				address: '',
				certificates: '',
				loding: false, //是否提交中
				showaddress: '', //显示用的地址
				count: 0,
				peoplelist: [],
				addressData: {
					name: '',
					mobile: '',
					latitude: 0, //纬度
					longitude: 0, //经度
					address: {
						province: '',
						city: '',
						district: '',
						detail: ''
					},
					area: '',
					default: false
				},
				chooseMechanismList: [], //供选择的机构列表
				mechanismList: [], //完整机构列表
				volunteer_id: '', //志愿者标号
				institution_id: '', //机构id
			};
		},
		onLoad() {
			let obj = this;
			obj.name = obj.userInfo.nickname || ''
			obj.phone = obj.userInfo.mobile
			console.log('开始加载事件');
		},
		computed: {
			...mapState('user', ['hasLogin', 'userInfo']),
		},
		onShow() {
			this.loadData();
			this.getApplyList()
			this.getMechanismList()
			if (this.hasLogin) {} else {
				saveUrl();
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
			}
		},
		watch: {
			searchVal() {
				this.ListDate();
			}
		},
		methods: {
			getApplyList() {
				getApplyList().then(res => {
					console.log(res,'getApplyList')
				})
			},
			// 获取救援者列表
			getRescuerList(lat, lon) {
				getRescuerList({
					page: 1,
					limit: 20,
					latitude: lat,
					longitude: lon,
				}).then(res => {
					console.log(res, 'getRescuerList++++++++++')
					this.peoplelist = res.data
				})
			},
			// 获取机构
			getMechanismList() {
				getMechanismList().then(({
					data
				}) => {
					this.mechanismList = data
					if (data) {
						this.chooseMechanismList = data.map(item => {
							return item.name
						})
					}
				})
			},
			// 选择机构
			bindPickerChange(e) {
				this.mechanism = this.chooseMechanismList[e.detail.value]
				this.institution_id = this.mechanismList[e.detail.value].id
			},
			applyRescuer() {
				let obj = this
				if (obj.name == '') {
					obj.$api.msg('请输入您的姓名');
					return;
				}

				const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
				if (!reg.test(obj.phone)) {
					obj.$api.msg('请填写正确的手机号码');
					return;
				}
				if (obj.showaddress == '') {
					obj.$api.msg('请选择您的所在地区');
					return;
				}
				if (obj.mechanism == '') {
					obj.$api.msg('请选择机构');
					return;
				}
				if (obj.certificates == '') {
					obj.$api.msg('请上传救护员证书或身份证');
					return;
				}
				let data = {
					name: obj.name,
					phone: obj.phone,
					institution_id: obj.institution_id,
					volunteer_id: obj.volunteer_id,
					address: obj.showaddress,
					latitude: obj.addressData.latitude,
					longitude: obj.addressData.longitude,
					certificateimage: obj.certificates
				}
				applyRescuer(data).then(res => {
					console.log(res, '申请+++++++++')
					obj.loding = false;
					uni.navigateTo({
						url: '../joinSuc/joinNow'
					});
				})
			},
			async loadData() {
				let obj = this;
				// obj.getRescuerList()
				obj.getLocal()
			},
			// 选择当前位置
			getLocation() {
				console.log('选择当前位置');
				let obj = this;
				// let wxOjb = require('jweixin-module');
				uni.chooseLocation({
					success: function(res) {
						console.log(res)
						obj.addressData.area = res.name;
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						obj.addressData.latitude = res.latitude;
						obj.addressData.longitude = res.longitude;
						// let	dizhi = obj.addressData.latitude + ','+ obj.addressData.longitude;
						obj.showaddress = res.address;
					}
				});
				
			},
			onChange(val) {
				let obj = this;
				console.log(val, 'onChange');
			},
			onSearchInput(val) {
				this.searchVal = val.value;
			},
			// 上传图片
			imgsub() {
				console.log('imgsub');
				upload({
					filename: ''
				}).then(data => {
					this.certificates = data[0].fullurl;
				});
			},
			// 获取本地坐标
			getLocal() {
				let obj = this;
				let wxOjb = require('jweixin-module');
				wxOjb.ready(()=> {
					uni.getLocation({
						type: 'gcj02',
						success(e) {
							console.log(e)
							obj.latitude4 = Math.abs(e.latitude)
							obj.longitude4 =  Math.abs(e.longitude)
							obj.getRescuerList(obj.latitude4,obj.longitude4)
						},
						fail(err) {
							obj.getLocal()
						}
					})
				})
				
			}
		}
	};
</script>

<style lang="scss">
	page {
		// background-color: #FD3B34;
		background-image: url();
	}

	.content {
		line-height: 1;

		// background-color: #FD3B34;
		.top {
			width: 750rpx;

			.bgi {
				display: block;

				width: 564rpx;
				height: 678rpx;
				margin: 53rpx auto;
				// position: relative;
				// top: -20rpx;
			}
		}

		.top-xtitle {
			font-size: 65rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 110rpx;
			text-shadow: 0px 5px 8px rgba(96, 1, 0, 0.61);
			text-align: center;
		}

		.top-title {
			font-size: 85rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FD424B;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 110rpx;
			text-shadow: 0px 5px 8px rgba(96, 1, 0, 0.61);
			text-align: center;
			padding-bottom: 69rpx;
		}

		.pop-box {
			padding-top: 31rpx;
			margin: 0 auto;
			position: relative;
			z-index: 99;
			width: 156rpx;
			height: 36rpx;
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000;

			&::before {
				content: '';
				width: 220rpx;
				height: 17rpx;
				background: rgba(254, 166, 78, 1);
				opacity: 0.26;
				position: absolute;
				bottom: -35rpx;
				left: -40rpx;
			}
		}

		.red-box {
			padding-top: 31rpx;
			margin: 0 auto;
			position: relative;
			z-index: 99;
			width: 300rpx;
			text-align: center;
			height: 36rpx;
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000;

			&::after {
				content: '';
				width: 300rpx;
				height: 17rpx;
				background: rgba(254, 166, 78, 1);
				opacity: 0.26;
				position: absolute;
				bottom: -35rpx;
				left: 0rpx;
				right: 0;
				margin: auto;
			}
		}

		.red-box2 {
			position: relative;
			width: 405rpx;
			line-height: 66rpx;
			text-align: center;
			background: linear-gradient(0deg, #c90f1b, #f14d33);
			border-radius: 10rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #ffffff;
			margin: -80rpx auto 0;
			position: relative;
			z-index: 1;
		}

		.pop-list {
			width: 686rpx;
			background: #ffffff;
			border-radius: 29rpx;
			position: relative;
			margin: -33rpx auto 78rpx;
			padding: 150rpx 0rpx 30rpx 30rpx;
			display: flex;
			flex-wrap: wrap;
			box-shadow: 0px 10rpx 20rpx 0px rgba(254, 0, 8, 0.28);

			.list-box1 {
				text-align: center;
				margin-right: 30rpx;
				margin-bottom: 30rpx;

				.list-top {
					width: 100rpx;
					height: 100rpx;

					.avatar-img {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
				}

				.nickname {
					margin-top: 12rpx;
				}
			}
		}

		.list-box {
			width: 686rpx;
			background: #ffffff;
			border-radius: 29rpx;
			position: relative;
			margin: -33rpx auto 0;
			padding: 100rpx 30rpx 0rpx 30rpx;
			display: flex;
			flex-wrap: wrap;
			box-shadow: 0px 10rpx 20rpx 0px rgba(254, 0, 8, 0.28);

			.upload-box {
				width: 100%;
				height: 290rpx;
				background: #ffffff;
				// border: 1px solid #E63931;
				border-radius: 15rpx;
				display: flex;
				flex-direction: column;
				padding-top: 24rpx;
				margin: 0 auto 50rpx;

				.upload-left {
					font-weight: 400;
					color: #000;

					text {
						color: #FD424B;
						font-size: 30rpx;
					}
				}

				.upload-right {
					margin-top: 16rpx;
					width: 100%;
					height: 100%;
					border: 1px solid #888888;
					border-radius: 15rpx;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;

					.upload-img {
						width: 102rpx;
						height: 102rpx;
						// border: 1px solid #888888;
						// border-radius: 3rpx;
						// width: 133rpx;
						// height: 133rpx;
						// margin-top: 44rpx;
					}
				}
			}

			.list {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 100%;
				margin-top: 32rpx;
				// height: 133rpx;

				.list-left {
					width: 100%;
					text-align: left;
					color: #000;

					text {
						color: #FD424B;
						font-size: 30rpx;
					}
				}

				input {
					height: 66rpx;
					// line-height: 66rpx;
					margin-top: 32rpx;
					// height: 88rpx;
				}

				.list-input {
					padding-left: 24rpx;
					// margin: 12rpx 0 ;
					height: 66rpx;
					line-height: 66rpx;
					// display: flex;
					// align-items: center;
					width: 100%;
					font-size: 26rpx;
					// flex: 1;
					color: #000;
					border: 1rpx solid #929292;
					border-radius: 15rpx;
					text-align: left;

					.input-placeholder {
						// height: 70rpx;
						color: #929292;
						font-size: 26rpx;
					}
				}

				.box-right {
					display: flex;
					align-items: center;
					padding-left: 24rpx;
					height: 66rpx;
					line-height: 66rpx;
					border: 1rpx solid #f3afad;
					border-radius: 22rpx;
					margin: 32rpx 36rpx 0 36rpx;

					width: 96%;
					font-size: 36rpx;
					color: #ff9797;
					text-align: left;
					line-height: 1;
				}
			}
		}

		.sub {
			width: 690rpx;
			height: 83rpx;
			background: #f95349;
			border-radius: 42rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 83rpx;
			text-align: center;
			margin: 53rpx auto 60rpx;

			&.action {
				background: #999999;
			}
		}
	}
</style>