<template>
	<view class="box">
		<view class="topBg">
			<image src="/static/bg.png" class="topbgimg"></image>
			<!-- @click="auth" -->
			<view class="userInfoBox">
				<view class="headImg">
					<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
						<image mode="aspectFill" :src="avatarUrl"></image>
					</button>
				</view>
				<view class="nameBox">
					<!-- <input v-model="user.nickName" type="nickname"/> -->
					{{ user.nickName }}
					<view @click="changePhoneNumber">{{ user.phonenumber }}</view>
				</view>
			</view>
			<!-- 会员卡 -->
			<view class="vipBox" v-if="!isMaster && card.isVip">
				<image class="fm" :src="vTypeImg"></image>
				<image class="vv" src="/static/vip.png"></image>
				<view class="poInfo" @click="goCard">
					<view class="flexline">
						<view class="typeStr">{{ card.info.cardTypeStr }}</view>
						<view class="cardCode">{{ card.info.cardCode }}</view>
					</view>
					<view class="flexline mt40">
						<view class="ye">
							余额(元)
							<text>{{ card.info.balance }}</text>
						</view>

						<view class="zk">
							折扣
							<view>
								<text>{{ (100 - card.info.discountPercent) / 10 }}</text>
								折
							</view>
						</view>
					</view>
				</view>

				<view class="cardBottom">
					<text>有效期至{{ card.info?.expirationTime }}</text>
					<text class="renewBtn" @click="goRenew">立即续费</text>
				</view>
			</view>
		</view>
		<view class="rMainBox" v-if="!isMaster">
			<uni-list :border="false" class="myList">
				<uni-list-item :border="false" title="个人信息" showArrow :to="`./myInfo`">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" src="/static/user_icon03.png" mode="widthFix"></image>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item :border="false" title="参赛队信息" showArrow :to="`./teamList`">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" src="/static/user_icon06.png" mode="widthFix"></image>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item :border="false" title="会员充值" showArrow :to="`./mycard/renew`">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" src="/static/user_icon01.png" mode="widthFix"></image>
						</view>
					</template>
				</uni-list-item>

				<uni-list-item :border="false" title="场地订单" showArrow :to="`./bills`">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" src="/static/user_icon02.png" mode="widthFix"></image>
						</view>
					</template>
				</uni-list-item>

				<uni-list-item :border="false" title="我的培训" showArrow clickable @click="myTrain">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" src="/static/user_icon07.png" mode="widthFix"></image>
						</view>
					</template>
				</uni-list-item>

				<uni-list-item :border="false" title="我的赛事" showArrow :to="`./match`">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" src="/static/user_icon04.png" mode="widthFix"></image>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>

		<!-- 场馆人员 -->
		<view class="forAdmin" v-if="isMaster">
			<!-- <view class="forAdmin"> -->
			<view class="onlyCardBottom">
				<image src="/static/xf_bg.png" class="bbg"></image>
				<view class="cardBottom">
					<text>有效期至{{ card.info?.expirationTime }}</text>
					<text class="renewBtn" @click="goRenew">立即续费</text>
				</view>
			</view>

			<view class="funcBar">
				<!-- <view @click="goOrder"> -->
				<view @click="goBills">
					<image mode="aspectFit" src="/static/icon01.png"></image>
					预订
				</view>
				<view @click="goVip">
					<image mode="aspectFit" src="/static/icon02.png"></image>
					会员
				</view>
				<view @click="goQcode">
					<image mode="aspectFit" src="/static/icon03.png"></image>
					核验
				</view>
			</view>
			<view class="mt40">
				<uni-list :border="false" class="myList">
					<uni-list-item :border="false" title="个人信息" showArrow :to="`./myInfo`">
						<template v-slot:header>
							<view class="slot-box">
								<image class="slot-image" src="/static/user_icon03.png" mode="widthFix"></image>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item :border="false" title="团体信息" showArrow :to="`./teamList`">
						<template v-slot:header>
							<view class="slot-box">
								<image class="slot-image" src="/static/user_icon06.png" mode="widthFix"></image>
							</view>
						</template>
					</uni-list-item>

					<uni-list-item :border="false" title="培训报名" showArrow clickable @click="myTrain">
						<template v-slot:header>
							<view class="slot-box">
								<image class="slot-image" src="/static/user_icon07.png" mode="widthFix"></image>
							</view>
						</template>
					</uni-list-item>

					<uni-list-item :border="false" title="我的赛事" showArrow :to="`./match`">
						<template v-slot:header>
							<view class="slot-box">
								<image class="slot-image" src="/static/user_icon04.png" mode="widthFix"></image>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>

			<view class="reportItembox">
				<view class="reportItem">
					<view class="t">今日预订</view>
					<view class="rbody">
						<view>
							<text>{{ reportData.bookCount }}</text>
							订场
						</view>
						<view>
							<text>{{ reportData.bookAmount }}</text>
							金额
						</view>
					</view>
				</view>
				<view class="reportItem">
					<view class="t">商品销售</view>
					<view class="rbody">
						<view>
							<text>--</text>
							单
						</view>
						<view>
							<text>--</text>
							金额
						</view>
					</view>
				</view>

				<view class="reportItem">
					<view class="t">今日会员</view>
					<view class="rbody">
						<view>
							<text>{{ reportData.memberCount }}</text>
							新增
						</view>
						<view>
							<text>{{ reportData.memberAmout }}</text>
							金额
						</view>
					</view>
				</view>
				<view class="reportItem">
					<view class="t">今日签到</view>
					<view class="rbody">
						<view>
							<text>--</text>
							人数
						</view>
						<view>
							<text>--</text>
							金额
						</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="修改会员卡绑定手机号" @confirm="dialogInputConfirm">
				<view class="changephonepop">
					<view><input placeholder="请输入手机号" type="number" v-model="captchaPhonenumber" /></view>
					<view class="ffff">
						<input placeholder="输入验证码" type="number" v-model="captcha" />

						<button v-if="canSend" @click="sendsms">发送验证码</button>
						<button v-else disabled style="back">
							<uni-countdown
								style="display: inline-block;"
								:start="start"
								:font-size="14"
								:show-day="false"
								:show-hour="false"
								:show-min="false"
								color="#FFFFFF"
								splitorColor="#fff"
								:minute="1"
								:second="0"
								@timeup="timeup"
							/>
						</button>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
import * as api from '@/common/api.js';
import { ref } from 'vue';
import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app';
const vTypeImg = ref('/static/v1.png');
const card = ref({});
const reportData = ref({});
const user = ref({});
const userImg = ref('');
const avatarUrl = ref('');
const captchaPhonenumber = ref('');
const captcha = ref('');
const inputDialog = ref(null);
const start = ref(false);
const canSend = ref(true);
const app = getApp();
const isMaster = ref(false);

onPullDownRefresh(() => {
	getVip();
});
onShow(() => {
	if (app.globalData.isLogin) {
		init();
		getVip();
	} else {
		app.firstLoadCallback = () => {
			init();
			getVip();
		};
	}
});
function init() {
	const currUser = uni.getStorageSync('currUser');
	user.value = currUser;
	if (user.value.manageFlag == '1' && app.globalData.venue.id == user.value.venueId) {
		isMaster.value = true;
	}
	avatarUrl.value = user.value.avatar;
}
function getVip() {
	getMemberInfo();
	if (isMaster.value) {
		api.getMaInfo().then(res => {
			reportData.value = res.data;
		});
	}
}
function goBack() {
	uni.navigateBack({});
}

function onChooseavatar(e) {
	// 上传头像
	match.uploadFile(e).then(data => {
		avatarUrl.value = data.data;
		match.updateAvatar({ avatarUrl: avatarUrl.value }).then(res => {
			uni.showToast({
				title: '头像保存成功',
				icon: 'none',
				duration: 2000
			});
			uni.setStorageSync('currUser', res.data);
		});
	});
}

function changePhoneNumber() {
	inputDialog.value.open();
}
function dialogInputConfirm() {
	// 修改手机号
	const currUser = uni.getStorageSync('currUser');
	api.maRebindMemberCard(captchaPhonenumber.value, captcha.value).then(res => {
		uni.showToast({
			title: res.msg,
			icon: 'none',
			duration: 2000
		});
		captcha.value = '';
		getMemberInfo();
	});
}


function goRenew() {
	let path = '/pages/usercenter/mycard/renew';
	uni.navigateTo({
		url: path
	});
}
function goCard() {
	let path = '/pages/usercenter/mycard/mycard';
	uni.navigateTo({
		url: path
	});
}
function goOrder() {
	let path = '/pages/index/order';
	uni.navigateTo({
		url: path
	});
}
function goBills() {
	let path = '/pages/usercenter/bills';
	uni.navigateTo({
		url: path
	});
}
function goVip() {
	let path = '/pages/usercenter/mycard/mycard';
	uni.navigateTo({
		url: path
	});
}
function goQcode() {
	uni.scanCode({
		onlyFromCamera: true,
		success: function(res) {
			console.log('条码类型：' + res.scanType);
			console.log('条码内容：' + res.result);
			api.scanQrCode(res.result).then(res => {
				uni.showModal({
					title: '提示',
					content: res.msg,
					success: function(res) {
						if (res.confirm) {
							console.log('确定');
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				});
			});
		}
	});
}
function building() {
	uni.showToast({
		title: '暂未开放，敬请期待。',
		icon: 'none',
		duration: 2000
	});
}

function myTrain() {
	let path = '/pages/usercenter/myTrain/index/index';
	uni.navigateTo({
		url: path
	});
}

function timeup() {
	canSend.value = true;
}
function sendsms() {
	//发送验证码
	if (captchaPhonenumber.value) {
		let strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
		if (strTemp.test(captchaPhonenumber.value)) {
			api.getCaptchaSms({
				phonenumber: captchaPhonenumber.value
			}).then(res => {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 2000
				});
				start.value = true;
				canSend.value = false;
			});
		} else {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none',
				duration: 2000
			});
		}
	} else {
		uni.showToast({
			title: '请输入手机号',
			icon: 'none',
			duration: 2000
		});
	}
}
</script>

<style scoped lang="scss">
.box {
	width: 100vw;
	overflow: hidden;
}
.rMainBox {
	box-sizing: border-box;
	padding: 20rpx 25rpx 0;
	margin: 25rpx;
}
.userInfoBox {
	height: 200rpx;
}
.nameBox {
	position: absolute;
	left: 180rpx;
	top: 70rpx;
	font-size: 30rpx;
}
.nameBox view {
	color: #7b7f83;
	font-size: 26rpx;
	margin-top: 10rpx;
}
.goback {
	position: absolute;
	color: #fff;
	top: 100rpx;
	left: 35rpx;
}
.forAdmin {
	padding: 25rpx;
	box-sizing: border-box;
}
.topBg {
}
.onlyCardBottom {
	position: relative;
	width: 660rpx;
	margin: auto;
	height: 90rpx;
	.bbg {
		height: 90rpx;
		width: 660rpx;
	}
	.cardBottom {
		width: 660rpx;
		background: transparent;
		height: 90rpx;
		text {
			font-size: 28rpx;
			color: #925921;
		}
		.renewBtn {
			background: #874f02;
			color: #fff;
		}
	}
}
.headImg {
	border-radius: 50%;
	position: relative;
	top: 50rpx;
	overflow: hidden;
	width: 100rpx;
	height: 100rpx;
	border: 4px solid #ffffff;
	background: #c4f9cb;
	left: 40rpx;
	button {
		display: block;
		padding: 0;
	}
	image {
		width: 100rpx;
		height: 100rpx;
		display: block;
	}
}

.slot-image {
	width: 50rpx;
	position: relative;
	top: -8rpx;
	height: 50rpx;
	margin-right: 30rpx;
}

.myList {
}
.funcBar {
	display: flex;
	background: #fff;
	width: 700rpx;
	height: 140rpx;
	justify-content: space-around;
}
.funcBar view {
	display: flex;
	align-items: center;
	font-size: 36rpx;
}
.funcBar image {
	width: 80rpx;
	height: 80rpx;
}
.topbgimg {
	width: 100vw;
	position: absolute;
	z-index: -1;
}
.reportItembox {
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.reportItem {
	background: #fff;
	border-radius: 15rpx;
	width: 340rpx;
	margin-top: 25rpx;
	.t {
		border-bottom: 1px solid #e5e5e5;
		height: 70rpx;
		line-height: 70rpx;
		color: #2b3133;
		font-size: 30rpx;
		padding-left: 36rpx;
	}
	.rbody {
		display: flex;
		padding: 36rpx;
		box-sizing: border-box;
		view {
			font-size: 26rpx;
			color: #888;
			width: 40%;
		}
		text {
			color: #00c176;
			font-weight: bold;
			font-size: 36rpx;
			display: block;
			margin-bottom: 20rpx;
		}
	}
}
.changephonepop {
	width: 100%;
}
.changephonepop view {
	width: 100%;
	margin: 0 0 30rpx;
}
.changephonepop view input {
	width: 100%;
	background: #f4f4f4;
	font-size: 30rpx;
	height: 80rpx;
	padding: 0 15rpx;
	box-sizing: border-box;
	line-height: 80rpx;
}
.changephonepop view.ffff {
	display: flex;
}
.changephonepop view button {
	font-size: 24rpx;
	margin-left: 10rpx;
	white-space: nowrap;
	width: 260rpx;
	line-height: 80rpx;
	background: linear-gradient(90deg, #00c176, #3ed89b);
	color: #fff;
	padding: 0;
	border: none;
}
</style>