<template>
	<view class="tabbar-page page-box" style="background-color: white;">
		<view v-if="templateInfo">
			<!-- #ifdef MP -->
			<template v-if="control.titleStyle">
				<template v-if="control.titleStyle.title_type == 0">
					<view :style="{
                        paddingTop: statusBarHeight + 'px',
                        height: headHeight + 'px',
                        backgroundColor: control.titleStyle.title_background_color,
                        backgroundImage: control.titleStyle.backgroundImage,
                        fontSize: control.titleStyle.font_size / 2 + 'px',
                        color: control.titleStyle.font_color,
                        textAlign: 'center',
                        lineHeight: headHeight + 'px',
                        position: 'fixed',
                        width: '100%',
                        left: 0,
                        top: 0,
                        zIndex: 10
                    }">
						{{ control.titleStyle.show_title ? control.titleStyle.name : '' }}
					</view>
					<!-- 占位高度 -->
					<view :style="{ height: statusBarHeight + headHeight + 'px' }"></view>
				</template>
			</template>
			<!-- #endif -->
			<!-- #ifndef MP-->
			<!-- <view class="status" v-if="control.titleStyle && control.titleStyle.title_type == 0"
                :style="{ backgroundColor: control.titleStyle.title_background_color }"></view>
            <view class="navTitle" v-if="control.titleStyle && control.titleStyle.title_type == 0"
                :style="{ backgroundColor: control.titleStyle.title_background_color, fontSize: control.titleStyle.font_size / 2 + 'px', color: control.titleStyle.font_color }">
                {{ control.titleStyle.name }}
            </view> -->
			<!-- #endif -->
			<!-- 用户头部 -->
			<view :class="ifMP ? '' : 'content'"></view>

			<view style="border-radius: 0 0 40rpx 40rpx;overflow: hidden;"
				:style="{ background: control.user.userBgType == 2 ? `url(${control.user.userBgImg})` : control.user.userBgColor, }">
				<view class="user-box" style="background: transparent;">
					<view class="user-info" style="justify-content: space-between;width: 100%;"
						v-if="data.user_info && data.user_info.id">
						<view class="user-info" @click="triggerUsertoeditpop">
							<view class="user-logo">
								<u-image width="100rpx" height="100rpx" :src="data.user_info.avatar_pic"></u-image>
							</view>
							<view style="text-align: left;">
								<view style="display: flex;"
									:style="{ color: control.user.color, fontSize: control.user.font_size / 2 + 'px' }">
									{{
							            data.user_info.nickname }}
									<u--text type="warning" size="12" margin="0px 0px 0px 10rpx" suffixIcon="edit-pen"
										iconStyle="color: #ff9900"></u--text>
								</view>
								<!-- <u--text type="warning" size="12" text="编辑用户信息" suffixIcon="edit-pen"
							        iconStyle="color: #ff9900"></u--text> -->
							</view>
						</view>
						<!-- #ifndef MP -->
						<view style="font-size: 26rpx;height: 140rpx;">
							<view style="display: flex;align-items: center;flex-direction: column;" @click="logout">
								<u-icon name="info-circle" size="32rpx" color="#FFF"></u-icon>
								<view>
									注销
								</view>
							</view>
						</view>
						<!-- #endif -->
					</view>
					<view class="user-info" v-else>
						<view class="user-logo">
							<u-icon size="40" name="account-fill"></u-icon>
						</view>
						<view @click="toUrl('/subPackages/login/login/index')">
							<view :style="{ color: control.user.color, fontSize: control.user.font_size / 2 + 'px' }">
								登录/注册
							</view>
						</view>
					</view>
				</view>
				<view style="border-radius: 20rpx 20rpx 20rpx 20rpx;overflow: hidden;" class="wallet-box"
					v-if="templateInfo.userInfo && templateInfo.userInfo.walletShow && data.user_info">

					<view class="wallet-title">
						<u-image v-show="templateInfo.userInfo.walletImage" style="width: 16px;height: 16px;"
							class="img" width="16px" height="16px" :src="templateInfo.userInfo.walletImage"></u-image>
						{{ templateInfo.userInfo.walletName }}
					</view>
					<view class="wallet-list" v-if="templateInfo.userInfo.walletList"
						:style="{ 'grid-template-columns': `repeat(${(templateInfo.userInfo.walletList.length)} , 1fr)` }">
						<view v-for="(item, index) in templateInfo.userInfo.walletList" :key="index" class="item"
							@click="toUrl(item.link)">
							<view class="price" style="text-align: center;">
								{{ data.user_info[item.key] || 0 }}
							</view>
							<view class="text">
								<view v-show="item.pic_url" style="width: 14px;height: 14px;margin-right: 8rpx;">
									<u-image v-show="item.pic_url" class="img" width="14px" height="14px"
										:src="item.pic_url"></u-image>
								</view>
								{{ item.name }}
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view v-if="!templateInfo && isTemplate">
			<view :style="{
                paddingTop: statusBarHeight + 'px',
                height: headHeight + 'px',
                backgroundColor: '#f0250e',
                fontSize: '16px',
                color: '#fff',
                textAlign: 'center',
                lineHeight: headHeight + 'px',
                position: 'fixed',
                width: '100%',
                left: 0,
                top: 0,
                zIndex: 10
            }">
				个人中心
			</view>
			<!-- 占位高度 -->
			<view :style="{ height: statusBarHeight + headHeight + 'px' }"></view>

			<!-- 用户头部 -->
			<view class="user-box">
				<view class="user-info" v-if="data.user_info && data.user_info.id" @click="userToEditPop = true">
					<view class="user-logo">
						<u-image width="100rpx" height="100rpx" :src="data.user_info.avatar_pic"></u-image>
					</view>
					<view>
						<view>{{ data.user_info.nickname }}</view>
					</view>
				</view>
				<view class="user-info" v-else>
					<view class="user-logo">
						<u-icon size="40" name="account-fill"></u-icon>
					</view>
					<view @click="toUrl('/subPackages/login/login/index')">
						<view>登录/注册</view>
					</view>
				</view>
			</view>
		</view>

		<theTabBar></theTabBar>
	</view>
</template>


<script>
	import theTabBar from "@/components/the/the-tabbar";
	export default {
		mixins: [],
		components: {
			theTabBar
		},
		data() {
			return {
				data: {
					user_info: null,
				},
				templateInfo: null,
				control: {},
				statusBarHeight: uni.getStorageSync('statusBarHeight'),
				headHeight: uni.getStorageSync('headHeight'),
				user_infoTemporary: {
					avatarUrl: "",
					nickname: "",
				},
				fileList: [],
				userToEditPop: false,
				userToEditPopA: false,

				ifMP: false,
				isTemplate: false,
				order_count: null,
				pictureUpload: false
			};
		},
		onLoad(params) {
			uni.hideTabBar({
			    animation: true,
			    success: function (res) {
			        console.log(res); // { "success": true}
			    },
			    fail: function (err) {
			        console.log(err);
			    }
			});
			uni.hideTabBar();
			// #ifdef MP
			this.ifMP = true;
			// #endif
		},
		onShow() {
			this.getData();
			this.getTemplate();
			this.getOrderCount()
		},
		computed: {
			storeDetail() {
				return this.$store.state.$GstoreDetail || {}
			},
			shareData() {
				return {
					path: "/pages/my/my",
					title: "我的",
					desc: "用户中心"
				}
			}
		},
		onPullDownRefresh() {
			this.getData();
			this.getTemplate();
			this.getOrderCount()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 200);
		},
		methods: {
			async getTemplate() {
				uni.showLoading({
					title: "请稍等",
					mask: true,
				});
				try {
					const res = await this.$api.diy.showTemplate({
						type: 3
					});
					uni.hideLoading();
					if (res.code) return uni.$u.toast(res.message);
					this.templateInfo = res.data.data[0];

					if (this.templateInfo?.userInfo?.walletList) {
						this.templateInfo.userInfo.walletList = this.templateInfo.userInfo.walletList.filter(item =>
							item.show)
					}

					if (this.templateInfo?.aliMembershipCardInfo) {
						this.templateInfo.aliMembershipCardInfo = this.templateInfo.aliMembershipCardInfo || {}
					}

					this.control = res.data.data[1];

					if (this.control.showTools === undefined) {
						this.control.showTools = true
					}
				} catch (e) {
					uni.hideLoading();
					// throw new Error(e);
				}
				this.isTemplate = true
			},
			async getData() {
				try {
					const res = await this.$api.user.userInfo();

					if (!res.data.user_info) {
						return
					}

					this.data.user_info = res.data.user_info;

					if (!this.user_infoTemporary.avatarUrl) {
						this.user_infoTemporary.avatarUrl = res.data.user_info.avatar_pic
						this.user_infoTemporary.nickname = res.data.user_info.nickname
					}

					// 第一次完善信息
					if (res.data.user_info.is_update_user === 0 && this.storeDetail.display_setting && this.storeDetail
						.display_setting.wx_user_info == 1) {
						this.userToEditPopA = true
						this.user_infoTemporary.avatarUrl = ""
						this.user_infoTemporary.nickname = ""
					}
				} catch (e) {
					// throw new Error(e);
				}
			},
			async getOrderCount() {
				try {
					const res = await this.$api.common.orderCount();
					if (res.code == 0) {
						this.order_count = res.data
					}
				} catch (e) {
					console.log(e, 'eeeee')
					// throw new Error(e);
				}
			},
			// 选择头像弹出
			triggerUsertoeditpop() {
				this.user_infoTemporary.avatarUrl = this.data.user_info.avatar_pic
				this.user_infoTemporary.nickname = this.data.user_info.nickname
				this.userToEditPop = true
			},
			// 微信选择头像
			async onChooseAvatar(e) {
				this.user_infoTemporary.avatarUrl = await this.uploadFilePromise(e.detail.avatarUrl)
			},
			// 新增图片
			async afterRead(event) {
				this.user_infoTemporary.avatarUrl = await this.uploadFilePromise(event.file.url)
			},

			async uploadFilePromise(filePath) {
				this.pictureUpload = true
				const result = await this.$api.common.upload({
					filePath: filePath,
					name: "image",
				})

				setTimeout(() => {
					this.pictureUpload = false

				}, 1000);
				return result.data.url
			},

			getNickname(e) {
				this.user_infoTemporary.nickname = e
			},

			// 保存用户数据
			async userToEdit() {
				if (this.user_infoTemporary.nickname.trim() == "") {
					this.$u.toast("请输入昵称")

					return
				}

				const res = this.$api.user.UpdateUser({
					avatar_pic: this.user_infoTemporary.avatarUrl,
					nickname: this.user_infoTemporary.nickname,
				})

				if (!res.code) {
					this.userToEditPop = false
					this.userToEditPopA = false
					this.data.user_info.avatar_pic = this.user_infoTemporary.avatarUrl
					this.data.user_info.nickname = this.user_infoTemporary.nickname
					uni.$u.toast('保存成功');
				}
			},
			logout() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否确认注销？',
					success(res) {
						if (res.confirm) {
							uni.removeStorageSync("token");
							uni.removeStorageSync("user_info");
							that.getData();
						}
					}
				})
			}
		},
	}
</script>


<style lang="scss" scoped>
	.taimi-box {
		background: #1F222C;
		margin: 10rpx;
		padding: 20rpx;
		border-radius: 16rpx;
		color: #8E827A;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.taimi-icon {
			height: 70rpx;
			width: 70rpx;
			background: #595B65;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.taimi-but {
			background: #E7BD9C;
			padding: 10rpx 20rpx;
			color: #1F222C;
			font-size: 24rpx;
			border-radius: 30rpx;
		}
	}

	// #ifndef H5
	.content {
		padding-top: calc(44px + var(--status-bar-height));
	}

	// #endif

	.status {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 10;
		height: var(--status-bar-height);
	}

	.navTitle {
		height: 44px;
		line-height: 44px;
		margin-top: var(--status-bar-height);
		text-align: center;
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 10;
	}

	* {
		box-sizing: border-box;
	}

	.tabbar-page {
		background: #f2f2f2;
	}

	.menu-item-box {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 24rpx;
		gap: 24rpx;

		flex-wrap: wrap;
		align-items: center;
		margin-top: 26rpx;

		.menu-item {
			// width: 20%;
			font-size: 24rpx;
			// margin-bottom: 22rpx;

			.menu-item-image {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 14rpx;
				width: 100%;
			}

			view {
				text-align: center;
			}
		}
	}

	.user-box {
		height: 200rpx;
		background: #f0250e;
		text-align: center;
		display: flex;
		// align-items: center;
		padding: 10rpx 20rpx;
		background-position: top left;
		background-size: cover;
		box-shadow: 0 0.3125rem 1.25rem 20px rgba(166, 199, 251, 0.12);

		.user-info {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 40rpx;

			.user-logo {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
				overflow: hidden;
			}
		}
	}

	.order-box {
		margin: 30rpx 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		border-radius: 20rpx;
		background: #fff;
		box-shadow: 0 0.3125rem 1.25rem 0px rgba(188, 188, 188, 0.16);

		.order-title {
			// font-size: 28rpx;
			// font-weight: bold;
			// border-bottom: 1px solid #eee;
			// padding-bottom: 20rpx;
			// display: none;

			font-size: 28rpx;
			font-weight: bold;
			// border-bottom: 1px solid #eee;
			box-shadow: 0 0.3125rem 1.25rem 0px rgba(166, 199, 251, 0.12);
			padding-bottom: 20rpx;

			margin: -30rpx -20rpx;
			padding: 30rpx 20rpx;
			margin-bottom: 26rpx;

			display: flex;
			justify-content: space-between;

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

		.order-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-gap: 24rpx;
			gap: 24rpx;

			.item {
				display: inline-flex;
				align-items: center;
				flex-direction: column;
				position: relative;

				.box {
					position: absolute;
					right: 0;
					top: 0;
				}
			}

			.text {
				display: inline-flex;
				margin-top: 10rpx;
				font-size: 28rpx;
			}
		}
	}

	.menu-box {
		padding: 20rpx;
		border-radius: 10rpx;
		background: #fff;
		margin: 30rpx 20rpx;
		box-shadow: 0 0.3125rem 1.25rem 0px rgba(188, 188, 188, 0.16);
		border-radius: 20rpx;
		overflow: hidden;

		.menu-title {
			font-size: 28rpx;
			font-weight: bold;
			// border-bottom: 1px solid #eee;
			box-shadow: 0 0.3125rem 1.25rem 0px rgba(166, 199, 251, 0.12);
			padding-bottom: 20rpx;

			margin: -30rpx -20rpx;
			padding: 30rpx 20rpx;
			margin-bottom: 26rpx;

		}
	}

	/deep/ {
		.u-badge--error {
			background: linear-gradient(90deg, #ff1e00 0%, #fc754c 100%);
		}
	}

	.userToEditPop {
		padding: 20rpx 60rpx 0rpx;

		/deep/ {
			.u-input {
				border: 1px solid rgb(236, 236, 236) !important;
				border-radius: 100px !important;
			}
		}

		.avatar-wrapper {
			padding: 0;
			width: 56px !important;
			height: 56px !important;
			border-radius: 100rpx;
			margin-top: 40rpx !important;
			margin-bottom: 40rpx !important;
			margin-left: auto;
			margin-right: auto;

			position: relative;

			.pictureUpload {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 999;
				background: #ffffffb8;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.weui-input {
			border-radius: 100px !important;
			border: 1px solid #ececec !important;
		}

		.avatar {
			display: block;
			width: 56px;
			height: 56px;
			box-shadow: 0 0.3125rem 1.25rem 20px rgba(166, 199, 251, 0.12);
			border-radius: 100px !important;
			overflow: hidden;
		}

		.container {
			display: flex;
		}
	}

	.userToEditPopA {
		padding: 40rpx 40rpx 30rpx;
		width: 80vw;
		box-sizing: border-box;

		/deep/ {
			.u-input {
				border: 1px solid rgb(236, 236, 236) !important;
				border-radius: 100px !important;
			}
		}

		.avatar-wrapper {
			padding: 0;
			width: 56px !important;
			height: 56px !important;
			border-radius: 100rpx;
			margin-top: 40rpx !important;
			margin-bottom: 30rpx !important;
			margin-left: auto;
			margin-right: auto;

			position: relative;

			.pictureUpload {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 999;
				background: #ffffffb8;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.weui-input {
			border-radius: 100px !important;
			border: 1px solid #ececec !important;
		}

		.avatar {
			display: block;
			width: 56px;
			height: 56px;
			box-shadow: 0 0.3125rem 1.25rem 20px rgba(166, 199, 251, 0.12);
			border-radius: 100px !important;
			overflow: hidden;
		}

		.container {
			display: flex;
		}
	}

	.btn {
		width: 100%;
		padding: 42rpx 0 24rpx;
		background: #fff;
		box-sizing: border-box;

		transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);

		&:hover {
			opacity: 0.8;
		}

		view {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 76rpx;
			background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
			border-radius: 32px;
			font-size: 26rpx;
			font-weight: bold;
			color: #fff;
		}
	}

	.wallet-box {
		display: grid;
		grid-template-columns: 1fr 3fr;
		background-color: white;
		height: 84px;
		box-sizing: border-box;
		padding: 18px 0;
		font-size: 24rpx;
		background: hsla(0, 0%, 100%, .4);

		.wallet-title {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;

			border-right: 1px #eee dotted;
			margin-right: 24rpx;
		}

		.wallet-list {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				color: rgb(241, 193, 105);

				.text {
					display: flex;
					align-items: center;
					color: black;
					padding-right: 14rpx;
				}

				.price {
					font-weight: 600;
				}
			}
		}
	}
</style>