<template>
	<view>
		<loadlogo v-if="!loadlogo" />
		
		<view class="header" :style="{'background-image': 'url('+ imgfixUrls + 'dating/bd_personal_bg.png' +')'}">
			<view class="top-info">
				<view class="user-info">
					<image :src="userInfo.avatar" mode=""></image>
					<view class="user">
						<view class="name">{{userInfo.nickname}}</view>
						<view v-if="userInfo.is_vip" class="member">VIP</view>
					</view>
				</view>
				<view class="news" @click="handleNewsClick">
					<image :src="imgfixUrls + 'dating/bd_message.svg'" mode=""></image>
					<view v-if="userInfo.im > 0" class="num">{{userInfo.im}}</view>
				</view>
			</view>
			<view class="bottom-info">
				<view class="item" @click="toRcord(1)">
					<view class="value">{{userInfo.my_collection}}</view>
					<view class="title">收藏</view>
				</view>
				<view class="item" @click="toRcord(2)">
					<view class="value">{{userInfo.collection_my}}</view>
					<view class="title">收藏我</view>
				</view>
				<view class="item" @click="toRcord(3)">
					<view class="value">{{userInfo.my_browse}}</view>
					<view class="title">我看过谁</view>
				</view>
				<view class="item" @click="toRcord(4)">
					<view class="value">{{userInfo.browse_my}}</view>
					<view class="title">谁看过我</view>
				</view>
			</view>
			<view class="member-info">
				<view class="name">相亲会员</view>
				<block v-if="!Array.isArray(userInfo.vip)">
					<view v-if="userInfo.vip && userInfo.vip.type == 1" class="date">到期日期：{{userInfo.vip.end_time_text}}</view>
					<view v-else-if="userInfo.vip && userInfo.vip.type == 2" class="date">剩余次数：{{userInfo.vip.surplus_number}}</view>
					<view v-else-if="userInfo.vip && userInfo.vip.type == 3">已过期</view>
					<view v-else>已失效</view>
				</block>
				
				<view @click="openMember" class="btn">{{memberBtnText}}</view>
			</view>
		</view>
	
		<view class="content">
			<view class="member-info top">
				<view v-if="userInfo.is_top == 1" class="name">未置顶</view>
				<view v-else class="name">置顶中</view>
				<view v-if="userInfo.is_top == 2" class="date">到期日期：{{userInfo.top_end_time}}</view>
				<view class="btn">
					<picker class="picker" @change="change" :range="cTopList">
						{{topBtnText}}
					</picker>
				</view>
			</view>
			<view class="h1-title">其它功能</view>
			<view class="function-content">
				<view class="item" v-for="(item,index) in options" :key="index" @click="handleFunctionItemClick(index)">
					<image :src="item.url" mode=""></image>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
		</view>
	
		<view @click="toHome" class="foot-btn">返回首页</view>
		<TabBars :tabBarAct="0" pageType="16"></TabBars>
		
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import Loadlogo from '@/components/template/loadlogo.vue';
	import TabBars from '@/components/template/tabBar.vue';
	export default {
		data() {
			return {
				loadlogo: false,
				userInfo: {},  //用户信息
				currentIndex: 0,
				lng: '',
				lat: '',
			}
		},
		components: {
			Loadlogo,
			TabBars
		},
		computed: {
			options() {
				let res = [
					{url: this.imgfixUrls + 'dating/bd_personal_0.svg',title: '我的资料'},
					{url: this.imgfixUrls + 'dating/bd_personal_2.svg',title: '我的动态'},
					// {url: this.imgfixUrls + 'dating/bd_personal_3.svg',title: '个人视频'},
					{url: this.imgfixUrls + 'dating/bd_personal_4.svg',title: '我的红娘'},
					{url: this.imgfixUrls + 'dating/bd_personal_5.svg',title: '红娘服务'},
				]
				if(this.userInfo && this.userInfo.member_id && this.userInfo.member_id > 0) {
					res.push({url: this.imgfixUrls + 'dating/bd_personal_1.svg',title: '我的主页'})
				}
				return res
			},
			cTopList() {
				if(this.userInfo && this.userInfo.top_rule && this.userInfo.top_rule.length) {
					let res = []
					this.userInfo.top_rule.forEach(item => {
						res.push(`${item.day}天${item.price}元`)
					})
					return res
				}
			},
			memberBtnText() {
				return this.userInfo.is_vip == 0 ? '立即开通' : '立即续费'
			},
			
			topBtnText() {
				return this.userInfo.is_top == 1 ? '立即开通' : '立即续费'
			}
		},
		onLoad() {
			let _this = this
			uni.getLocation({
			    type: 'wgs84',
			    success(res) {
					_this.lng = res.longitude
					_this.lat = res.latitude
			    }
			})
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 获取个人中心信息
			getUserInfo() {
				let _this = this
				App._post_form(
					`&p=dating&do=memberCenter`,
					{},
					res => {
						_this.userInfo = res.data;
						if(_this.userInfo.examine == '2'){
							uni.showModal({
								showCancel:false,
								title:`个人信息审核被驳回:${_this.userInfo.reason}`,
								success() {
									_this.handleFunctionItemClick(0);
								}
							})
						}
						console.log(_this.userInfo,'res6666')
					},
					false,
					() => {
						_this.loadlogo = true
					}
				);
			},
			
			async handleFunctionItemClick(index) {
				let url = '',
					aid = uni.getStorageSync('agencyData').aid,
					status = ''
				switch(index) {
					case 0: url = `pages/subPages2/blindDate/form/userInfo?lng=${this.lng}&lat=${this.lat}`;break;
					case 1: url = 'pages/subPages2/blindDate/dynamics/myself'; break;
					case 2: url = 'pages/subPages2/blindDate/matchmakerService';break;
					case 3: 
						status = await this.getStatus()
						// 已通过跳转去推广中心
						url = status == 3 ? `pages/subPages2/blindDate/extension?lng=${this.lng}&lat=${this.lat}` : `pages/subPages2/blindDate/form/matchmakerApply?lng=${this.lng}&lat=${this.lat}`; 
						// url = `pages/subPages2/blindDate/form/matchmakerApply?lng=${this.lng}&lat=${this.lat}`
						break;
					case 4: url = `pages/subPages2/blindDate/member/detail?id=${this.userInfo.member_id}&is_self=true`;break;
				}
				App.navigationTo({
					url: url
				})
			},
			
			// 获取红娘申请状态
			getStatus() {
				return new Promise((resolve) => {
					App._post_form(
						`&p=dating&do=applyMatchmaker&type=get`,
						{},
						res => {
							resolve(res.data.status)
						},
						false,
						() => {}
					)
				})
			},
			
			// 开通续费会员
			openMember() {
				App.navigationTo({
					url: `pages/subPages2/blindDate/member/open`
				})
			},
			
			// 开通续费置顶
			change(e) {
				let _this = this,
					day = _this.userInfo.top_rule[e.detail.value].day
				App._post_form(
					`&p=dating&do=applyTop`,
					{
						day: day
					},
					res => {
						if(res.errno == 0) {
							App.navigationTo({
								url: 'pages/mainPages/payment/payment?orderid=' + res.data.orderid + '&plugin=dating'
							});
						}
					},
					false,
					() => {
					}
				);
			},
			
			// 去记录列表
			toRcord(type) {
				App.navigationTo({
					url: `pages/subPages2/blindDate/record?type=${type}`
				})
			},
			
			// 去消息列表
			handleNewsClick() {
				App.navigationTo({
					url: `pages/subPages/homepage/private/private`
				})
			},
			
			// 返回首页
			toHome() {
				App.navigationTo({
					url: `pages/mainPages/index/index`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 400rpx;
		background-size: 100% 100%;
		position: relative;
		overflow: hidden;
		.top-info {
			width: 690rpx;
			height: 100rpx;
			margin: 30rpx auto 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.user-info {
				display: flex;
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50rpx;
				}
				.user {
					height: 100%;
					margin-left: 30rpx;
					.name {
						height: 50rpx;
						line-height: 50rpx;
						margin-top: 3rpx;
						color: #333;
						font-size: 36rpx;
						font-weight: bold;
					}
					.member {
						width: 70rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						margin-top: 10rpx;
						border-radius: 15rpx;
						background-color: #DCC083;
						font-size: 20rpx;
						color: #fff;
					}
				}
			}
			.news {
				margin-right: 14rpx;
				position: relative;
				image {
					width: 40rpx;
					height: 40rpx;
				}
				.num {
					width: 34rpx;
					height: 34rpx;
					line-height: 34rpx;
					text-align: center;
					border-radius: 17rpx;
					background-color: #FF4444;
					color: #fff;
					font-size: 20rpx;
					position: absolute;
					right: -14rpx;
					top: -15rpx;
				}
			}
		}
		.bottom-info {
			width: 100%;
			height: 87rpx;
			margin-top: 50rpx;
			display: flex;
			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				.value {
					height: 44rpx;
					line-height: 44rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
				}
				.title {
					height: 33rpx;
					line-height: 33rpx;
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
	
	.member-info {
		width: 630rpx;
		height: 44rpx;
		padding: 18rpx 30rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;
		font-size: 24rpx;
		background: #DCC083;
		margin: 50rpx auto 0;
		.name {
			height: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
		.date {
			height: 34rpx;
		}
		.btn {
			width: 126rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			border-radius: 22rpx;
			border: 1rpx solid #fff;
		}
	}
	.top {
		background: linear-gradient(270deg, #FF8E88 0%, #FDAD28 100%);
		margin-top: 20rpx;
	}

	.content {
		overflow: hidden;
		.h1-title {
			height: 50rpx;
			line-height: 50rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #333;
			margin-left: 30rpx;
			margin-top: 50rpx;
		}
		.function-content {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.item {
				width: 25vw;
				height: 83rpx;
				margin-top: 50rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				image {
					width: 40rpx;
					height: 40rpx;
				}
				.title {
					height: 33rpx;
					line-height: 33rpx;
					color: #333;
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}
		}
	}

	.foot-btn {
		width: 690rpx;
		height: 80rpx;
		background-color: #F8F8F8;
		line-height: 80rpx;
		text-align: center;
		color: #999;
		font-size: 28rpx;
		border-radius: 20rpx;
		position: fixed;
		left: 30rpx;
		bottom: 130rpx;
	}
</style>
