<template>
	<view class="content">
		<view class="center-bg">
			<uni-nav-bar class="nav-bar" :border="false" backgroundColor="transparent" bcolor="transparent" color="#FFF" :title="title" />
			<image src="../../static/center.jpg" mode="aspectFill"></image>
			<view class="wrap">
				<view class="center-portrait" v-if="info">
					<image :src="info.head" mode="aspectFill"></image>
					<view class="name"><text>{{info.nick}}</text></view>
					<view class="center-bottom">
						<view><image src="../../static/de.png" mode="aspectFit"></image><text v-if="info.isVip">VIP</text><text v-else>平民</text></view>
						<view><image src="../../static/xin.png" mode="aspectFit"></image>{{info.much}}票</view>
						<view><image src="../../static/id.png" mode="aspectFit"></image>{{info.id}}</view>
					</view>
				</view>
				<view class="center-portrait" v-else>
					<image @tap="log" src="../../static/user.png" mode="aspectFill"></image>
					<view class="name"><text>我是一颗小爱豆</text></view>
					<view class="center-bottom">
						<view><image src="../../static/de.png" mode="aspectFit"></image><text>平民</text></view>
						<view><image src="../../static/xin.png" mode="aspectFit"></image>0票</view>
						<view><image src="../../static/id.png" mode="aspectFit"></image>123456</view>
					</view>
				</view>
			</view>
			<uni-list>
				<button class="handleContact" open-type="contact" bindcontact="handleContact">
					<uniListItem class="my-bottom" title="问题解答服务" thumb="/static/ke.png" />
				</button>
			</uni-list>
		</view>
		<view class="center-bottom" v-if="dataList && dataList.length>0">
			<view class="my-diot">我的偶像（长按删除）</view>
			<view class="my-diot-list">
				<view @longtap="longtap(item)" class="my-list-item" v-for="(item,index) in dataList" :key="index">
					<text>{{index+1}}</text>
					<image class="image" :src="'https://xyb.wlkjwl.cn/'+item.star.head" mode="aspectFill"></image>
					<view class="list-width">
						<view class="title">{{item.star.name}}</view>
						<view class="text">总获得{{item.totalMuch}}票支持</view>
						<view class="blue">我支持了{{item.myMuch}}票</view>
					</view>
					<view @tap="navToSup(item)" class="jixu">继续支持</view>
				</view>
			</view>
		</view>
		<view class="ad-view">
			<ad unit-id="adunit-9a9de4ea95a7f799" ad-type="video" ad-theme="white"></ad>
			<view class="text">由未来空间网络公司开发 联系微信:zkm0210</view>
		</view>
		<view class="show-wrap" v-if="isLogin">
			<view class="show-model">
				<view class="title">未登录</view>
				<view class="content">请允许微信授权登录</view>
				<view class="btn-group">
					<button @tap="hideIsLogin" class="button-default">取消</button>
					<button class="button-default button-blue getUserInfo" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true">确认</button>
				</view>
			</view>
			<view @tap="hideIsLogin" class="show-model-mask">
			</view>
		</view>
	</view>
</template>

<script>
import { mapState,mapMutations } from 'vuex';
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
export default {
	components: {
		uniList,
		uniListItem
	},
	computed: {
		...mapState(['hasLogin','userInfo']),
	},
	data() {
		return {
			title:"我的偶像",
			info:'',
			dataList:'',
			isLogin:false,
		};
	},
	onLoad() {
		this.getUserInfo();
	},
	onShow(){
		this.getMyXiang();
	},
	methods:{
		...mapMutations(['login']),
		log(){
			this.isLogin = true;
		},
		longtap(item){
			this.request({
				url:this.path+'/api/xyb/star/myouxiangDelete',
				data:{
					starId:item.starId
				},
				success:(res)=>{
					let d = res.data;
					if(d.code == 0){
						uni.showToast({
							title:"删除成功！",
							icon:"none"
						})
						this.getMyXiang();
					}
				}
			})
		},
		wxGetUserInfo(){
			//api/xyb/wechat/wxLogin
			let that = this;
			uni.login({
				provider: 'weixin',
				success: loginRes => {//获取用户code
					// if(!that.hasLogin){
						//授权获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								that.request({
									url: that.path + '/api/xyb/wechat/wxLogin',
									data: {
										code: loginRes.code,
										sex:infoRes.userInfo.gender,
										head:infoRes.userInfo.avatarUrl,
										nick:infoRes.userInfo.nickName,
										encryptedData:infoRes.encryptedData,
										iv:infoRes.iv
									},
									success: function(res) {
										let d = res.data;
										infoRes.userInfo.token = d.data.openid;
										that.login(infoRes.userInfo)
										that.isLogin = false;
										that.getMyXiang();
										that.getUserInfo();
									}
								});
								
							}
						});
						
					// }
				}
			});
		},
		handleContact(e){
			console.log(e.detail.path)
			console.log(e.detail.query)
		},
		hideIsLogin(){
			this.isLogin = false;
		},
		getMyXiang(){
			this.request({
				url:this.path+'/api/xyb/star/myouxiang',
				success:(res)=>{
					let d = res.data;
					this.dataList = d.rows;
					console.log(this.dataList)
				}
			})
		},
		getUserInfo(){
			this.request({
				url:this.path+'/api/xyb/star/customerInfo',
				success:(res)=>{
					let d = res.data;
					this.info = d.data;
					console.log(this.info)
				}
			})
		},
		navToSup(item){
			uni.navigateTo({
			    url: '/pages/support/support?id='+item.starId
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	.ad-view{
		width: 100%;
		padding:20rpx 0 0;
		box-sizing: border-box;
		.text{
			text-align: center;
			color: grey;
			font-size: 26rpx;
			padding: 10rpx 0;
		}
	}
	page{
		background-color: #f6f6f6;
	}
	.show-wrap{
		border-radius: 10rpx;
		z-index: 9999;
		.show-model-mask{
			width: 100vw;
			height: 100vh;
			z-index: 9998;
			background-color: rgba(0,0,0,0.3);
			position: fixed;
			top: 0;
			left: 0;
		}
		.show-model{
			z-index: 11;
			position: fixed;
			top: 50%;
			left: 50%;
			width: 80vw;
			height: auto;
			margin:-150rpx -40vw ;
			box-sizing: border-box;
			background-color: #FFFFFF;
			z-index: 9999;
			.title{
				background-color: #4A67D6;
				color: #FFFFFF;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
			}
			.content{
				background-color: #FFFFFF;
				font-size: 28rpx;
				padding: 15rpx;
				box-sizing: border-box;
				text-align: center;
				height: 100rpx;
				line-height: 70rpx;
			}
			.btn-group{
				display: flex;
				align-items: center;
				text-align: center;
				box-shadow: 0 -4rpx 4rpx #F2F2F2;
				padding: 0 30rpx;
				.button-blue{
					color: #4A67D6;
				}
				.button-default{
					background-color: #FFFFFF;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					padding: 0 30rpx;
					font-size: 28rpx;
					flex: 1;
				}
				button{
					width: auto;
					height: auto;
					border: none;
					padding: 0;
					margin: 0;
					border-radius: 0;
					line-height: inherit;
					background-color: #FFFFFF;
					display: inline-block;
				}
				button::after{display: none;}
				button + button{
					border-left: 1px solid #F2F2F2;
				}
			}
		}
	}
	.handleContact{
		background-color: transparent;
		padding: 0;
		margin: 0;
		border: 0;
		line-height: initial;
		text-align: left;
	}
	.handleContact::after{
		display: none;
	}
	.content{
		background-color: #f6f6f6;
		.center-bottom{
			margin-top: 30rpx;
			padding: 30rpx;
			background-color: #FFFFFF;
			.my-diot{
				font-size: 32rpx;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;
				border-bottom: 1px solid #F2F2F2;
			}
			.my-diot-list{
				.my-list-item{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					overflow: hidden;
					justify-content: space-between;
					padding-bottom: 10rpx;
					margin-bottom: 10rpx;
					.list-width{
						width:250rpx;
						text-align: center;
						white-space: nowrap;
					}
					text{
						font-weight: 700;
						font-size: 30rpx;
					}
					.jixu{
						background-color: rgb(86, 128, 230);
						color: #FFFFFF;
						font-size: 24rpx;
						padding:10rpx 20rpx;
						border-radius: 50rpx;
					}
					.title{
						font-weight: 600;
					}
					.text{
						font-size: 26rpx;
					}
					.blue{
						color: #4CD964;
						font-size: 26rpx;
					}
					.image{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
				}
			}
		}
		
		.center-bg{
			width: 100%;
			position: relative;
			padding-top: 150rpx;
			background-color: #FFFFFF;
			.wrap{
				min-height: 400rpx;
			}
			.nav-bar{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;
			}
			.bottom-portrait{
				display: flex;
			}
			.center-portrait{
				position: relative;
				text-align: center;
				margin-bottom: 60rpx;
				.center-bottom{
					display: flex;
					background-color: #FFFFFF;
					width: 80%;
					margin: 0 auto;
					padding: 30rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					font-weight: 700;
					border-radius: 20rpx;
					box-shadow: 0 0 20rpx #FFFFFF;
					view{
						flex: 1;
						display: flex;
						text-align: center;
						justify-content: center;
						align-items: center;
						image{
							width: 50rpx;
							height: 50rpx;
							margin-right: 10rpx;
						}
						color: #08A5E0;
					}
				}
				.name{
					text-align: center;
					font-size: 30rpx;
					margin: 20rpx 0 30rpx;
					font-weight: 700;
					color: #FFFFFF;
				}
				&>image{
					margin: 0 auto;
					border: 10rpx solid #FFFFFF;
					width: 180rpx;
					height: 180rpx;
					border-radius: 50%;
				}
			}
			&>image{
				width: 100%;
				height: 600rpx;
				position: absolute;
				top:0;
				left: 0;
				border-bottom-left-radius:50rpx;
				border-bottom-right-radius:50rpx;
			}
		}
	}
	
	
</style>
