<template>
	<view class="wrap">
		<image class="bg" :src="require('@/static/qus-bg.jpg')" mode=""></image>
		<view class="me" :style="{paddingTop: navBarTop+'px'}">
			<view class="me-avatar" @click="showform = true,maskClose=true">
				<image :src="info.headimgurl?info.headimgurl:headReplace" mode=""></image>
				<view class="">
					{{info.name?info.name:''}}
				</view>
			</view>
			<view class="me-list">
				<view class="me-list-item" v-for="item in list" @click="toUrl(item)">
					<view class="me-list-item-left">
						<view class="">
							<image :src="item.src" :style="{width:item.width,height:item.height}"></image>
						</view>
						<view>{{item.title}}</view>
					</view>
					<view>
						<view v-if="item.id==='cer'" class="cer">
							<view class="cer-progress">
								<view v-if="done>0 && answerTotal>0">{{done}}/{{answerTotal}}</view>
								<view v-else>0</view>
								<view class="cer-progress-bar">
									<view class="cer-progress-item" :style="{'width':done>0 && answerTotal>0?(done/answerTotal)*100+'%':0}">
									</view>
								</view>
							</view>
							<view class="cer-btn" :class="{'cer-btn-active':(done>0 && answerTotal>0 && done>=answerTotal)?true:false}">
								<text>{{done>0 && answerTotal>0 && done >= answerTotal ? '生成证书' : '未完成打卡'}}</text>
							</view>
						</view>
						<u-icon v-else name="arrow-right" size="40" color="#e0e0e0"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 锦囊 -->
		<view class="tips" v-if="showTips" :class="showTips?'fade-in':'fade-out'">
			<view class="tips-wrap"  @click="showTips=false">
				<view class="tips-wrap-close" @click="showTips=false">
					x
				</view>
				<view class="tips-wrap-img">
					<u-image :show-loading="false" :fade="false" mode="widthFix" :width="711"
						:src="require('../../static/toast.png')"></u-image>
					<view class="tips-wrap-tip">

						<view class="">
							<rich-text v-if='showTips' :nodes="tips?tips:' '"></rich-text>
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- 弹出头像 昵称 -->
		<u-popup v-model="showform" mode="bottom" :mask-close-able="maskClose">
			<view class="login-form">
				<view>
					<span>头像：</span>
					<view style="border:none">
						<button open-type="chooseAvatar" @chooseavatar='onChooseAvatar' style="padding: 0;margin: 0;">

							<image :src="imgurl" mode=""></image>
						</button>
					</view>
				</view>
				<view>
					<span>姓名：</span>
					<view>
						<input type="nickname" @blur="blurname" :placeholderStyle="'color:#999;font-size:30rpx'"
							v-model="form.name" placeholder="请输入姓名" :border="false" shape="circle" clearable></input>
					</view>
				</view>
			</view>
			<view class="login-btn">
				<view class="login-btn-btn" @click="submit">提 交</view>
			</view>
		</u-popup>
		<tabbar :currentPage="2"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue'
	import {
		ROOTPATH as baseUrl
	} from "@/common/config.js"
	import {
		isNull,
		toast,
		shareInfo
	} from "@/common/util.js"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				navBarTop: 0,
				showTips: false,
				tips: '',
				info: {},
				headReplace: '',
				showform: false,
				maskClose: false,
				imgurl: '',
				form: {
					name: ''
				},
				done: 0,
				answerTotal: 0,
				list: [{
					id: 'cer',
					title: '我的红色证书',
					url: '/packages/cer/cer',
					src: require('@/static/me-icon1.png'),
					width: '76rpx',
					height: '44rpx',
				}, {
					id: 'record',
					title: '我的红色足迹',
					url: '/packages/record/record',
					src: require('@/static/me-icon2.png'),
					width: '49rpx',
					height: '49rpx',
				}, {
					id: 'tips',
					title: '打卡规则',
					url: '',
					src: require('@/static/me-icon3.png'),
					width: '42rpx',
					height: '43rpx',
				}]
			}
		},
		onShareAppMessage() {
			return shareInfo
		},
		onShareTimeline() {
			return shareInfo
		},
		onLoad() {
			const MenuButton = uni.getMenuButtonBoundingClientRect()
			this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
			this.getConfig()
		},
		onShow() {
			this.getInitUser()
			this.getDone()
		},
		methods: {
			onChooseAvatar(e) {
				console.log(e)
				console.log(e);
				let a = uni.uploadFile({
					url: baseUrl + "/api/mobile/upload-file",
					filePath: e.detail.avatarUrl,
					name: 'file',
					formData: {
						token: this.vuex_token
					},
					success: (res) => {
						uni.showToast({
							title: '上传成功',
							duration: 1000
						})
						console.log("res", res)
						this.imgurl = JSON.parse(res.data).url
						this.form.headimgurl = this.imgurl

					}
				})
			},
			// 获取昵称
			blurname(e) {
				console.log(e)
				if (e) {
					this.form.name = e.detail.value
				}

			},
			async getInitUser() {
				const res = await this.$u.api.user()
				this.$u.vuex('vuex_user', res)
				console.log(this.vuex_user)
				this.form = res
				this.imgurl = res.headimgurl ? res.headimgurl : ''
				this.info = this.$u.deepClone(res);
				if (isNull(res.name)) {
					this.showform = true
				}
			},
			async getDone() {
				const res = await this.$u.api.getPoints()
				// this.done = res.point_answer_total
				this.done = res.point_answer_total > this.answerTotal ? this.answerTotal : res.point_answer_total
			},
			async getConfig() {
				await this.$u.api.getAppId().then(res=>{
					res.config.map(item => {
						if (item.key === 'tips') {
							this.tips = item.value
						}
						if (item.key === 'answer_total') {
							this.answerTotal = parseInt(item.value)
						}
					
					})
				})
				
			},
			submit() {
				if (isNull(this.form.name)) {
					toast("请填写所有信息")
					return
				}
				this.$u.api.saveUser(this.form).then(res => {
					toast('更新成功')
					this.showform = false
					this.getInitUser()
				})
			},
			toUrl(item) {
				if (item.id == 'cer') {
					if (this.done > this.answerTotal - 1) {
						uni.navigateTo({
							url: item.url
						})
					} else {
						toast('请先完成打卡')
					}
				} else if (item.id == 'tips') {
					this.showTips = true
				} else {
					uni.navigateTo({
						url: item.url
					})
				}

			},
		}
	}
</script>

<style lang="scss">
	.wrap {
		width: 100vw;
		height: 100vh;

		// overflow: scroll;
		.bg {
			height: 100vh;
			width: 100vw;
			position: absolute;
			top: 0;
			left: 0;
		}

		.me {
			position: relative;
			height: 100vh;
			overflow: scroll;
			top: 0;
			padding-bottom: 140rpx;

			&-avatar {
				width: 100%;
				text-align: center;
				color: #960909;
				font-size: 36rpx;

				// width:173rpx;
				// height:173rpx;
				// border-radius: 173rpx;
				// margin:0 auto;
				image {
					border: 10rpx solid #dfc9b1;
					width: 173rpx;
					height: 173rpx;
					border-radius: 173rpx;
					margin-bottom: 20rpx;
				}
			}

			&-list {
				border-radius: 15rpx;
				background-color: #fff;
				box-shadow: -2px -3rpx 12px rgba(0, 0, 0, 0.1);
				margin: 70rpx 35rpx;
				padding: 30rpx;
				min-height: 750rpx;

				&-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 35rpx 10rpx;
					font-size: 28rpx;
					color: #666666;
					border-bottom: 1px solid #e0e0e0;

					& image {

						vertical-align: middle;
						margin: 0 auto
					}

					&-left {
						display: flex;
						align-items: center;

						>view {
							&:first-child {
								width: 76rpx;
								text-align: center;
								margin-right: 20rpx
							}


						}

						u-icon {
							margin-right: 20rpx;

						}
					}

					& .cer {
						display: flex;
						font-size: 24rpx;
						align-items: center;

						&-progress {
							color: #960909;
							text-align: center;
							font-weight: bolder;

							&-bar {
								width: 110rpx;
								background-color: #f7f1e2;
								height: 15rpx;
								overflow: hidden;
								border-radius: 15rpx;
								border: 2px solid #8f856c;
							}

							&-item {
								background-color: #b93736;
								height: 100%;
								width: 0;
							}
						}

						&-btn {
							background-color: #e0e0e0;
							padding: 10rpx 20rpx;
							color: #666666;
							border-radius: 40rpx;
							margin-left: 20rpx;

							&-active {
								background-color: #960909;
								color: #fff
							}
						}
					}
				}
			}
		}

		.login {
			&-form {
				padding: 20rpx 60rpx;
				margin-top: 20rpx;
				padding-bottom: 120rpx;

				>view {
					margin-bottom: 30rpx;
					background-color: #fff;
					padding: 20rpx 40rpx;
					border-radius: 20rpx;
					display: flex;
					align-items: center;

					span {
						width: 120rpx;
						text-align: right;
					}

					button {
						width: 100rpx;
						height: 100rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					>view {
						border: 1px solid #999;
						border-radius: 10rpx;
						display: flex;
						width: calc(100% - 120rpx);
						padding: 10rpx 20rpx;

						input {
							width: 100%;
						}
					}

				}
			}

			&-btn {
				padding: 30rpx 60rpx;
				padding-top: 0;

				&-btn {
					box-shadow: 0.5px 3px 9px 0px rgba(235, 107, 85, 0.3);
					background: #960909;
					border-radius: 44rpx;
					text-align: center;
					height: 88rpx;
					color: #fff;
					line-height: 88rpx;
					font-size: 34rpx;
				}

			}
		}

		.tips {
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.7);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;

			&-wrap {
				&-close {
					color: #fff;
					width: 80rpx;
					height: 80rpx;
					border-radius: 80rpx;
					line-height: 70rpx;
					text-align: center;
					border: 1px solid #fff;
					position: absolute;
					top: 135rpx;
					left: 20rpx;
					font-size: 50rpx;
					z-index: 10;
				}

				&-img {
					position: relative;
					top: 0;
					width: 100%;

					u-image {
						&>view {
							margin: 0 auto;
						}
					}
				}

				&-tip {
					color: #333;
					font-size: 33rpx;
					margin: 0 auto;
					line-height: 2;
					height: 650rpx;
					overflow: scroll;
					position: absolute;
					top: 350rpx;
					left: 50%;
					transform: translate(-50%, 0%);
					width: 80%;

					view {
						p {
							text-indent: 2em;
						}
					}
				}
			}
		}
	}

	.fade-in {
		animation: fade-in .5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
	}

	@keyframes fade-in {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.fade-out {
		animation: fade-out .4s ease-out both;
	}

	@keyframes fade-out {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}
</style>