<template>

	<view style="background-color: #F5F7FC; justify-content: center; height: 100vh; align-items: center;">
		<view class="qh-u-header">
			<text class="qh-u-title">我的</text>

			<view
				style="background-color: white; border-radius: 20rpx; 
				margin-left: 34rpx; margin-right: 34rpx;
				display: flex; padding-top: 34rpx; padding-bottom: 61rpx; width: 92%;  margin-top: 40rpx; align-items: center; justify-content: space-between;">
				<image :src="headIcon"
					style="background-color: transparent; width: 104rpx; height: 104rpx; border-radius: 52rpx; margin-left: 35rpx;"
					@error="imageError" @click="bindLogin()"></image>
				<view style="margin-left: 20rpx; flex-grow: 1;" @click="bindLogin()">
					<text style="font-size: 36rpx; color: #333333; font-weight: 600;">
						{{ this.hasLogin ? this.userName : '登陆/注册' }}</text>
					<view style="margin-top: 15rpx;">
						<text style="font-size: 26rpx; color: #999999;">欢迎来到金球体育</text>
					</view>
				</view>

			</view>
		</view>
		<view style="background-color: white; border-radius: 10rpx;
			margin-left: 34rpx; margin-right: 34rpx;
				padding-left: 20rpx ; padding-right: 20rpx; margin-top: 10%; align-self: center;">

			<view class="qh-list-c" @click="gotoSuggest()">
				<view style="display: flex;">
					<image src="../../static/mine_icons/mine_feedback_icon.png" style="width: 50rpx; height: 50rpx;" />
					<text class="list-text">提建议/问题反馈</text>
				</view>
				<image src="../../static/mine_icons/mine_right_arrow.png" style="width: 40rpx; height: 40rpx;" />
			</view>
			<view class="qh-list-c" @tap="share">
				<view style="display: flex;">
					<image src="../../static/mine_icons/mine_share_icon.png" style="width: 50rpx; height: 50rpx;" />

					<text class="list-text">分享给好友</text>
				</view>
				<image src="../../static/mine_icons/mine_right_arrow.png" style="width: 40rpx; height: 40rpx;" />
			</view>
			<view class="qh-list-c" @click="gotoSettings()">
				<view style="display: flex;">
					<image src="../../static/mine_icons/mine_settings_icon.png" style="width: 50rpx; height: 50rpx;" />
					<text class="list-text">设置</text>
				</view>

				<image src="../../static/mine_icons/mine_right_arrow.png" style="width: 40rpx; height: 40rpx;" />
			</view>
		</view>

		<view style="display: flex; justify-self: center; width: 100%; margin-top: 30rpx; justify-content: center;">
			<view class="tip-text">在使用过程如遇问题，请咨询客服微信</view>
			<view class="tip-text2" @click="copyweixin()">{{weixin}}</view>
		</view>
	</view>

</template>

<script setup>
	import common from "../../utils/common";
	import loginHelper from "../../utils/loginHelper.js"
	import {
		default as app_config
	} from '../../utils/app.js';
	
	export default {
		data() {
			return {
				common,
				hasLogin : false ,
				userName : "",
				headIcon : loginHelper.defaultHeadIcon ,
				buttonRect: {},
				weixin: "ydnkf002"
			}
		},
		methods: {
			async bindLogin() {
				if (!loginHelper.hasLogin()) {
					uni.navigateTo({
						url: "/pages/login_pwd/login_pwd",
					});
				}
			},
			async gotoSuggest() {
				if (loginHelper.hasLogin()) {
					uni.navigateTo({
						url: '/pages/suggest/suggest'
					})
				} else {
					uni.navigateTo({
						url: "/pages/login_pwd/login_pwd"
					})
				}
			},
			async gotoSettings() {
				uni.navigateTo({
					url: '/pages/settings/settings'
				})
			},
			imageError(e) {
				console.error('image发生error事件，携带值为' + e.detail.errMsg)
			},
			gotoMember() {
				if (loginHelper.hasLogin()) {
					let tempData = {
						url: `${app_config.server_url.app_host}user/vip?vip_type=1`
					}
					uni.navigateTo({
						url: `/pages/notitle_webview/notitle_webview?info=${encodeURIComponent(JSON.stringify(tempData))}`
					})
				} else {
					uni.navigateTo({
						url: '/pages/login_pwd/login_pwd'
					})
				}
			},
			gotoMyOrder() {
				if (loginHelper.hasLogin()) {
					let tempData = {
						url: `${app_config.server_url.app_host}user/orders`
					}
					uni.navigateTo({
						url: `/pages/notitle_webview/notitle_webview?info=${encodeURIComponent(JSON.stringify(tempData))}`
					})
				} else {
					uni.navigateTo({
						url: '/pages/login_pwd/login_pwd'
					})
				}
			},

			share() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['分享到微信', '复制链接'],
					popover: {
						top: _this.buttonRect.top * 2 + _this.buttonRect.height,
						left: _this.buttonRect.left + _this.buttonRect.width / 2
					},
					success: e => {
						if (e.tapIndex == 0) {
							_this.clip_board("推荐一个很好用的体育APP给你玩，你试试看! http://www.qianhaiyilan.cn/");
							plus.runtime.openURL("weixin://");
						}
						if (e.tapIndex == 1) {
							_this.clip_board("推荐一个很好用的体育APP给你玩，你试试看! http://www.qianhaiyilan.cn/");
						}
					}
				});
			},
			clip_board(value) {
				uni.setClipboardData({
					data: value,
					success: function() {
						uni.getClipboardData({
							success: function(res) {
								console.log(res.data);
								uni.showToast({
									title: "已复制到剪贴板",
									icon: "none",
								});
							},
						});
					},
				});
			},
			copyweixin() {
				this.clip_board(this.weixin);
			}
		},
		onLoad() {

		},
		onShow: function() {
			var userInfo = loginHelper.getUserInfo()
			if (userInfo) {
				this.headIcon = userInfo.FaceImageCode
				this.userName = userInfo.NickName
			} else {
				this.headIcon = loginHelper.getDefaultHeadIcon()
				loginHelper.logout();
			}
			this.hasLogin = loginHelper.hasLogin()
			if(common.info_config && common.info_config.me_help_note) {
				this.weixin = common.info_config.me_help_note.weixin
			}
			console.log("onShow:" + this.weixin + "-" + JSON.stringify(userInfo))
		}
	}
</script>

<style scoped>
	.qh-content {
		background-color: aquamarine;
	}

	.qh-u-header {
		display: flex;
		flex-direction: column;
		height: 270rpx;
		background-color: transparent;
		background-image: url("../../static/mine_icons/my_bg.png");
		background-size: cover;
		align-items: center;
		padding-top: 67rpx;
	}

	.qh-u-title {
		color: white;
		font-size: 40rpx;
		font-weight: 500;
		margin-top: 20rpx;
	}

	.qh-list-c {
		background-color: white;
		display: flex;
		height: 132rpx;
		justify-content: space-between;
		align-items: center;
	}

	.list-text {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		margin-left: 23rpx;
	}

	.tip-text {
		text-align: center;
		font-size: 25rpx;
		color: #D8D8D8;
	}

	.tip-text2 {
		text-align: center;
		font-size: 25rpx;
		color: blue;
	}
</style>