<template>
	<view class="personal">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="headBox">
			<!-- #ifdef MP -->
			<!-- 登录 -->
			<view class="u-flex u-p-l-30 u-p-r-20 u-p-t-75 u-p-b-30">
				<block v-if="userInfo.token">
					<view class="u-m-r-20"><image class="avatar" mode="aspectFill" :src="userInfo.headLogo || '/static/logo.png'"></image></view>
					<view class="u-flex-1" @click="onJump('/pages/personal/set')">
						<view class="nickName u-flex">
							<view class="name u-m-r-10" v-if="userInfo.nickName">{{ userInfo.nickName }}</view>
						</view>
						<view class="detail" v-if="userInfo.phoneNum">手机号：{{ userInfo.phoneNum | phone }}</view>
						<view class="detail" v-else>手机号:未绑定</view>
					</view>
				</block>
				<block v-else>
					<view class="u-m-r-20">
						<view class="avatar u-flex" style="justify-content: center;"><u-icon name="account-fill" color="black" size="30"></u-icon></view>
					</view>
					<view class="u-flex-1">
						<view @click="openLoginFunc" class="u-font-lg" style="color:black;font-weight: bold;">请点击登录</view>
						<view
							@click="clickAccountFunc"
							style="margin-top: 15rpx;text-align: center;border-radius: 22px;;background-color: #FFFFFF;width: 150rpx;height: 50rpx;"
							class="detail"
						>
							<text style="color:#3388FF;font-size: 12px;">绑定账号</text>
						</view>
					</view>
				</block>
				<view><u-icon @click="openPersonalInfo" name="arrow-right" color="black" size="13"></u-icon></view>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP -->
			<!-- 登录 -->
			<view class="u-flex u-p-l-30 u-p-r-20 u-p-t-75 u-p-b-30">
				<block v-if="userInfo.token">
					<view class="u-m-r-20"><image class="avatar" mode="aspectFill" :src="userInfo.headLogo"></image></view>
					<view class="u-flex-1" @click="onJump('/pages/user/set')">
						<view class="nickName">{{ userInfo.userName }}</view>
						<view class="detail" v-if="userInfo.phoneNum">手机号：{{ userInfo.phoneNum | phone }}</view>
						<view class="detail" v-else>手机号:未绑定</view>
					</view>
				</block>
				<block v-else>
					<view class="u-m-r-20">
						<view class="avatar u-flex" style="justify-content: center;"><u-icon name="account-fill" color="black" size="30"></u-icon></view>
					</view>
					<view class="u-flex-1">
						<view @click="openLoginFunc" class="u-font-lg" style="color: black;font-weight: bold;">登录</view>
						<view @click="clickAccountFunc" style="color:black;" class="detail">绑定账号</view>
					</view>
				</block>
				<view><u-icon @click="openPersonalInfo" name="arrow-right" color="black" size="13"></u-icon></view>
			</view>
			<!-- #endif -->
		</view>
		<view
			class="u-flex"
			style="position: relative;top:-25rpx;z-index:54;background: #FFFFFF;;border-radius: 17px 17px 0px 0px;;height: 750rpx;width: 750rpx;flex-direction: column;justify-content: space-between;"
		>
			<view style="margin-top: 100rpx;">
				<view @click="openSysNotify" class="u-flex" style="flex-direction: row;justify-content: space-between;align-content: space-between;">
					<view style="width: 125rpx;"><image style="width:35rpx;height: 35rpx;" src="../../static/sys-not.png" mode=""></image></view>
					<view style="position: relative;left: -58rpx;width: 420rpx;"><text style="color: #333333;font-size: 15px;">系统通知</text></view>
					<view style="position: relative;right: -112rpx;width: 100rpx;">
						<image style="width: 13rpx;height: 17rpx;" src="../../static/arrow-right.png" mode=""></image>
					</view>
				</view>
				<view @click="openFeedBack" class="u-flex" style="margin-top: 60rpx;flex-direction: row;justify-content: space-between;align-content: space-between;">
					<view style="width: 125rpx;"><image style="width:35rpx;height: 35rpx;" src="../../static/find-sugg.png" mode=""></image></view>
					<view style="position: relative;left: -58rpx;width: 420rpx;"><text style="color: #333333;font-size: 15px;">意见反馈</text></view>
					<view style="position: relative;right: -112rpx;width: 100rpx;">
						<image style="width: 13rpx;height: 17rpx;" src="../../static/arrow-right.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="u-flex" style="justify-content: center;width: 600rpx;"><u-button @click="onLoginoutFunc" type="primary" shape="circle" text="退出账号"></u-button></view>
		</view>
		<f-tabbar></f-tabbar>
		<!-- 绑定账号 -->
		<view>
			<u-modal :showConfirmButton="false" :show="show" :title="title">
				<view v-if="!bindPhone" class="loginPhone">
					<view class="form-row" style="background:#F7F9FF;border-radius: 48px;width: 532rpx;height: 80rpx;border: 0.01rpx solid #F7F9FF;">
						<u--input border="surround" shape="circle" class="input" prefixIcon="account-fill" type="text" placeholder="登录账号" v-model="account"></u--input>
					</view>
					<view class="form-row" style="margin-top: 20rpx;background: #F7F9FF;border-radius: 48px;width: 532rpx;height: 80rpx;border: 0.01rpx solid #F7F9FF;">
						<u--input
							class="input"
							border="surround"
							shape="circle"
							prefixIcon="lock-fill"
							:suffixIcon="showPasswordIcon"
							suffixIconStyle="color: #909399"
							type="password"
							placeholder="登录密码"
							v-model="password"
							@change="passwordChange"
						></u--input>
					</view>
					<view class="u-flex" style="flex-direction: row;margin-top: 20rpx;">
						<view style="visibility: hidden;">手机验证码登录</view>
						<view style="color: #0079fe;font-size: 14px;" @click="bindPhoneFunc">手机绑定</view>
					</view>
				</view>
				<view v-else class="loginPhone">
					<view class="form-row" style="background:#F7F9FF;border-radius: 48px;width: 532rpx;height: 80rpx;border: 0.01rpx solid #F7F9FF;">
						<u--input
							border="surround"
							shape="circle"
							class="input"
							type="text"
							v-model="phone"
							placeholder="请输入手机号码"
							placeholder-style="font-weight:normal;color:#bbbbbb;"
						></u--input>
					</view>
					<view class="form-row" style="margin-top: 20rpx;background:#F7F9FF;border-radius: 48px;width: 532rpx;height: 80rpx;border: 0.01rpx solid #F7F9FF;">
						<u--input
							border="surround"
							shape="circle"
							class="input"
							type="text"
							v-model="vCode"
							placeholder="请输入验证码"
							placeholder-style="font-weight:normal;color:#bbbbbb;"
						></u--input>
						<view style="color:#377DFF" class="getvcode" :class="{ forhidden: readonly }" @click="getVcode">{{ codeText }}</view>
					</view>
					<view class="u-flex" style="flex-direction: row;margin-top: 20rpx;">
						<view style="visibility: hidden;">手机验证码登录</view>
						<view style="color: #0079fe;font-size: 14px;" @click="bindAccountFunc">账号绑定</view>
					</view>
				</view>
				<view class="">
					<view class="u-flex" style="flex-direction: row;margin-top: 288rpx;margin-left: -538rpx;">
						<view style="width: 230rpx"><u-button @click="show = false" type="info" shape="circle" text="取消"></u-button></view>
						<view style="width: 230rpx;margin-left: 65rpx;"><u-button @click="bindConfirm" type="primary" shape="circle" text="确认"></u-button></view>
					</view>
				</view>
			</u-modal>
		</view>
		<!-- 退出登录 -->
		<view>
			<u-popup bgColor="transparent" :overlay="true" :show="showLogout" mode="bottom">
				<view class="u-flex" style="flex-direction: column;height: 300rpx;margin: 30rpx 40rpx;background:#f5f5f5;border-radius: 20rpx;">
					<view style="width:669rpx;height: 100rpx;border-bottom: 1rpx solid #d6d6d6;text-align: center;line-height: 86rpx;">
						<text style="color:#999999">确定要退出当前账号？</text>
					</view>
					<view style="width:669rpx;height: 100rpx;border-bottom: 1rpx solid #d6d6d6;text-align: center;line-height: 86rpx;">
						<text style="color:#f95e5a">退出登录</text>
					</view>
					<view style="width:669rpx;height: 100rpx;text-align: center;line-height: 86rpx;"><text @click="closeLogout" style="color:#3478f7">取消</text></view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import base from '@/config/baseUrl';
import fTabbar from '@/components/module/f-tabbar/f-tabbar';
import fNavbar from '@/components/module/f-navbar/f-navbar';
import { mapState } from 'vuex';

export default {
	components: {
		fTabbar,
		fNavbar
	},
	data() {
		return {
			PrimaryColor: '#0079fe', //主题色
			showLogout: false,
			readonly: false,
			codeText: '获取验证码',
			phone: '', //号码
			vCode: '', //验证码
			tips: '验证码',
			bindPhone: false,
			show: false,
			title: '绑定账号',
			systemInfo: base.systemInfo,
			PrimaryButtonColor: '#0079fe', //主题色
			list: [
				{
					title: '系统通知',
					url: '../systemNotify/systemNotify',
					icon: 'setting-fill'
				},
				{
					title: '意见反馈',
					url: '../feedback/feedback',
					icon: 'more-circle-fill'
				}
			]
		};
	},
	onLoad() {
		// 隐藏原生的tabbar
		uni.hideTabBar();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		openSysNotify() {
			uni.navigateTo({
				url: '../systemNotify/systemNotify'
			});
		},
		openFeedBack() {
			uni.navigateTo({
				url: '../feedback/feedback'
			});
		},
		onJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		openLoginFunc() {
			uni.navigateTo({
				url: './login'
			});
		},
		openPersonalInfo() {
			uni.navigateTo({
				url: './set'
			});
		},
		clickAccountFunc() {
			this.show = true;
		},
		bindConfirm() {},
		bindPhoneFunc() {
			this.bindPhone = true;
		},
		bindAccountFunc() {
			this.bindPhone = false;
		},
		//验证码按钮文字状态
		getCodeState() {
			const _this = this;
			this.readonly = true;
			this.codeText = '60S后重新获取';
			var s = 60;
			clear = setInterval(() => {
				s--;
				_this.codeText = s + 'S后重新获取';
				if (s <= 0) {
					clearInterval(clear);
					_this.codeText = '获取验证码';
					_this.readonly = false;
				}
			}, 1000);
		},
		//获取验证码
		getVcode() {
			console.log('getVcode');
			if (this.readonly) {
				uni.showToast({
					title: '验证码已发送~',
					icon: 'none'
				});
				return;
			}
			if (this.phone == '') {
				uni.showToast({
					title: '请输入手机号~',
					icon: 'none'
				});
				return;
			}
			const phoneRegular = /^1\d{10}$/;
			if (!phoneRegular.test(this.phone)) {
				uni.showToast({
					title: '手机号格式不正确~',
					icon: 'none'
				});
				return;
			}
			let httpData = {};
			// 获取验证码接口
			// uni.$u.http.post('您的接口', httpData).then(res => {
			this.getCodeState(); //开始倒计时
			// })
		},
		onLoginoutFunc() {
			this.showLogout = true;
		},
		closeLogout() {
			this.showLogout = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.personal {
	background-color: #ffffff;
}
.headBox {
	background: linear-gradient(90deg, #8c9ef2 0%, #5f6ee6 100%);
	border-top: 0.01px solid #f5f5f5;
	height: 250rpx;

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 25px;
		background-color: #ccc;
	}

	.nickName {
		.btn {
			font-size: 22rpx;
			font-weight: normal;
			color: #666;
			background: #fff;
			border-radius: 5rpx;
			height: 45rpx;
			line-height: 45rpx;
			padding: 0 10rpx;
			position: relative;

			.itemButton {
				border-radius: 0;
				text-align: left;
				opacity: 0;
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}

		.name {
			color: #fff;
			font-weight: bold;
			font-size: 32rpx;
		}

		.placardVip {
			background: #2a2e44;
			color: #f4d6a1;
			font-size: 22rpx;
			padding: 4rpx 10rpx;
			text-align: center;
			border-radius: 4rpx;
		}
	}

	.detail {
		color: #fff;
		font-size: 24rpx;
		padding-top: 6rpx;
	}
}

.cell-group {
	.cell-item {
		border-bottom: 2rpx solid #eee;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 20rpx 24rpx;

		.title {
			color: #333;
			font-size: 28rpx;
			padding: 0 10rpx;
			font-weight: bold;
			margin: 0;
		}

		.more {
			font-size: 24rpx;
			color: #999;
		}
	}
}

.submit {
	margin-top: 160rpx;
	color: #fff;
	width: 650rpx;
	border: none;
}

.loginPhone {
	width: 750rpx;
	padding: 0rpx 10rpx;

	.form-row {
		position: relative;

		.input {
			font-size: 34rpx;
			line-height: 102rpx;
			height: 94rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			padding: 0;
			font-weight: bold;
		}

		.getvcode {
			font-size: 26rpx;
			height: 50rpx;
			color: #333;
			line-height: 52rpx;
			// background: #eee;
			min-width: 188rpx;
			text-align: center;
			border-radius: 8rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 17rpx;
			z-index: 11;

			&.forhidden {
				// background: #eee;
				// color: #cccccc;
			}
		}
	}
}
</style>