<template>
	<view style="padding-bottom: 130rpx;">
		<loadlogo v-if="!loadlogo" />
		<!-- 基础信息 -->
		<view class="bascis-info" style="padding-top: 30rpx;">
			<view class="h1-title">基础信息</view>
			<view class="photo" style="margin-top: 20rpx;border-bottom: 1rpx solid #F8F8F8;">
				<view class="h1-title" style="font-size: 28rpx;font-weight: normal;">上传封面图(335x445)<text class="necessary">*</text></view>
				<view class="value-box" style="margin: 30rpx 0;">
					<view v-if="form.show_cover.length" class="img-box" @click="upImages('cover')">
						<image :src="form.show_cover" mode=""></image>
						<view class="close" @click.stop="deleteImage('cover')">+</view>
					</view>
					<view v-else class="up-load" @click="upImages('cover')">
						<view class="iconfont icon-tianjia"></view>
					</view>
					<image-cropper :crop-width="224" :crop-height="296" :crop-fixed="true" :src="tempFilePath" @confirm="cropperConfirm" @cancel="cropperCancel"></image-cropper>
				</view>
			</view>
			<view class="input">
				<view class="label">姓名<text class="necessary">*</text></view>
				<input class="value" type="text" v-model="form.realname"  placeholder="请输入姓名" placeholder-class="placeholder-class"/>
			</view>
			<view class="select-btn">
				<view class="label">性别</view>
				<view class="option">
					<view class="value" :class="{'man':form.gneder == 1}" @click="form.gneder = 1">
						<view class="iconfont icon-male"></view>
						<view class="text">男</view>
					</view>
					<view class="value" :class="{'woman':form.gneder == 2}" @click="form.gneder = 2">
						<view class="iconfont icon-female"></view>
						<view class="text">女</view>
					</view>
				</view>
			</view>
			<view class="select">
				<view class="label">出生日期<text class="necessary">*</text></view>
				<view class="info" @click="isAgeshow = true">
					<view class="value">{{birth}}</view>
					<view class="iconfont icon-playfill"></view>
				</view>
			</view>
			<view class="specil-input">
				<view class="label">身高<text class="necessary">*</text></view>
				<view class="info">
					<input class="value" type="digit" v-model="form.height" />
					<view class="unit">CM</view>
				</view>
			</view>
			<view class="specil-input">
				<view class="label">体重<text class="necessary">*</text></view>
				<view class="info">
					<input class="value" type="digit" v-model="form.weight" />
					<view class="unit">KG</view>
				</view>
			</view>
			<view class="specil-input">
				<view class="label">民族<text class="necessary">*</text></view>	
				<view class="info">
					<input class="value" type="text" v-model="form.nation" />
					<view class="unit">族</view>
				</view>
			</view>
			<view class="select">
				<view class="label">婚姻情况</view>
				<view class="info">
					<picker class="picker" @change="change($event,'marital_status')" :value="form.marital_status - 1" :range="maritalStatus">
						<view class="uni-input">
							<view class="value">{{maritalStatus[form.marital_status - 1]}}</view>
							<view class="iconfont icon-playfill"></view>
						</view>
					</picker>
				</view>
			</view>
			<view class="input">
				<view class="label">工作职务<text class="necessary">*</text></view>
				<input class="value" type="text" v-model="form.work"  placeholder="请输入工作职务" placeholder-class="placeholder-class"/>
			</view>
			<view class="select">
				<view class="label">学历</view>
				<view class="info">
					<picker class="picker" @change="change($event,'education')" :value="form.education - 1" :range="educationList">
						<view class="uni-input">
							<view class="value">{{educationList[form.education - 1]}}</view>
							<view class="iconfont icon-playfill"></view>
						</view>
					</picker>
				</view>
			</view>
			<view class="select">
				<view class="label">目前所在<text class="necessary">*</text></view>
				<view class="info" v-if="agencyData.length">
					<w-picker
						:visible.sync="isShowLivingNow"
						mode="region"
						:value="defaultValue"
						default-type="value"
						:hide-area="false"
						:agency-info="agencyData"
						@confirm="onConfirm($event, 'currentLiveing')"
					></w-picker>
					<view class="uni-input" @click="isShowLivingNow = true">
						<view class="value">{{currentLiveing}}</view>
						<view class="iconfont icon-playfill"></view>
					</view>
				</view>
			</view>
			<!-- 详细地址 -->
			<view class="select">
				<view class="label">详细地址<text class="necessary">*</text></view>
				<view class="info">
					<input style="width: 410rpx;text-align: right;font-size: 28rpx;" type="text" v-model="form.address" placeholder="请输入详细地址" placeholder-class="placeholder-class" />
					<view @click="getLocation" class="necessary">
						<image style="width: 20rpx;height: 20rpx;" :src="imgfixUrls + 'merchant/where.svg'" />
						<span>定位</span>
					</view>
				</view>
			</view>
			<view class="select">
				<view class="label">籍贯</view>
				<view class="info">
					<w-picker
						:visible.sync="isShowNativePlace"
						mode="region"
						:value="defaultValue"
						default-type="value"
						:hide-area="false"
						ref="aabbcc"
						@confirm="onConfirm($event, 'hometown')"
					></w-picker>
					<view class="uni-input" @click="isShowNativePlace = true">
						<view class="value">{{hometown}}</view>
						<view class="iconfont icon-playfill"></view>
					</view>
				</view>
			</view>
			<view class="select no-border">
				<view class="label">户籍类型</view>
				<view class="info">
					<picker class="picker" @change="change($event,'registered_residence_type')" :value="form.registered_residence_type - 1" :range="residence_type">
						<view class="uni-input">
							<view class="value">{{residence_type[form.registered_residence_type - 1]}}</view>
							<view class="iconfont icon-playfill"></view>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<!-- 经济基础 -->
		<view class="economic-base">
			<view class="h1-title">经济基础</view>
			<view class="input">
				<view class="label">月收入<text class="necessary">*</text></view>
				<input class="value" type="text" v-model="form.income"  placeholder="请输入月收入" placeholder-class="placeholder-class"/>
			</view>
			<view class="select">
				<view class="label">居住情况</view>
				<view class="info">
					<picker class="picker" @change="change($event,'live')" :value="form.live - 1" :range="liveList">
						<view class="uni-input">
							<view class="value">{{liveList[form.live - 1]}}</view>
							<view class="iconfont icon-playfill"></view>
						</view>
					</picker>
				</view>
			</view>
			<view class="select" :class="{'no-border' : form.travel == 1}">
				<view class="label">购车情况</view>
				<view class="info">
					<picker class="picker" @change="change($event,'travel')" :value="form.travel - 1" :range="travelList">
						<view class="uni-input">
							<view class="value">{{travelList[form.travel - 1]}}</view>
							<view class="iconfont icon-playfill"></view>
						</view>
					</picker>
				</view>
			</view>
			<view v-if="form.travel == 2" class="input no-border">
				<view class="label">车型号<text class="necessary">*</text></view>
				<input class="value" type="text" v-model="form.vehicle"  placeholder="请输入车型号" placeholder-class="placeholder-class"/>
			</view>
		</view>
		<view class="line"></view>
		<!-- 联系方式 -->
		<view class="contact">
			<view class="h1-title">联系方式</view>
			<view class="input">
				<view class="label">手机号</view>
				<input class="value" type="text" v-model="form.phone"  placeholder="请输入手机号码" placeholder-class="placeholder-class"/>
			</view>
			<view class="input">
				<view class="label">微信</view>
				<input class="value" type="text" v-model="form.wechat_number"  placeholder="请输入微信号" placeholder-class="placeholder-class"/>
			</view>
			<view class="input no-border">
				<view class="label">QQ</view>
				<input class="value" type="text" v-model="form.qq_number"  placeholder="请输入QQ号" placeholder-class="placeholder-class"/>
			</view>
		</view>
		<view class="line" style="margin-bottom: 0rpx;"></view>
		<!-- 自我介绍 -->
		<view class="introduce-info">
			<view class="desc">
				<view class="label">自我介绍</view>
				<textarea class="value" v-model="form.introduce" placeholder="请介绍自我" placeholder-class="placeholder-class"/>
			</view>
			<view class="interest-info">
				<view 
				class="item" 
				:class="{'choose' : item.isSelect}" 
				v-for="(item,index) in label" 
				:key="item.id" 
				@click="handleLabelItemClick(item)"
				>{{item.title}}</view>
			</view>
		</view>
		<view class="line" style="margin-bottom: 30rpx;"></view>
		<!-- 上传视频 -->
		<view class="video">
			<view class="h1-title">上传视频</view>
			<view class="video-up-load" @click="upLoadVideo">
				<video class="video" v-if="isShowVideoClose" :src="form.video" controls></video>
				<view v-else class="iconfont icon-tianjia"></view>
				<view v-if="isShowVideoClose" class="close" @click.stop="deleteVideo">+</view>
			</view>
		</view>
		<view class="line"></view>
		<!-- 上传照片 -->
		<view class="photo">
			<view class="h1-title">上传照片</view>
			<!-- <view class="tips">(上传封面图)</view> -->
			<view class="value-box" style="margin-top: 30rpx;">
				<view class="up-load" style="width: 220rpx;height: 220rpx;" @click="upImages('album')">
					<view class="iconfont icon-tianjia"></view>
				</view>
				<view class="img-box" style="width: 220rpx;height: 220rpx;" v-for="(item,index) in photoList" :key="index">
					<image :src="item" mode=""></image>
					<view class="close" @click="deleteImage('album',index)">+</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<!-- 择偶标准 -->
		<view class="mate-standard">
			<view class="h1-title">择偶标准</view>
			<view class="double-input">
				<view class="label">年龄</view>
				<view class="info-box">
					<input class="value" type="number" v-model="form.min_age" placeholder="输入年龄" placeholder-class="placeholder-class" />
					<view class="interval">至</view>
					<input class="value" type="number" v-model="form.max_age" placeholder="输入年龄" placeholder-class="placeholder-class" />
					<view class="unit">岁</view>
				</view>
			</view>
			<view class="double-input no-border">
				<view class="label">身高</view>
				<view class="info-box">
					<input class="value" type="number" v-model="form.min_height" placeholder="输入身高" placeholder-class="placeholder-class" />
					<view class="interval">至</view>
					<input class="value" type="number" v-model="form.max_height" placeholder="输入身高" placeholder-class="placeholder-class" />
					<view class="unit">CM</view>
				</view>
			</view>
			<view class="line" style="margin-bottom: 0;"></view>
			<view class="select">
				<view class="label">婚姻情况</view>
				<view class="info">
					<picker class="picker" @change="change($event,'require_marital_status')" :value="form.require_marital_status - 1" :range="requireMaritalStatus">
						<view class="uni-input">
							<view class="value">{{requireMaritalStatus[form.require_marital_status - 1]}}</view>
							<view class="iconfont icon-playfill"></view>
						</view>
					</picker>
				</view>
			</view>
			<view class="select">
				<view class="label">学历</view>
				<view class="info">
					<picker class="picker" @change="change($event,'require_education')" :value="form.require_education - 1" :range="requireEducationList">
						<view class="uni-input">
							<view class="value">{{requireEducationList[form.require_education - 1]}}</view>
							<view class="iconfont icon-playfill"></view>
						</view>
					</picker>
				</view>
			</view>
			<view class="else-info">
				<textarea class="value" v-model="form.require" placeholder="还有其他什么择偶标准，请输入要求~" placeholder-class="placeholder-class" />
			</view>
		</view>
		<view class="line" v-if="isShow.hidePrivacy == 0 || isShow.hidePhone == 0 || isShow.hidePhoto == 0"></view>
		<!-- 隐私设置 -->
		<view class="privacy" v-if="isShow.hidePrivacy == 0 || isShow.hidePhone == 0 || isShow.hidePhoto == 0">
			<view class="h1-title">隐私设置</view>
			<view class="select-btn" v-if="isShow.hidePrivacy == 0">
				<view class="label">公开个人资料</view>
				<view class="option">
					<view class="value" :class="{'selecter': form.is_open_base == 2}" @click="form.is_open_base = 2">
						<view class="text">公开</view>
					</view>
					<view class="value" :class="{'selecter': form.is_open_base == 1}" @click="form.is_open_base = 1">
						<view class="text">隐藏</view>
					</view>
				</view>
			</view>
			<view class="select-btn" v-if="isShow.hidePhone == 0">
				<view class="label">公开联系方式</view>
				<view class="option">
					<view class="value" :class="{'selecter': form.is_open_contact == 2}" @click="form.is_open_contact = 2">
						<view class="text">公开</view>
					</view>
					<view class="value" :class="{'selecter': form.is_open_contact == 1}" @click="form.is_open_contact = 1">
						<view class="text">隐藏</view>
					</view>
				</view>
			</view>
			<view class="select-btn no-border" v-if="isShow.hidePhoto == 0">
				<view class="label">游客查看照片</view>
				<view class="option">
					<view class="value" :class="{'selecter': form.is_open_photo == 2}" @click="form.is_open_photo = 2">
						<view class="text">开启</view>
					</view>
					<view class="value" :class="{'selecter': form.is_open_photo == 1}" @click="form.is_open_photo = 1">
						<view class="text">关闭</view>
					</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<!-- 协议 -->
		<block v-if="isShowAgreement">
			<view class="agreement">
				<view @click="isReadAgreement = !isReadAgreement">
					<view v-if="isReadAgreement" class="iconfont icon-roundcheckfill"></view>
					<view v-else class="iconfont icon-round"></view>
				</view>
				<view class="text">阅读并同意</view>
				<view style="color: #0084FF;" @click="isShowAgreementPop = true">《用户注册协议》</view>
			</view>
		</block>
		<!-- 提交按钮 -->
		<view class="submit-btn" @click="submit">提交</view>
		
		<!-- 协议弹窗 -->
		<popAgreement :show="isShowAgreementPop" @clickmask="isShowAgreementPop = false" :textInfo="agreement"></popAgreement>
		
		<!-- 出生年月日弹窗 -->
		<w-picker
			:visible.sync="isAgeshow"
			mode="date"
			:value="birth"
			startYear="1900"
			endYear="2100"
			fields="day"
			@confirm="onConfirmage($event, 'date')"
			:disabled-after="true"
			ref="dateb"
		></w-picker>
		
		<!-- h5的定位弹窗 -->
		<!-- #ifdef H5 -->
		<PopManager :show="isOpenLaction" :type="'bottom'" :overlay="'false'" :showOverlay="'false'">
			<view class="iframe-wid-hgt" :style="{ height: phoneHeight }" v-if="option.lat">
				<iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=KIQBZ-6OT3G-AOMQD-IHW6J-PEUDV-VCFAF&referer=myapp&coord=${option.lat},${option.lng}`"></iframe>
			</view>
			<view class="iframe-wid-hgt" :style="{ height: phoneHeight }" v-else>
				<iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=KIQBZ-6OT3G-AOMQD-IHW6J-PEUDV-VCFAF&referer=myapp`"></iframe>
			</view>
		</PopManager>
		<!-- #endif -->
		<!-- 绑定手机号 -->
		<PhoneMask :show1="popShow" @clickmask1="closePop"></PhoneMask>
		<getvxphone :show="vxshow" @showFalse="showFalse"></getvxphone>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import wxApi from '@/common/js/wxApi.js';
	import popAgreement from '@/components/template/popAgreement';
	import PopManager from '@/components/template/PopManager';
	import Loadlogo from '@/components/template/loadlogo.vue';
	import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue";
	import util from "@/common/js/util.js"
	import wPicker from '@/components/w-picker/w-picker.vue';
	import PhoneMask from '@/components/template/PhoneMask';
	import getvxphone from '@/components/template/getVXphone.vue'
	export default {
		data() {
			return {
				loadlogo: false,
				isShowLivingNow: false,  //显示现居住地弹窗
				isShowNativePlace: false,  //籍贯
				isAgeshow: false,  //出生年月日显示
				defaultValue: '',
				birth: '',
				popShow: false,
				vxshow:false,
				form: {
					cover: '',
					show_cover: '',
					realname: '',
					gneder: 1,
					birth: '',
					height: '',
					weight: '',
					nation: '',
					marital_status: 1,
					work: '',
					education: 1,
					current_province: '',  //省
					current_city: '',  //市
					current_area: '',  //区
					address: '',
					hometown_province: '',
					hometown_city: '',
					hometown_area: '',
					lng: '',
					lat: '',
					registered_residence_type: 1,
					
					income: '',
					live: 1,
					travel: 1,
					vehicle: '',
					
					phone: '',
					wechat_number: '',
					qq_number: '',
					
					photo: [],
					video: '',
					
					introduce: '',
					label_id: [],
					max_age: '',
					min_age: '',
					min_height: '',
					max_height: '',
					require_marital_status: 1,
					require_education: 1,
					require: '',
					
					is_open_base: 1,
					is_open_contact: 1,
					is_open_photo: 1,
				},
				photoList: [],
				isShowVideoClose: false,
				label: [],
				agreement: '',  //协议内容
				isReadAgreement: false,  //是否同意协议
				isShowAgreement: false,  //是否显示协议
				isShowAgreementPop: false,  //弹窗
				
				maritalStatus: ['未婚','离异(无子女)','离异(有抚养权)','离异(无抚养权)','丧偶(无子女)','丧偶(有子女)'],
				
				residence_type: ['农业户口','非农业户口'],
				
				educationList: ['小学','初中','高中/中专','专科','本科','硕士','博士'],
				requireEducationList: ['不限','小学','初中','高中/中专','专科','本科','硕士','博士'],
				
				currentLiveing: '',  //现居住地
				hometown: '',  //籍贯
				
				liveList: ['自购房(有贷款)','自购房(无贷款)','租房(合租)','租房(整租)','与父母同住','借住亲朋家','单位住房'],
				
				travelList: ['未购车','已购车'],
				
				requireMaritalStatus: ['不限','未婚','离异','丧偶'],
				owenscitylist: [],
				head_id: 0,
				option: {},
				isOpenLaction: false,  //h5定位弹窗显示
				phoneHeight: '',
				lblis: {},
				klis: false,
				thelat: '',
				agencyData: [],
				tempFilePath: '',
				hidePrivacy:0,
				userInfo:{},
				lblis:{},
				isShow:{}
			}
		},
		components: {
			Loadlogo,
			popAgreement,
			PopManager,
			ImageCropper,
			wPicker,
			PhoneMask,
			getvxphone
		},
		thelat() {
			this.getloctions(this.lblis);
		},
		onLoad(option) {
			let _this = this
			_this.option = option
			uni.getSystemInfo({
				success(res) {
					_this.phoneHeight = res.windowHeight + 'px';
				}
			});
			_this.head_id = uni.getStorageSync('head_id')
			_this.owenscitylist = uni.getStorageSync('cityList')
			_this.getMemberInfo()
			_this.getNowCity()
		},
		onShow() {
			let _this = this 
			//#ifdef APP-PLUS
			if(_this.userInfo.lat){
				_this.form.address = _this.userInfo.address;
				_this.form.lat = _this.userInfo.lat;
				_this.form.lng = _this.userInfo.lng;
				let lblis = {
					lat: _this.userInfo.lat,
					lng: _this.userInfo.lng
				}
				_this.getloctions(lblis)
			}
			
			//#endif
			// #ifdef H5
			window.addEventListener(
				'message',
				function(event) {
					// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
					let loc = event.data;
					if (_this.klis) {
						return
					}
					if (loc && loc.module == 'locationPicker') {
						//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
						console.log('location', loc);
						_this.thelat = loc.latlng.lat;
						_this.form.address = loc.poiaddress;
						_this.form.lat = loc.latlng.lat;
						_this.form.lng = loc.latlng.lng;
						_this.isOpenLaction = false;
						_this.lblis = {
							lat: loc.latlng.lat,
							lng: loc.latlng.lng,
							detailed_address: loc.poiaddress
						}
			
					}
					_this.klis = true;
					setTimeout(() => {
						_this.klis = false;
					}, 1000)
				},
				false
			);
			// #endif
		},
		computed: {
			cLabelId() {
				let res = []
				this.label.forEach(item => {
					if(item.isSelect) {
						res.push(item.id)
					}
				})
				return res
			}
		},
		methods: {
			showFalse(){
				console.log('进了showfalse')
				this.vxshow = false;
			},
			closePop() {
				let _this = this
				_this.popShow = false
			},
			getMemberInfo() {
				let _this = this
				App._post_form(
					`&p=dating&do=editMember&type=get`,
					{},
					res => {
						_this.isShowAgreement = res.data.disclaimers.length > 0
						_this.agreement = res.data.disclaimers
						_this.hidePrivacy = res.data.hidePrivacy
						_this.isShow = res.data
						let label_id = res.data.info.label_id || []
						_this.label = res.data.label.map(item => {
							item.isSelect = false
							label_id.forEach(id => {
								if(item.id == id) {
									item.isSelect = true
								}
							})
							return item
						})
						if(!Array.isArray(res.data.info)) {
							_this.form = res.data.info
							// 回显现居住地址和籍贯
							_this.getPlace()
							// 出生日期回显
							if(_this.form.birth != 0) {
								_this.birth = _this.$util.formatTime(_this.form.birth,'date','-')
							}
							// 照片回显
							_this.photoList = res.data.info.photo_show || []
							// 视频
							_this.isShowVideoClose = res.data.info.video.length != 0
							// 择偶条件
							_this.form.min_age = res.data.info.min_age == 0 ? '' : res.data.info.min_age
							_this.form.max_age = res.data.info.max_age == 0 ? '' : res.data.info.max_age
							_this.form.min_height = res.data.info.min_height == 0 ? '' : res.data.info.min_height
							_this.form.max_height = res.data.info.max_height == 0 ? '' : res.data.info.max_height
							// 协议
							_this.isReadAgreement = true
						}else {
							
						}
						// 经纬度默认赋值
						if(_this.form.lng.length == 0 || _this.form.lat.length == 0) {
							_this.form.lng = _this.option.lng
							_this.form.lat = _this.option.lat
						}
						console.log(_this.form,'表单数据')
					},
					false,
					() => {
						_this.loadlogo = true
					}
				);
			},
			
			// 提交信息
			submit() {
				let _this = this;
				this.form.label_id = this.cLabelId
				
				if(this.currentLiveing.length == 0) {
					App.showError('请填写目前所在地址')
					return
				}
				if(!this.form.realname){
					App.showError('请输入姓名');
					return
				}
				if(this.isShowAgreement && !this.isReadAgreement) {
					App.showError('请阅读并同意协议')
					return
				}
 				let datas = {},
					url = this.form.id ? `&p=dating&do=editMember&type=post&id=${this.form.id}&head_id=${this.head_id}` : `&p=dating&do=editMember&type=post&head_id=${this.head_id}`
				datas.data = JSON.stringify(this.form);
				App._post_form(
					url,
					datas,
					res => {
						console.log(res,'提交结果');
						uni.showToast({
							title:res.message
						});
						setTimeout(()=>{
							// uni.navigateBack({
							// 	delta: 1
							// });
							uni.reLaunch({
								url: '/pages/subPages2/blindDate/personal'
							})
						},1000)
					},fail=>{
						if (fail.data.message == '未绑定手机号') {
							//#ifdef H5
							_this.popShow = true;
							//#endif
							//#ifndef H5
							_this.vxshow = true;
							//#endif
							
						}
				});
			},
			
			// 获取当前代理可选的城市
			getNowCity() {
				let _this = this
				App._post_form(
					`&do=getNowCity`,
					{},
					res => {
						_this.agencyData = res.data
					},
					false,
					() => {
						
					}
				);
			},
			
			handlerChange(e) {
				console.log(e)
			},
			
			// 根据Id回显现居住地和籍贯
			getPlace() {
				this.owenscitylist.forEach(province => {
					// 当前居住地
					if(province.id == this.form.current_province) {
						this.currentLiveing = province.name
						province.area.forEach(city => {
							if(city.id == this.form.current_city) {
								this.currentLiveing = this.currentLiveing + ' ' + city.name
								city.dist.forEach(area => {
									if(area.id == this.form.current_area) {
										this.currentLiveing = this.currentLiveing + ' ' + area.name
									}
								})
							}
						})
					}
					// 籍贯
					if(province.id == this.form.hometown_province) {
						this.hometown = province.name
						province.area.forEach(city => {
							if(city.id == this.form.hometown_city) {
								this.hometown = this.hometown + ' ' + city.name
								city.dist.forEach(area => {
									if(area.id == this.form.hometown_area) {
										this.hometown = this.hometown + ' ' + area.name
									}
								})
							}
						})
					}
				})
			},
			
			// 生日弹窗确定
			onConfirmage(e) {
				this.birth = e.value
				// 转时间戳
				let ontime = e.value.replace(/-/g, '/'),
					date = new Date(ontime),
					time = date.getTime() / 1000;
				this.form.birth = time
			},
			
			change(e,type) {
				let res = Number(e.detail.value) + 1
				switch(type) {
					case 'marital_status': this.form.marital_status = res; break;  //婚姻状况
					case 'education': this.form.education = res; break;  //学历
					case 'live': this.form.live = res; break;  //居住情况
					case 'travel': this.form.travel = res; break;  //出行
					case 'require_marital_status': this.form.require_marital_status = res; break;  //择偶婚姻要求
					case 'require_education': this.form.require_education = res; break;  //择偶学历要求
					case 'registered_residence_type': this.form.registered_residence_type = res; break;  //户籍类型
				}
			},
			
			// 地址弹窗确定
			onConfirm(e,type) {
				let _this = this,
					is_have_area = Array.isArray(e.obj.area),  //判断有没有区
					res = is_have_area ? e.obj.province.label + ' ' + e.obj.city.label : e.obj.province.label + ' ' + e.obj.city.label + ' ' + e.obj.area.label
				// 显示地址赋值和参数赋值
				if(type == 'hometown') {
					_this.hometown = res
					_this.form.hometown_province = e.value[0]
					_this.form.hometown_city = e.value[1]
					_this.form.hometown_area = e.value[2] || ''
				}
				if(type == 'currentLiveing') {
					_this.currentLiveing = res
					_this.form.current_province = e.value[0]
					_this.form.current_city = e.value[1]
					_this.form.current_area = e.value[2] || ''
				}
			},
			
			// 选择个性标签
			handleLabelItemClick(item) {
				item.isSelect = !item.isSelect
				this.$forceUpdate()
			},
			
			// 视频上传
			upLoadVideo() {
				let _this = this;
				if(_this.isShowVideoClose) {
					return
				}
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function(res) {
						uni.showLoading();
						uni.uploadFile({
							url: App.api_root + '&do=uploadFiles',
							filePath: res.tempFilePath,
							name: 'file',
							formData: {
								upload_type: 1,
								is_base: 1
							},
							success: res => {
								let data = JSON.parse(res.data),
									base64 = new _this.$util.Base64();
								console.log('data', data);
								if (data.errno === 0) {
									_this.form.video = base64.decode(data.data.img)
									_this.isShowVideoClose = true
								} else {	
									App.showError(data.message, () => {});
								}
								uni.hideLoading();
							},
							fail: (res) => {
								uni.hideLoading();
							}
						});
					}
				});
			},
			
			// 删除已上传视频
			deleteVideo() {
				console.log('触发删除')
				this.form.video = ''
				this.isShowVideoClose = false
			},
			
			// h5上传
			uoloadIgs(length, ids = 0, resImg, type) {
				let _this = this;
				wxApi.uoloadIg(resImg.localIds[ids], data => {
					if (data.errMsg === 'uploadImage:ok') {
						uni.showLoading({});
						let requestData = {
							upload_type: 2,
							id: data.serverId
						};
						App._post_form(
							'&do=uploadFiles',
							requestData,
							res => {
								if (res.errno === 0) {
									if (type === 'cover') {
										_this.form.cover = res.data.image
										_this.form.show_cover = res.data.img
										_this.tempFilePath = res.data.img
									}else {
										_this.form.photo.push(res.data.image)
										_this.photoList.push(res.data.img)
										if (ids < length - 1) {
											ids++;
											uni.setTimeout(_this.uoloadIgs(length, ids, resImg, type), 500);
										}
									}
								}
							},
							false,
							() => {
								debugger
								console.log(res)
								uni.hideLoading();
							}
						);
					} else {
						uni.hideLoading();
						App.showError('上传失败');
					}
				});
			},
			
			// 上传图片
			async upImages(type) {
				let _this = this,
					len = type === 'album' ? 9 - _this.photoList.length : 1
				if(len <= 0 && type === 'album') {
					uni.showModal({
						title: '警告',
						content: '最多只能上传9张',
						showCancel: false,
					})
					return
				}
				// #ifdef H5
				if(type === 'cover') {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success(res) {
							console.log(res.tempFilePaths[0])
							_this.tempFilePath = res.tempFilePaths[0]
						}
					})
				}else {
					if(App.getClientType() == 2){
						let res = await App.browser_upload(len);
					    uni.showLoading();
					    
					    if(type === 'album') {
					    	res.tempFilePaths.forEach((item,index) => {
					    		App._upLoad(item).then(options => {
					    			_this.form.photo.push(options.data.image)
					    			_this.photoList.push(options.data.img)
					    			uni.hideLoading();
					    		})
					    	})
					    }else {
					    	_this.tempFilePath = res.tempFilePaths[0]
					    	uni.hideLoading()
					    	// App._upLoad(res.tempFilePaths[0]).then(options => {
					    	// 	// _this.form.show_cover = options.data.img
					    	// 	// _this.form.cover = options.data.image
					    	// 	_this.tempFilePath = options.data.img
					    	// 	console.log(_this.tempFilePath)
					    	// 	uni.hideLoading();
					    	// })
					    }
						return
					}
					wxApi.choseImage(res => {
						let i = res.localIds.length;
						_this.uoloadIgs(i, 0, res, type);
					},len);
				}
				// #endif
				// #ifndef H5
				uni.chooseImage({
					count: len, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(res)
						uni.showLoading();
						
						if(type === 'album') {
							res.tempFilePaths.forEach((item,index) => {
								App._upLoad(item).then(options => {
									_this.form.photo.push(options.data.image)
									_this.photoList.push(options.data.img)
									uni.hideLoading();
								})
							})
						}else {
							_this.tempFilePath = res.tempFilePaths[0]
							uni.hideLoading()
							// App._upLoad(res.tempFilePaths[0]).then(options => {
							// 	// _this.form.show_cover = options.data.img
							// 	// _this.form.cover = options.data.image
							// 	_this.tempFilePath = options.data.img
							// 	console.log(_this.tempFilePath)
							// 	uni.hideLoading();
							// })
						}
						
					},
					fail: function() {
						App.showError('上传失败');
					}
				});
				// #endif
			},
			
			// 删除照片
			deleteImage(type,index) {
				if(type === 'cover') {
					this.form.show_cover = ''
					this.form.cover = ''
				}else {
					this.photoList.splice(index,1)
					this.form.photo.splice(index,1)
				}
				this.$forceUpdate()
			},
			
			// 获取定位
			getLocation() {
				let _this = this;
				// #ifdef MP-WEIXIN
				uni.chooseLocation({
					keyword: '',
					success: function(e) {
						_this.form.address = e.address;
						_this.form.lat = e.latitude;
						_this.form.lng = e.longitude;
						let lblis = {
							lat: e.latitude,
							lng: e.longitude
						}
						_this.getloctions(lblis)
					}
				});
				// #endif
				// #ifdef H5
				_this.isOpenLaction = true;
				// #endif
				//#ifdef APP-PLUS
				     App.navigationTo({
				      url: 'pages/subPages2/map/index'
				     });
				//#endif
			},
			
			// weixin定位弹窗
			getloctions(lblis) {
				let _this = this;
				App._post_form(`&p=member&do=lng2areaid&lng=${lblis.lng}&lat=${lblis.lat}`, {}, res => {
					console.log(res,'定位信息')
					_this.form.current_province = res.data.provinceid;
					_this.form.current_city = res.data.cityid;
					_this.form.current_area = res.data.countyid;
					_this.owenscitylist.forEach((item, index) => {
						if (item.id == _this.form.current_province) {
							_this.currentLiveing = item.name;
							item.area.forEach(items => {
								if (items.id == _this.form.current_city) {
									_this.currentLiveing = _this.currentLiveing + ' ' +items.name;
									items.dist.forEach(itemss => {
										if (itemss.id == _this.form.current_area) {
											_this.currentLiveing = _this.currentLiveing + ' ' + itemss.name;
										}
									})
								}
							})
						}
					})
				});
			},
			
			// 裁剪弹窗确定
			cropperConfirm(e) {
				console.log(e,'裁剪结果')
				
				this.tempFilePath = ''
				
				App._upLoad(e.detail.tempFilePath).then(options => {
					console.log(options,'裁剪后上传');
					uni.showModal({
						title:options.message,
						showCancel:false
					})
					this.form.show_cover = options.data.img
					this.form.cover = options.data.image
					uni.hideLoading();
				})
				
			},
			// 裁剪弹窗取消
			cropperCancel() {
				this.tempFilePath = ''
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.bascis-info,.economic-base,.contact,.video,.photo,.mate-standard,.privacy {
		width: 690rpx;
		height: auto;
		margin: auto;
	}
	
	.h1-title {
		height: 45rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}
	
	.input {
		width: 690rpx;
		height: 100rpx;
		margin: auto;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #EEEEEE;
		font-size: 28rpx;
		color: #333;
		.label {
			flex: 1;
			text-align: left;
		}
		.value {
			flex: 3;
			text-align: right;
		}
	}

	.select-btn {
		width: 100%;
		height: 140rpx;
		padding: 30rpx 0;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #EEEEEE;
		.label {
			height: 40rpx;
			line-height: 40rpx;
		}
		.option {
			width: 100%;
			height: 70rpx;
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			.value {
				width: 330rpx;
				height: 70rpx;
				background-color: #F8F8F8;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #999;
				.iconfont {
					margin-right: 10rpx;
				}
				.icon-female {
					transform: rotate(45deg);
				}
			}
			.man {
				background-color: #0084FF;
				color: #fff;
			}
			.woman {
				background-color: #FE83AF;
				color: #fff;
			}
			.selecter {
				color: #fff;
				background: linear-gradient(270deg, #FF8E88 0%, #FDAD28 100%);
			}
		}
	}

	.select {
		width: 690rpx;
		height: auto;
		padding: 30rpx 0;
		margin: auto;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		align-items: center;
		.label {
			flex: 1;
		}
		.info {
			height: auto;
			flex: 3;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			line-height: 40rpx;
			.value {
				margin-right: 20rpx;
			}
			.iconfont {
				font-size: 24rpx;
			}
		}
	}

	.specil-input {
		width: 690rpx;
		height: 100rpx;
		margin: auto;
		font-size: 28rpx;
		color: #333;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #EEEEEE;
		.label {
			flex: 1;
		}
		.info {
			height: 40rpx;
			flex: 3;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			line-height: 40rpx;
			.value {
				margin-right: 20rpx;
				text-align: right;
				padding: 25rpx 0;
			}
		}
	}

	.line {
		width: 690rpx;
		height: 8rpx;
		border-radius: 4rpx;
		background-color: #F8F8F8;
		margin: 0 auto 40rpx;
	}

	.desc {
		width: 690rpx;
		height: 220rpx;
		margin: auto;
		padding-top: 30rpx;
		color: #333;
		font-size: 28rpx;
		.label {
			height: 40rpx;
		}
		.value {
			width: 100%;
			height: 160rpx;
			margin-top: 20rpx;
			line-height: 40rpx;
		}
	}

	.interest-info {
		width: 690rpx;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		margin: auto;
		.item {
			width: auto;
			height: 50rpx;
			border-radius: 25rpx;
			font-size: 24rpx;
			padding: 0 30rpx;
			line-height: 50rpx;
			color: #333;
			border: 1rpx solid #707070;
			margin: 0 20rpx 20rpx 0;
		}
		.choose {
			background: linear-gradient(270deg, #FDAD26 0%, #FF8F86 100%);
			color: #fff;
			border: none;
		}
	}

	.video-up-load {
		width: 100%;
		height: 390rpx;
		border-radius: 20rpx;
		border: 1rpx dashed #CCCCCC;
		line-height: 390rpx;
		text-align: center;
		margin: 30rpx auto 40rpx;
		position: relative;
		.iconfont {
			font-size: 54rpx;
			font-weight: bold;
		}
		.video {
			width: 100%;
			height: 100%;
		}
		.close {
			width: 60rpx;
			height: 60rpx;
			border-radius: 30rpx;
			color: #fff;
			background-color: rgba(0,0,0,.5);
			position: absolute;
			top: 18rpx;
			right: 18rpx;
			transform: rotate(45deg);
			font-size: 50rpx;
			line-height: 60rpx;
			text-align: center;
			z-index: 999;
		}
	}

	.photo {
		.tips {
			height: 34rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			color: #999;
			margin: 20rpx auto 33rpx;
		}
		.value-box {
			width: 100%;
			height: auto;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 70rpx;
			.up-load {
				width: 335rpx;
				height: 445rpx;
				border: 1rpx dashed #CCCCCC;
				border-radius: 20rpx;
				line-height: 220rpx;
				text-align: center;
				margin: 0 10rpx 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				.iconfont {
					font-size: 54rpx;
					font-weight: bold;
					
				}
			}
			.img-box {
				width: 335rpx;
				height: 445rpx;
				border-radius: 20rpx;
				position: relative;
				margin: 0 10rpx 10rpx 0;
				&:nth-child(3n) {
					margin-right: 0;
				}
				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
				.close {
					width: 30rpx;
					height: 30rpx;
					border-radius: 15rpx;
					color: #fff;
					background-color: rgba(0,0,0,.5);
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					transform: rotate(45deg);
					font-size: 32rpx;
					line-height: 28rpx;
					text-align: center;
				}
			}
		}
	}
	
	.double-input {
		width: 690rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #EEEEEE;
		color: #333;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.label {
			flex: 1;
		}
		.info-box {
			flex: 3;
			height: 40rpx;
			display: flex;
			justify-content: flex-end;
			.value {
				height: 100%;
				width: 140rpx;
				text-align: center;
			}
			.interval {
				height: 40rpx;
			}
		}
	}
	
	.else-info {
		width: 690rpx;
		height: 160rpx;
		margin: auto;
		padding-top: 30rpx;
		color: #333;
		font-size: 28rpx;
		.value {
			width: 100%;
			height: 160rpx;
			line-height: 40rpx;
		}
	}

	.agreement {
		width: 690rpx;
		height: 38rpx;
		margin: auto;
		display: flex;
		align-items: center;
		font-size: 	26rpx;
		color: #333;
		.iconfont {
			margin-right: 20rpx;
		}
		.text {
			color: #999;
		}
	}
	
	.submit-btn {
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
		border-radius: 20rpx;
		background: linear-gradient(270deg, #FF8E88 0%, #FDAD28 100%);
		margin: 200rpx auto 0;
	}
	
	.no-border {
		border: none;
	}

	.picker {
		width: 100%;
	}
	
	.uni-input {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
	
	.placeholder-class {
		font-size: 28rpx;
	}
	
	.iframe-wid-hgt {
		width: 100vw;
	}

	.d-picker-view{
		height: 100%;
	}
	
	.w-picker-item {
	  text-align: center;
	  width: 100%;
	  height: 88upx;
	  line-height: 88upx;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  font-size: 30upx;
	}
	
	.necessary {
		color: #FF4444;
		font-size: 28rpx;
	}
</style>
