<template>
	<view class="mine-container">
		<!-- 切换身份 -->
		<view :class="['dl-title',ifHasCard?'has-member-card':''] ">
			<view class="left-search" @click="changeUserType('01'==localUserType?'02':'01')">
				<image v-if="!ifHasCard" class="dl-image" src="@/static/mine/qiehuan.png" mode="aspectFit"></image>
				<image v-else class="dl-image" src="@/static/mine/change_member.png" mode="aspectFit"></image>
				<text class="dl-text">切换至{{'02'==localUserType?'通告主':'博主'}}</text>
			</view>
		</view>
		<!-- 头像信息 -->
		<view :class="['dl-person-box',ifHasCard?'has-member-card':''] ">
			<view class="user-image-box">
				<view class="dl-image-box">
					<image v-if="!userInfo.avatar" class="touxiang" src="@/static/images/profile.jpg" mode="aspectFit">
					</image>
					<image v-else class="touxiang" :src="userInfo.avatar" mode="aspectFit"></image>
					<image class="sex" src="@/static/mine/sex_girl.png" mode="aspectFit"></image>
				</view>
				<view class="name-box">
					<view class="title-box">
						{{userInfo.nickName || ''}}
						<image v-if="ifHasCard" src="@/static/mine/huang.png" mode="aspectFit"></image>
					</view>
					<view class="bottom-box">
						<view class="fans-box">
							<image src="@/static/mine/fans.png" mode="aspectFit"></image>
							<view class="fans-num">{{userInfo.tfansNum||'0'}}</view>
						</view>
						<view v-if="ifHasCard" class="member-box">会员2025-12-21日到期</view>
					</view>

				</view>
				<view class="edit-box">
					<text style="margin-right: 10rpx;">编辑</text>
					<uni-icons v-if="ifHasCard" type="right" color="#623109" size="12"></uni-icons>
					<uni-icons v-else type="right" color="#929292" size="12"></uni-icons>
				</view>
			</view>
			<!-- 会员开通 -->
			<view v-if="!ifHasCard && '02'==localUserType" class="dl-member-box" @click="goMemberCard()">
				<view class="dl-left">
					<image class="dl-icon" src="@/static/index/zuanshi.png" mode="aspectFit"></image>
					<text>开通会员 解锁更多权益</text>
				</view>
				<view class="dl-right">
					<view class="dl-go-view">立即开通</view>
				</view>
			</view>
			<!-- 会员开通--通告主 -->
			<view v-if="!ifHasCard && '01'==localUserType" class="dl-member-box" @click="goMemberCard()">
				<view class="dl-left">
					<image class="dl-icon" src="@/static/index/zuanshi.png" mode="aspectFit"></image>
					<text>获取通告主卡 体验高级特权</text>
				</view>
				<view class="dl-right">
					<view class="dl-go-view">立即开通</view>
				</view>
			</view>
			<!-- 积分 -->
			<view class="points-box" v-if="'02'==localUserType">
				<view class="item-box">
					<view class="item-text-box">
						<view>积分<text class="red-text">{{userInfo.pointsBalance||'0'}}</text></view>
						<view class="dl-little">赚积分<uni-icons type="right" size="10">{{item.unicode}}</uni-icons></view>
					</view>
					<image src="@/static/mine/baoming.png" mode="aspectFit"></image>
				</view>
				<view class="item-box">
					<view class="item-text-box">
						<view>报名<text class="red-text">{{userInfo.report||'0'}}</text>次</view>
						<view class="dl-little">去提额<uni-icons type="right" size="10">{{item.unicode}}</uni-icons></view>
					</view>
					<image src="@/static/mine/jifen.png" mode="aspectFit"></image>
				</view>
			</view>
			<!-- 发布通告 -->
			<view class="public-notice-box" v-if="'01'==localUserType">
				<view class="left-box">
					<view style="margin-bottom: 20rpx;">发布通告额度剩余3条</view>
					<progress style="width: 90%;" border-radius="5" percent="40" activeColor="#FC1F3E"
						backgroundColor="#DEDEDE" stroke-width="8" />
				</view>
				<view class="right-box">
					获取更多
					<uni-icons type="right" color="#623109" size="12"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 个人信息和其他信息 -->
		<view class="other-box">
			<view class="box-room">
				<view class="detail-title">个人信息</view>
				<view class="menu-box top-column">
					<view class="menu-item" v-if="'01'==localUserType">
						<!-- <image src="@/static/mine/zuji.png" mode="aspectFit"></image> -->
						<image src="@/static/mine/caise/renzheng.png" mode="aspectFit"></image>
						<view class="text-dom">通告主认证</view>
						<uni-icons type="right" color="#623109" size="12"></uni-icons>
					</view>
					<view class="menu-item" v-if="'01'==localUserType">
						<!-- <image src="@/static/mine/zuji.png" mode="aspectFit"></image> -->
						<image src="@/static/mine/caise/tonggaoquan.png" mode="aspectFit"></image>
						<view class="text-dom">通告券</view>
						<uni-icons type="right" color="#623109" size="12"></uni-icons>
					</view>
					<view class="menu-item">
						<!-- <image src="@/static/mine/zuji.png" mode="aspectFit"></image> -->
						<image src="@/static/mine/caise/zuji.png" mode="aspectFit"></image>
						<view class="text-dom">足迹</view>
						<uni-icons type="right" color="#623109" size="12"></uni-icons>
					</view>
					<view class="menu-item" v-if="'02'==localUserType" @click="goMyAddr()">
						<!-- <image src="@/static/mine/dizhi.png" mode="aspectFit"></image> -->
						<image src="@/static/mine/caise/dizhi.png" mode="aspectFit"></image>
						<view class="text-dom">地址</view>
						<uni-icons type="right" color="#623109" size="12"></uni-icons>
					</view>
					<view class="menu-item" v-if="'02'==localUserType" @click="goMyCard()">
						<!-- <image src="@/static/mine/mingpian.png" mode="aspectFit"></image> -->
						<image src="@/static/mine/caise/mingpian.png" mode="aspectFit"></image>
						<view class="text-dom">名片</view>
						<uni-icons type="right" color="#623109" size="12"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="other-box">
			<view class="box-room">
				<view class="detail-title">其他信息</view>
				<view class="menu-box">
					<view class="menu-item">
						<!-- <image src="@/static/mine/xinrenshouce.png" mode="aspectFit"></image> -->
						<image src="@/static/mine/caise/shouce.png" mode="aspectFit"></image>
						<view>新人手册</view>
					</view>
					<view class="menu-item">
						<!-- <image src="@/static/mine/kefu.png" mode="aspectFit"></image> -->
						<image src="@/static/mine/caise/kefu.png" mode="aspectFit"></image>
						<view>联系客服</view>
					</view>
					<view class="menu-item">
						<!-- <image src="@/static/mine/gognzhonghao.png" mode="aspectFit"></image> -->
						<image src="@/static/mine/caise/weixin.png" mode="aspectFit"></image>
						<view>公众号</view>
					</view>
					<view class="menu-item">
						<!-- <image src="@/static/mine/jairushequ.png" mode="aspectFit"></image> -->
						<image src="@/static/mine/caise/shequ.png" mode="aspectFit"></image>
						<view>加入社区</view>
					</view>
					<view class="menu-item">
						<!-- <image src="@/static/mine/yijianfankui.png" mode="aspectFit"></image> -->
						<image src="@/static/mine/caise/yijian.png" mode="aspectFit"></image>
						<view>意见反馈</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tabBarVue from '@/components/tabbar/tabBar.vue'
	import storage from '@/utils/storage'
	import constant from '@/utils/constant';
	import {
		changeUserType,
		getUserType,
		formatNumberWithUnits,
		calculateTimeDifference
	} from '@/utils/common.js'
	import {
		getJSONData
	} from '@/utils/auth.js'
	import {
		bloggerDetail
	} from '@/api/business/member.js'
	export default {
		props: {
			nowUserType: {
				type: String,
				default: null
			}
		},
		watch: {
			// 'nowUserType': function(newVal, oldVal) {
			// 	this.$emit('update:params', newVal);
			// }
		},
		components: {
			tabBarVue,
		},
		data() {
			return {
				localUserType: this.nowUserType,
				//是否已开通会员
				ifHasCard: false,
				userInfo: {}
			}
		},
		mounted() {},
		onShow() {

		},
		onLoad() {

		},
		mounted() {
			if (null != getJSONData(constant.userInfo)) {
				this.userInfo = getJSONData(constant.userInfo)
				this.getBloggerDetail()
			}
		},
		computed: {
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		methods: {
			getBloggerDetail() {
				bloggerDetail(this.userInfo.userId).then(res => {
					this.userInfo.tfansNum = res.data.tfansNum.toString()
					this.userInfo.pointsBalance = res.data.pointsBalance.toString()
					this.userInfo.report = res.data.report.toString()
				})
			},
			/**
			 * 切换用户身份
			 */
			changeUserType(type) {
				changeUserType(type)
				this.localUserType = type
				this.$emit('update:nowUserType', this.localUserType)
				this.$forceUpdate()
			},
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
			},
			/**
			 * 跳转名片列表
			 */
			goMyCard() {
				this.$tab.navigateTo('/pages/mine/card/my-card')
			},
			/**
			 * 跳转地址列表
			 */
			goMyAddr() {
				this.$tab.navigateTo('/pages/mine/addr/addr-list')
			},
			goMemberCard() {
				this.$tab.navigateTo('/pages/mine/member/member-card')
			}
		}
	}
</script>

<style lang="scss">
	.mine-container {
		width: 100%;
		color: #363636;
		font-size: 38rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		background-color: #F6F6F6;


		.dl-title {
			padding-top: calc(var(--status-bar-height) + 73rpx);
			width: 100%;
			background-color: #FC1F3E;
			color: white;
			display: flex;
			position: relative;
			z-index: 10;
			font-size: 30rpx;
			padding-right: 10rpx;
			padding-bottom: 20rpx;
			padding-left: 15rpx;
			border-bottom: 1px solid #F4F4F4;


			.left-search {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: left;
				position: relative;

				.dl-image {
					width: 40rpx;
					height: 40rpx;
				}

				.dl-text {
					padding-left: 10rpx;
				}
			}
		}


		.dl-person-box {
			width: 100%;
			background-color: white;
			padding: 20rpx 25rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.user-image-box {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.dl-image-box {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100rpx;
					position: relative;

					.touxiang {
						border-radius: 50%;
						width: 80rpx;
						height: 80rpx;
					}

					.sex {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						bottom: 0rpx;
						right: 0rpx;
						border-radius: 50%;
					}
				}

				.name-box {
					display: flex;
					padding-left: 20rpx;
					flex: 1;
					flex-direction: column;
					align-items: self-start;
					justify-content: center;

					.title-box {
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							margin-left: 10rpx;
							width: 50rpx;
							height: 50rpx;
						}
					}

					.bottom-box {
						display: flex;
						align-items: center;
						justify-content: center;

						.fans-box {
							max-width: 200rpx;
							margin-right: 10rpx;
							font-size: 18rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #FEF4EF;
							padding: 5rpx 10rpx;
							color: #FE9860;
							border-radius: 20rpx;

							image {
								height: 20rpx;
								width: 20rpx;
								margin-right: 8rpx;
							}
						}

						.member-box {
							flex: 1;
							font-size: 18rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #FC1F3E;
							color: white;
							padding: 5rpx 10rpx;
							border-radius: 20rpx;
						}
					}



					.fans-num {}
				}

				.edit-box {
					color: #929292;
					text-align: right;
					padding-right: 20rpx;
					font-size: 22rpx;
					width: 130rpx;

				}
			}

			.dl-member-box {
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				border-radius: 35rpx;
				justify-content: center;
				height: 100rpx;
				width: 100%;
				background: url('/static/index/member-bg.png');
				background-size: 100% 100%;
				background-position: center;
				/* 图片居中显示 */
				background-repeat: no-repeat;
				/* 不重复背景图片 */

				.dl-left {
					display: flex;
					flex: 1;
					padding-left: 30rpx;
					align-items: center;
					font-size: 30rpx;
					color: #623109;
					justify-content: left;

					.dl-icon {
						width: 60rpx;
						height: 56rpx;

					}
				}

				.dl-right {
					.dl-go-view {
						font-size: 28rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #F5D8A5;
						color: #623109;
						padding: 10rpx 25rpx;
						float: right;
						border-radius: 30rpx;
					}
				}
			}
		}

		.has-member-card {
			background-color: #FBE8CE !important;
			color: #623109 !important;
			border-bottom: 1px solid #F2E7D5 !important;

			.points-box {
				border-top: 1px solid #F2E7D5 !important;
				padding-top: 10rpx;

				.item-box {
					background-color: white !important;
					color: #623109 !important;

					.dl-little {
						background-color: #FED96E !important;
						color: #363636;
					}
				}
			}

			.edit-box {
				color: #623109 !important;
			}
		}

		.points-box {
			margin-top: 10rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.item-box {
				flex: 1;
				border-radius: 20rpx;
				background-color: #FEF4EF;
				margin: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx;

				.item-text-box {
					font-size: 34rpx;
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.dl-little {
						font-size: 22rpx;
						background-color: white;
						border-radius: 20rpx;
						padding: 5rpx 20rpx;
						margin-top: 15rpx;
					}
				}

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

				.red-text {
					color: #FC1F3E;
				}
			}
		}

		.public-notice-box {
			width: 100%;
			padding: 30rpx;
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			border-radius: 20rpx;
			background-color: #FEF4EF;
			font-size: 33rpx;
			justify-content: center;

			.left-box {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
			}

			.right-box {
				font-size: 26rpx;
				width: 200rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}

		.other-box {
			background-color: #F6F6F6;
			width: 100%;
			flex-direction: column;
			padding: 30rpx 30rpx 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.box-room {
				display: flex;
				background-color: white;
				border-radius: 20rpx;
				width: 100%;
				flex-direction: column;
				padding: 25rpx 30rpx;
				align-items: self-start;
				justify-content: center;

				.detail-title {
					// border-left: 8rpx solid #FC1F3E;
					font-weight: bold;
					font-size: 29rpx;
					// padding-left: 10rpx;
					margin-bottom: 30rpx;

				}

				.menu-box {
					padding-top: 15rpx;
					border-top: 1rpx solid #F7F7F7;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					.menu-item {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						margin: 10rpx;

						image {
							width: 60rpx;
							height: 60rpx;
							margin-bottom: 10rpx;
						}
					}
				}

				.top-column {
					flex-direction: column;

					.menu-item {
						width: 100%;
						flex-direction: row;
						border-bottom: 1rpx solid #F7F7F7;
						padding-bottom: 10rpx;

						image {
							width: 60rpx;
							height: 60rpx;
							margin-bottom: 0 !important;
						}

						.text-dom {
							display: flex;
							align-items: center;
							padding-left: 20rpx;
							justify-content: flex-start;
							font-size: 26rpx;
							flex: 1;
						}

						.uni-icons {
							width: 70rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}
	}
</style>