<template>
	<view class="main">
		<view class="topCard flex jcsb">
			<view class="leftBox">
				<image :src="imageRootNew+'Equity.png'" ></image>
			</view>
			<view class="rightBox">
				<view style="text-align: right;font-weight: bold;margin-bottom: 20upx;">我的权益</view>
				<button button-hover="{background-color: rgba(120, 181, 255, 0.1); opacity: 0.7;}" class="button" @click="buy" type="default">购买vip特权包</button>
			</view>
		</view>
		
		<view class="vipCard">
			<view style="color: #2A4362;font-size: 36upx;">购买VIP特权包，享更多权益</view>
			
			<view class="table">
				<view class="flex jcsb">
					<view class="w30 tc cO h100 lh">权益类型</view>
					<view class="w40 tc cO h100 lh">基础权益</view>
					<view class="w30 tc cT h100 lh">VIP特权包</view>
				</view>
				<view v-for="(item ,index) in list2" :key="index" class="flex jcsb">
					<view class="w30 tc h100 lh">{{ item.rights_type }}</view>
					<view class="w40 tc h100 lh">{{ item.base_rights }}</view>
					<view class="w30 tc cO h100 lh">{{ item.vip_rights }}</view>
				</view>
			</view>
			
			<view class="txt">
				<view v-for="(item, index) in list3" :key="index">
					{{ item }}
				</view>
				<view class="">组合套餐，高性价、更划算，如有问题可直接咨询。</view>
			</view>
			<!-- <view style="color: #67AAFD;font-size: 30upx;">在线客服</view> -->
			<button
				open-type="contact"
				hover-class="none"
			  style="color: #67AAFD;font-size: 28upx;background-color: transparent;display: inline;padding: 0px;margin: 0px;">
				在线客服
			</button>
		</view>
		
		<view style="width: 91%;margin: 0 auto;margin-top: 5%;margin-bottom: 3%;font-size: 36upx;">权益使用量</view>
		
		<view class="cardList flex jcsb" v-for="(item ,index) in list" @click="go(item)" :key="index">
		   <view class="ml5">{{ item.name }}</view>
		   <!-- <view class="linkColor mr5" v-if="item.name=='广告曝光卡'">
		    联系平台 <image class="rightArrow" :src="imageRootNew+'right.png'"></image>
		   </view> -->
			 <button v-if="item.link=='contact'"
			 	class="linkColor mr5"
			 	open-type="contact"
			 	hover-class="none"
			   style="background-color: transparent;font-size: 28upx;padding: 0px;">
			 	联系平台 <image class="rightArrow" :src="imageRootNew+'right.png'"></image>
			 </button>
		   <view class="mr5" v-else><text  class="linkColor ">
		    {{ item.use_amount + item.unit }}</text>/{{ item.total_amount + item.unit }} 
		   <image class="rightArrow" :src="imageRootNew+'right.png'"></image>
		   </view>
		</view>
		
		<view class="h50"></view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	export default {
		data() {
			return{
				list: [],
				list2: [],
				list3: []
				
			}
		},
		onShow() {
			this.getData();
		},
		methods: {
			getData(){
				let data = {};
				App._post_form('&p=rights&do=getRightsList', data, res => {
					this.list2 = res.data.table_list
					this.list = res.data.member_rights_list
					this.list3 = res.data.content_list;
					this.rights_bag_data = res.data.rights_bag_data;
					this.list.map(item => {
						if(item.name == '置顶权益'){
							item.link = 'pages/subPages/Equity/Topping/Topping?rights_id='+item.rights_id;
						}else if(item.name == '畅聊卡'){
							item.link = 'pages/subPages/Equity/chat/chat?rights_id='+item.rights_id
						}else if(item.name == '招聘次数'){
							item.link = 'pages/subPages/Equity/recruit/recruit?rights_id='+item.rights_id
						}else if(item.name == '精准人才卡'){
							item.link = 'pages/subPages/Equity/person/person?rights_id='+item.rights_id
						}else{
							item.link = 'contact'
						}
					})
				})
			},
			go(url) {
					uni.navigateTo({
						url: '/' + url.link
					})
			},
			buy(){
				let user = uni.getStorageSync('userinfo')
				
				let data = {
					rights_id: this.rights_bag_data.id,
					type: 2,
					// price: this.rights_bag_data.price,
					contacts: user.nickname,
					contact_phone: user.truemobile
				};
				console.log(data)
				App._post_form('&p=rights&do=createRightsPay', data, res => {
					// let obj = {
					// 	orderid: res.data.orderid,
					// 	plugin: res.data.type
					// }
					// const params = encodeURIComponent(JSON.stringify(obj));
					uni.navigateTo({
						url: '/pages/mainPages/payment/payment?orderid=' + res.data.orderid + '&plugin=' + res.data.type
					})
					console.log(res.data)
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	page{
		// background-color: red;
	}
	.main{
		width: 100%;
		height: auto;
		background-color: #FDFEFF;
	}
	.flex{
		display: flex
	}
	.jcsb{
		justify-content: space-between;
	}
	.lh{
		line-height: 100upx;
	}
	.ml5{
		margin-left: 3%;
	}
	.mr5{
		margin-right: 3%;
	}
	.w30{
		width: 30%;
	}
	.w40{
		width: 40%;
	}
	.h50{
		height: 50upx;
	}
	.h100{
		height: 100upx;
	}
	.tc{
		text-align: center;
	}
	.cO{
		background-color: #F0F0F0;
	}
	.cT{
		background-color: #D4E0EF;
	}
	.topCard{
		width: 100%;
		height: 344upx;
		background-color: #E5F2FF;
		// padding: 0 3% 0 3%;
		.leftBox{
			width: 40%;
			height: 344upx;
			margin-left: 3%;
			// border: 1px solid red;
			image{
				margin-top: 60upx;
				width: 200upx;
				height: 190upx;
			}
		}
		.rightBox{
			width: 40%;
			height: 344upx;
			margin-right: 3%;
			padding-top: 90upx;
			font-size: 38upx;
			// border: 1px solid blue;
		}
	}
	.button{
		background-color: #509DFD;
		color: white;
	}
	
	.vipCard{
		width: 88%;
		height: auto;
		border-radius: 20upx;
		padding: 2%;
		margin: 0 auto;
		margin-top: -50upx;
		background-color: #FFFFFF;
		box-shadow: 0 0 8px 0px #E5F2FF;
		.txt{
			color: #999999;
			font-size: 24upx;
			font-weight: bold;
			line-height: 45upx;
			letter-spacing: 5upx
		}
	}
	.cardList{
		width: 88%;
		height: 90upx;
		background-color: #FFFFFF;
		box-shadow: 0 0 10px 0px #E5F2FF;
		margin: 0 auto;
		padding: 2%;
		border-radius: 20upx;
		font-size: 30upx;
		color: #444444;
		margin-top: 3%;
		margin-bottom: 3%;
		align-items: center;
	}
	.linkColor{
		color: #6CADFD;
	}
	.rightArrow{
		width: 20upx;
		height: 30upx;
		align-items: center;
		margin-left: 15upx;
		margin-bottom: -4upx;
	}
	.table{
		background-color: #FAFAFA;
		font-size: 26upx;
		font-weight: bold;
		width: 100%;
		border-radius: 20upx;
		overflow: hidden;
		height: auto;
		margin-top: 30upx;
		margin-bottom: 20upx;
		color: #414141;
	}
</style>