<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="color:black;" class="detail">绑定账号</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 style="height: 50rpx;"></view>
		<view class="cell-group">
			<view class="cell-item u-flex" @click="onJump(item.url)"
				:style="[{animation: 'show  ' + ((index+1)*0.2+.2) + 's'}]" v-for="(item,index) in list" :key="index">
				<u-icon :name="item.icon" size="14" color="#333"></u-icon>
				<view class="title u-flex-m">{{item.title}}</view>
				<u-icon name="arrow-right" size="14" color="#333"></u-icon>
			</view>
		</view>
		<view class="u-flex" style="justify-content: center;">
			<button class="submit" size="default" @click="onLoginoutFunc"
				:style="{background:PrimaryButtonColor}">退出账号</button>
		</view>
		<!-- 绑定账号 -->
		<view>
			<u-modal confirmText="绑定账号" @confirm="bindConfirm" :show="show" :title="title">
				<view v-if="!bindPhone" class="loginPhone">
					<view class="form-row">
						<u--input class="input" prefixIcon="account-fill" type="text" placeholder="登录账号"
							border="surround" v-model="account">
						</u--input>
					</view>
					<view class="form-row">
						<u--input class="input" prefixIcon="lock-fill" :suffixIcon="showPasswordIcon"
							suffixIconStyle="color: #909399" type="password" placeholder="登录密码" border="surround"
							v-model="password" @change="passwordChange">
						</u--input>
					</view>
					<view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;">
						<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">
						<u--input class="input" type="text" v-model="phone" placeholder="请输入手机号码"
							placeholder-style="font-weight:normal;color:#bbbbbb;"></u--input>
					</view>
					<view class="form-row">
						<u--input class="input" type="text" v-model="vCode" placeholder="请输入验证码"
							placeholder-style="font-weight:normal;color:#bbbbbb;"></u--input>
						<view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
					</view>
					<view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;">
						<view style="visibility: hidden;">手机验证码登录</view>
						<view style="color: #0079fe;font-size: 14px;" @click="bindAccountFunc">账号绑定</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>
		<f-tabbar></f-tabbar>
	</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: '',
					icon: 'setting-fill'
				}, {
					title: '意见反馈',
					url: '',
					icon: 'more-circle-fill'
				}, {
					title: '首页设置',
					url: '',
					icon: 'bag-fill'
				}],
			}
		},
		onLoad() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			openLoginFunc() {
				uni.navigateTo({
					url: './login'
				})
			},
			openPersonalInfo() {
				uni.navigateTo({
					url: './set'
				})
			},
			clickAccountFunc() {
				this.show = true
			},
			bindConfirm() {
				this.show = false
			},
			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>
	.headBox {
		background-color: #fff;
		border-top: 0.2px solid gray;
		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: 10rpx;
			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>