<template>
	<view style="padding-bottom: 50rpx;">
		<view class="basics-info">
			<loadlogo v-if="!loadlogo" />
			
			<view class="h1-title">基础信息</view>
			<view class="input">
				<view class="label">姓名<text class="necessary">*</text></view>
				<input class="value" type="text" v-model="form.nickname"  placeholder="请输入姓名" placeholder-style="fontsize: 28rpx"/>
			</view>
			<view class="input">
				<view class="label">手机号<text class="necessary">*</text></view>
				<input class="value" type="number" v-model="form.phone"  placeholder="请输入手机号码" placeholder-style="fontsize: 28rpx"/>
			</view>
			<view class="input">
				<view class="label">微信</view>
				<input class="value" type="text" v-model="form.wechat_number"  placeholder="请输入微信号" placeholder-style="fontsize: 28rpx"/>
			</view>
			<view class="input">
				<view class="label">QQ号</view>
				<input class="value" type="number" v-model="form.qq_unmber"  placeholder="请输入QQ号" placeholder-style="fontsize: 28rpx"/>
			</view>
			<view class="desc">
				<view class="label">描述<text class="necessary">*</text></view>
				<textarea class="value" v-model="form.describe" placeholder="请输入红娘描述" placeholder-style="fontsize: 28rpx"/>
			</view>
		</view>
		<view class="line"></view>
		<view class="avatar-info">
			<view class="h1-title">红娘头像<text class="necessary">*</text></view>
			<view class="tips">(上传您的红娘头像，250*250正方形头像)</view>
			<view class="up-load" @click="UploadAvatar" :class="{'avatar':avatarUrl.length}">
				<image v-if="avatarUrl.length > 0" :src="avatarUrl" mode=""></image>
				<view v-else class="iconfont icon-tianjia"></view>
			</view>
		</view>
		<view class="line"></view>
		<view class="avatar-info">
			<view class="h1-title">红娘二维码<text class="necessary">*</text></view>
			<view class="tips">(上传您的红娘二维码，250*250正方形二维码)</view>
			<view class="up-load" @click="UploadQrcode" :class="{'qrcode':qrcodeUrl.length}">
				<image v-if="qrcodeUrl.length > 0" :src="qrcodeUrl" mode=""></image>
				<view v-else class="iconfont icon-tianjia" ></view>
			</view>
		</view>
		<!-- 驳回理由 -->
		<block v-if="form.status == 4">
			<view class="reason">驳回原因：{{reason}}</view>
		</block>
		<view class="footer-btn" @click="handleApplyClick">{{applyBtnText}}</view>
		<view class="pay-tips" v-if="showPayInfo">
			<view class="iconfont icon-info"></view>
			<view class="text">申请红娘需支付{{matchmakerInfo.money}}元</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import Loadlogo from '@/components/template/loadlogo.vue';
	import wxApi from '@/common/js/wxApi.js';
	export default {
		data() {
			return {
				matchmakerInfo: {},
				form: {
					nickname: '',
					phone: '',
					wechat_number: '',
					qq_unmber: '',
					describe: '',
					avatar: '',
					qrcode: '',
				},
				loadlogo: false,
				avatarUrl: '',  //红娘头像
				qrcodeUrl: '',  //红娘二维码
				upLoadType: '',
				applyBtnText: '',
				orderid: 0,
				// option: {},
				reason: '',
				lng: '',
				lat: '',
			}
		},
		components: {
			Loadlogo
		},
		
		onLoad(e) {
			let _this = this
			// 经纬度赋值
			uni.getLocation({
			    type: 'wgs84',
			    success(res) {
					_this.lng = res.longitude
					_this.lat = res.latitude
			    }
			})
			_this.getFormInfo()
		},
		watch: {
			applyBtnText(val) {
				if(val === '红娘推广中心') {
					uni.redirectTo({
						url: `/pages/subPages2/blindDate/extension?lng=${this.lng}&lat=${this.lat}`	
					})
				}
			},
		},
		computed: {
			showPayInfo() {
				if(this.matchmakerInfo.pay_settle != 1) {
					return false
				}else {
					return this.applyBtnText === '申请' || this.applyBtnText === '编辑'
				}
			}
		},
		methods: {
			// 表单提交
			handleApplyClick() {
				let _this = this
				delete _this.form.reason
				console.log(_this.form)	
				if(_this.applyBtnText === '待审核') {
					return
				}
				if(_this.applyBtnText === '红娘推广中心') {
					App.navigationTo({
						url: `pages/subPages2/blindDate/extension?lng=${_this.lng}&lat=${_this.lat}`
					})
					return
				}
				
				// 检查必填信息是否未填
				if(!_this.form.nickname.length) {
					App.showError('请输入姓名');
					return 
				}
				if(!_this.form.describe.length) {
					App.showError('请输入红娘描述');
					return 
				}
				
				let datas = {},
					apiUrl = _this.form.id ? `&p=dating&do=applyMatchmaker&type=post&id=${_this.form.id}` : `&p=dating&do=applyMatchmaker&type=post`
				datas.data = JSON.stringify(_this.form);
				App._post_form(
					apiUrl,
					datas,
					res => {
						_this.orderid = res.data.orderid ?  res.data.orderid : _this.orderid
						if(Array.isArray(res.data) && _this.orderid == 0) {
							App.navigationTo({
								url: 'pages/subPages2/blindDate/personal'
							})
						}else {
							App.navigationTo({
								url: 'pages/mainPages/payment/payment?orderid=' + _this.orderid + '&plugin=dating'
							});
						}
					},
					false,
					() => {
						
					}
				);
			},
			
			// 获取表单信息
			getFormInfo() {
				let _this = this
				App._post_form(
					`&p=dating&do=applyMatchmaker&type=get`,
					{},
					res => {
						_this.matchmakerInfo = res.data
						_this.orderid = res.data.status == 1 ? res.data.order.orderid : 0
						// 不是第一次进入时
						if(res.data.id) {
							_this.reason = res.data.reason ? res.data.reason : ''
							_this.form = res.data
							_this.avatarUrl = res.data.avatar_show
							_this.qrcodeUrl = res.data.qrcode_show
							switch(res.data.status) {
								case '1': _this.applyBtnText = '待付款';break;
								case '2': _this.applyBtnText = '待审核';break;
								case '3': _this.applyBtnText = '红娘推广中心';break;
								case '4': _this.applyBtnText = '编辑';break;
							}
						}else {
							// 第一次进入时默认信息
							_this.form.nickname = res.data.nickname
							_this.form.phone = res.data.phone
							_this.applyBtnText = '申请'
						}
					},
					false,
					() => {
						if(_this.applyBtnText !== '红娘推广中心') {
							_this.loadlogo = true
						}
					}
				);
			},
			
			// 点击上传头像
			UploadAvatar() {
				this.upLoadType = 'avatar'
				this.upImages()
			},
			
			// 点击上传二维码
			UploadQrcode() {
				this.upLoadType = 'qrcode'
				this.upImages()
			},
			
			// h5上传
			uploadImageFiles(requestData) {
				let _this = this;
				App._post_form(
					'&do=uploadFiles',
					requestData,
					res => {
						console.log('触发h5上传1111')
						if(res.errno === 0) {
							console.log('触发h5上传2222')
							if(_this.upLoadType === 'avatar') {
								_this.form.avatar = res.data.image
								_this.avatarUrl = res.data.img
								// _this.setData({
								// 	avatarUrl: res.data.img
								// })
							}else {
								_this.form.qrcode = res.data.image
								_this.qrcodeUrl = res.data.img
								// _this.setData({
								// 	qrcodeUrl: res.data.img
								// })
							}
						}
					},	
					false,
					() => {
						_this.$forceUpdate();
						uni.hideLoading();
					}
				);
			},
			
			// 上传图片
			async upImages() {
				let _this = this;
				// #ifdef H5
				if(App.getClientType() == 2){
					let res = await App.browser_upload(1);
				    uni.showLoading();
				    let imageUrl = res.tempFilePaths[0],
				    	rnImageData = App._upLoad(imageUrl);
				    rnImageData.then(options => {
				    	console.log(options, 'options');
				    	if(_this.upLoadType == 'avatar') {
				    		_this.form.avatar = options.data.image
				    		_this.avatarUrl = options.data.img
				    	}else if(_this.upLoadType == 'qrcode') {
				    		_this.form.qrcode = options.data.image
				    		_this.qrcodeUrl = options.data.img
				    	};
				    	uni.hideLoading();
				    });
					return
				}
				wxApi.choseImage(res => {
					wxApi.uoloadIg(res.localIds[0], data => {
						console.log(res,'res+++++++++')
						if (data.errMsg === 'uploadImage:ok') {
							uni.showLoading({});
							let requestData = {
								upload_type: 2,
								id: data.serverId
							};
							_this.uploadImageFiles(requestData);
						} else {
							App.showError('上传失败');
						}
					});
				});
				// #endif
				// #ifndef H5
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.showLoading();
						let imageUrl = res.tempFilePaths[0],
							rnImageData = App._upLoad(imageUrl);
						rnImageData.then(options => {
							console.log(options, 'options');
							if(_this.upLoadType == 'avatar') {
								_this.form.avatar = options.data.image
								_this.avatarUrl = options.data.img
							}else if(_this.upLoadType == 'qrcode') {
								_this.form.qrcode = options.data.image
								_this.qrcodeUrl = options.data.img
							};
							uni.hideLoading();
						});
					},
					fail: function() {
						App.showError('上传失败');
					}
				});
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.basics-info {
		width: 690rpx;
		margin: auto;
		padding-top: 30rpx;
	}
	.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;
		}
	}

	.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;
		}
	}
	
	.line {
		width: 690rpx;
		height: 8rpx;
		background-color: #F8F8F8;
		margin: auto;
		border-radius: 4rpx;
	}

	.avatar-info {
		width: 690rpx;
		height: 366rpx;
		margin: auto;
		padding-top: 40rpx;
		.tips {
			height: 33rpx;
			line-height: 33rpx;
			color: #999;
			font-size: 24rpx;
			margin-top: 20rpx;
		}
		.up-load {
			width: 158rpx;
			height: 158rpx;
			line-height: 158rpx;
			text-align: center;
			border-radius: 20rpx;
			margin-top: 30rpx;
			border: 1rpx dashed #ccc;
			.iconfont {
				font-size: 60rpx;
				color: #333;
				font-weight: bold;
			}
			image {
				width: 158rpx;
				height: 158rpx;
				border-radius: 20rpx;
			}
		}
		.avatar {
			border: none;
		}
		.qrcode {
			border: none;
		}
	}
	
	.reason {
		width: 690rpx;
		height: auto;
		font-size: 28rpx;
		color: #333;
		margin: auto;
	}

	.footer-btn {
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 20rpx;
		background: linear-gradient(270deg, #FF8E88 0%, #FDAD28 100%);
		border-radius: 20rpx;
		margin: 50rpx auto 0;
		color: #fff;
		font-size: 32rpx;
	}
	
	.pay-tips {
		height: 34rpx;
		padding: 20rpx 0 30rpx 0;
		display: flex;
		justify-content: center;
		font-size: 24rpx;
		color: #999;
		.iconfont {
			font-size: 24rpx;
			line-height: 33rpx;
			margin-right: 10rpx;
		}
	}
	
	.necessary {
		color: #FF4444;
		font-size: 28rpx;
	} 
</style>
