<!-- 个人信息 -->
<template>
	<!-- #ifdef APP -->
	<view class="setting" :style="{ background: `linear-gradient(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.1)), url(${myFileUrl+background}) no-repeat 0% 20%/ cover`,paddingTop: CustomBar+'rpx' }">
		<view class="app-top" :style="{ height: CustomBar+'rpx',
		background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }"></view>
		<!-- #endif -->
	<!-- #ifndef APP -->
	<view class="setting" :style="{ background: `linear-gradient(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.1)), url(${myFileUrl+background}) no-repeat 0% 20%/ cover` }">
	<!-- #endif -->
		<view class="st-top">
			<!-- #ifdef MP -->
			<view :style="{height: `${StatusBar}px`}"></view>
			<view class="app-top" :style="{height: `${StatusBar}px`,background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})`}"></view>
			<view class="mobile-logo" :style="{height: `${CustomBarHeight}px`,backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
			<!-- #endif -->
			<!-- #ifndef MP -->
			<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
			<!-- #endif -->
				<u-icon name="arrow-left" size="40" class="back" @click="back"
				:color="topLevel===0? '#60547d' : `rgba(9, 9, 9,${topLevel})`"></u-icon>
				<image :src="homeFileUrl+logo"></image>
				<view style="width: 75rpx;"></view>
			</view>
			<view class="detail-content">
				<form @submit="submit">
					<view class="dc-form">
						<u-divider bgColor="#ffffff00" fontSize="35" color="#424242" borderColor="#f8f9f9">
							个人资料
						</u-divider>
						
						<view class="blocks">
							<view class="block_img">
								<u-avatar :src="getAvatar" size="240"/> 
								<!-- show-sex
								:sex-icon="form.gender?'woman':'man'" show-level -->
							</view>
							
							<view class="block_show">
								昵称：{{ form.realname || '战士不留姓名~' }}
							</view>
							
							<view class="block_show">
								绑定电话：{{ form.username }}
							</view>
							
							<view class="block_show">
								生产日期：{{ getEnrollDate }}
							</view>
							
							<!-- <view class="block_input">
								<view><text>*</text>昵称：</view>
								<input type="text" name="realname" v-model="form.realname" placeholder="请输入您的昵称"/>
								<view class="tip" v-show="tip.realname">请输入您的昵称</view>
							</view> -->
							
							<!-- <view class="block_input">
								<view><text>*</text>邮箱：</view>
								<input type="tel" name="mail" v-model="form.mail" placeholder="请输入您的邮箱"/>
								<view class="tip" v-show="tip.mail">请输入正确的邮箱</view>
							</view> -->
							
							<!-- <view class="block_input">
								<view><text>*</text>性别：</view>
								<picker @change="bindGenderChange" :value="form.genders" :range="genderList">
									<view>
										<input @change="bindGenderChange" disabled type="text" name="type" :value="genderList[form.gender]" placeholder="请选择性别"/>
										<u-icon class="type-icon" name="arrow-down" color="#CCCCCC" size="40"></u-icon>
									</view>
								</picker>
							</view> -->
						</view>
						
						<view class="dcf-btn">
							<!-- <u-button ripple :hairLine="false" class="messageSubmit" form-type="submit">修改</u-button> -->
							<u-button ripple :hairLine="false" class="messageLoginOut" @click="logout">退出登录</u-button>
						</view>
					</view>
				</form>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<Loading :show="loading" />
	</view>
</template>

<script>
import configService from '@/common/config.service.js';
export default {
	// #ifdef MP
	options: {
		styleIsolation: 'shared'
	},
	// #endif
	data() {
		return {
			// #ifdef MP
			// 微信小程序自定义导航栏参数
			StatusBar: this.StatusBar || 0,
			CustomBarHeight: this.Custom.height+(this.Custom.top-this.StatusBar)*2 || 0,
			// #endif
			loading: true, // 加载
			// 基础路径
			ip: configService.ip,
			homeFileUrl: configService.fileUrl + 'pixel/home/',
			myFileUrl: configService.fileUrl + 'pixel/my/',
			// 页面背景
			background: 'silver-background.png',
			// logo图标
			logo: 'logo-new.png',
			// 顶部距离等级
			topLevel: 0,
			// 默认头像
			defaultAvatar: 'login-avatar.png',
			form:{},
			tip: {
				realname: false,
				mail: false,
				message: false,
			},
			messageType: 0, //类型
			genderList: [
				"未知",
				"男",
				"女",
			],
			messageMaxlength: 300// 留言最长字数
		}
	},
	// #ifndef H5
	onPageScroll(e) {
		const level = e.scrollTop / 60;
		if (level <= 1) this.topLevel = level;
		else this.topLevel = 1;
	},
	// #endif

	// #ifdef H5
	mounted() {
		let that = this;
		window.onscroll = function() {
			//为了保证兼容性，这里取三个值，哪个有值取哪一个
			//scrollTop就是触发滚轮事件时滚轮的高度
			var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			const level = scrollTop / 60;
			if (level <= 1) that.topLevel = level;
			else that.topLevel = 1;
		}
	},

	onHide() {
		window.onscroll = null;
	},
	// #endif
	
	computed:{
		// 获取登录头像
		getAvatar(){
			return this.form.picture ? encodeURI(this.ip+this.form.picture) : 
			(this.myFileUrl+this.defaultAvatar);
		},
		// 注册日期
		getEnrollDate(){
			let date = new Date(this.form.createtime);
			return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
		}
	},
	methods: {
		// 返回
		back() {
			uni.navigateBack();
		},
		// 提交申请
		async submit(e){
			// try{
			// 	this.loading = true;
			// 	const { name, phone, type, message } = this.form;
			// 	this.tip = {
			// 		name: name==='',
			// 		phone: (phone==='') || (!(/^1[345789]\d{9}$/.test(phone))),
			// 		message:message===''
			// 	}
				
			// 	if(name===''){
			// 		this.$refs.uToast.show({type:'warning',title: "请输入姓名!"});
			// 		return;
			// 	}else if(!(/^1[345789]\d{9}$/.test(phone))){
			// 		this.$refs.uToast.show({type:'warning',title: "联系方式不正确!"});
			// 		return;
			// 	}else if(message===''){
			// 		this.$refs.uToast.show({type:'warning',title: "请输入留言内容!"});
			// 		return;
			// 	}
				
			// 	let res = await this.$api.addMessage(e.detail.value);
			// 	if(res.success){
			// 		this.$refs.uToast.show({type:'success',title: "提交成功!"});
			// 	}else{
			// 		this.$refs.uToast.show({type:'error',title: "提交失败!"});
			// 	}
			// }catch(e){
			// 	this.$refs.uToast.show({type:'error',title: "处理失败!"});
			// }finally{
			// 	this.loading = false;
			// }
		},
		// 选择性别
		bindGenderChange(e) {
			this.form.gender = e.detail.value;
			this.$forceUpdate();
		},
		// 注销
		logout(){
			let that = this;
			uni.showModal({
				title: '注销',
				content: '是否确认退出登录？',
				confirmColor: '#94d500',
				success: function (res) {
					if (res.confirm) {
						that.$u.vuex('vuex_token', '');
						that.$u.vuex('user_message', {});
						that.form = {};
						that.$api.logOut();
						// that.$emit('userLogOut');
						uni.navigateBack({complete() {
							setTimeout(()=>{
								uni.showToast({
									icon: 'none',title: '退出登录成功!'
								})
							},300);
						}})
					}
				}
			})
		}
	},
	onLoad(options) {
		try{
			this.form = JSON.parse(this.$store.state.user_message);
		}catch(e){
			this.form = {};
		}finally{
			this.loading = false;
		}
	},
}
</script>

<style scoped lang="scss">
.setting {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-size: cover;
	opacity: 0.9;

	// #ifdef APP || MP
	.app-top{
		width: 100%;
		position: fixed;
		z-index: 81;
		top: 0;
	}
	// #endif
	.st-top {
		// #ifdef APP
		.app-top {
			width: 100%;
			position: fixed;
			z-index: 81;
			top: 0;
		}

		// #endif
		.mobile-logo {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.back{
				margin-left: 35rpx;
				margin-top: 5rpx
			}
			position: fixed;
			z-index: 81;
			padding: 15rpx 0;

			image {
				width: 200rpx;
				height: 45rpx;
			}
		}
	}
	.detail-content{
		margin: 80rpx 30rpx 32rpx;
		min-height: 90vh;
		background: linear-gradient(rgba(160, 160, 160, 0.4), rgba(0, 0, 0, 0.1));
		border-radius: 40rpx;
		padding: 40rpx 25rpx 0rpx;
		color: #f9f9f9;
		.dc-form{
			min-height: 85vh;
			display: flex;
			flex-direction: column;
			.blocks{
				display: flex;
				flex-direction: column;
				.block_show{
					font-size: 40rpx;
					font-weight: bold;
					margin: 18rpx 20rpx;
					background-image: linear-gradient(to right, rgba(142, 84, 233,0.8) 0%, rgba(71, 118, 230,0.8) 100%);
					background-clip: text;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					// text-shadow: 0 0 25rpx #eee;
				}
				.block_img{
					display: flex;
					justify-content: center;
					margin: 30rpx 0 60rpx;
					.u-avatar{
						border: 2rpx solid #fff;
						box-shadow: 0 0 20rpx #eee;
					}
				}
				.block_title{
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 36rpx;
					color: #000000;
					line-height: 40rpx;
				}
				.block_input{
					margin-bottom: 32rpx;
					.tip{
						color: #FE020E;
						margin-top: 4rpx;
						font-size: small;
						margin-bottom: 0rpx !important;
					}
					view{
						font-family: PingFang SC, PingFang SC;
						font-size: 32rpx;
						color: #000000;
						line-height: 40rpx;
						margin-bottom: 16rpx;
						text{
							vertical-align: middle;
							color: #FE020E;
							font-weight: bold;
							margin-right: 8rpx;
						}
					}
					input{
						height: 92rpx;
						background: #F8F9FB;
						border-radius: 4rpx;
						color: rgba(0,0,0,0.8);
						padding:0 32rpx;
						font-size: 32rpx;
						border-radius: 15rpx;
					}
					.message-textarea{
						width: 100%;
						position: relative;
						textarea{
							padding: 32rpx;
							width: 100%;
							height: 400rpx;
							background: #F8F9FB;
							border-radius: 4rpx;
							color: rgba(0,0,0,0.8);
							font-size: 32rpx;
							border-radius: 15rpx;
						}
						.mt-tip{
							position: absolute;
							font-size: 28rpx;
							right: 32rpx;
							bottom: 10rpx;
							z-index: 2;
							background-color: #f8f9fb;
							padding: 5rpx;
							border-radius: 8rpx;
						}
					}
				}
			}
			.dcf-btn{
				flex: 1;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: flex-end;
			}
		}
	}
}
.messageSubmit{
	width: 100%;
	background-size: 200% auto;
	transition: 0.5s;
	animation-duration: 1s;
	animation-fill-mode: both;
	border: none;
	background-image: -webkit-linear-gradient( to right, #36D1DC 0%, #5B86E5  51%, #36D1DC  100%);
	background-image: linear-gradient(to right, #36D1DC 0%, #5B86E5  51%, #36D1DC  100%);
	box-shadow: 0 0 8rpx #eee;
	height: 100rpx;
	font-weight: bold;
	color: #fff;
	border-radius: 56rpx;
	margin-top: 40rpx;
	margin-bottom: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 35rpx;
	&::after{
		display: none;
	}
	// &:active {
	//     background-position: right center;
	//     color: #f8f9fb;
	//     text-decoration: none;
	// }
}
.messageLoginOut{
	margin-bottom: 60rpx;
	border-radius: 56rpx;
	box-shadow: 0 0 10rpx #eee;
	height: 100rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 35rpx;
	width: 100%;
	border: none;
	color: #e53636;
	background-color: #F8F9FB;
	// #ifdef MP
	/deep/.u-btn--default{
		background-color: #ffffff00;
		border: none;
		color: #e53636;
		width: 100%;
		height: 100rpx;
		border-radius: 56rpx;
	}
	// #endif
}
.type-icon{
	z-index:90;
	position: absolute;
	right: 50rpx;
	margin-top: -60rpx;
}
</style>