<template>
	<view class="w-100">
		<!-- <view class="nav-title w-100" :style="navTitleSty">我的</view> -->
		<c-nav_bar
			title="我的"
			bg="rgba(0, 0, 0, 0)"
			color='#fff'
		/>
		
		<!-- userInfo -->
		<view class="user-wrap flex j-start a-center w-100" @click="handleAvatar">
			<view class="user-inner flex j-start a-center" v-if="token">
				<image  
					v-if="userInfo.avatar" 
					class="avatar mr-2"
					:src="baseUrl + '/' + userInfo.avatar"
				/>
				<view class="avatar mr-2" v-else>
					<open-data type="userAvatarUrl"></open-data>
				</view>
				
				<view  v-if="userInfo.nickname">{{userInfo.nickname}}</view>
				<open-data v-else type="userNickName" lang="zh_CN"></open-data>
			</view>
			<view class="user-inner flex j-star a-center" v-else>
				<image class="avatar mr-2" src="/static/images/common/default-avatar.png" mode="aspectFit"></image>
				<view class="font-32">登录/注册</view>
			</view>
		</view>
		
		<!-- bg -->
		<image class="bg" src="/static/images/common/bg.png" mode="widthFix"></image>
		
		<view class="w-100 order-wrap">
			<view class="w-100 flex j-between a-center mb-4" @click="nav('order', 0)">
				<view class="font-bold font-28">我的订单</view>
				<view class="font-24 flex j-end a-center all-text">全部订单 <icon class="right_arrow"></icon></view>
			</view>
			<view class="flex j-around a-center font-24">
				<view 
					class="order-menu_item flex flex-column j-center a-center"
					@click="nav('order', 1)"
				>
					<image class="icon mb-2" src="/static/images/mine/unpay.png" mode="aspectFit"></image>
					<view>待付款</view>
					<!--  -->
					<view v-if="orderNum.wait_pay > 0" class="badge">{{orderNum.wait_pay}}</view>
				</view>
				<view 
					class="order-menu_item flex flex-column j-center a-center"
					@click="nav('order', 2)"
				>
					<image class="icon mb-2" src="/static/images/mine/unrecieve.png" mode="aspectFit"></image>
					<view>待收货</view>
					<view v-if="orderNum.wait_receive > 0" class="badge">{{orderNum.wait_receive > 99 ? '99+' : orderNum.wait_receive}}</view>
				</view>
				<view 
					class="order-menu_item flex flex-column j-center a-center"
					@click="nav('order', 3)"
				>
					<image class="icon mb-2" src="/static/images/mine/recieved.png" mode="aspectFit"></image>
					<view>已收货</view>
					<view v-if="orderNum.wait_send > 0" class="badge">{{orderNum.wait_send > 99 ? '99+' : orderNum.wait_send}}</view>
				</view>
				<view
					class="order-menu_item flex flex-column j-center a-center"
					@click="nav('comment')"
				>
					<image class="icon mb-2" src="/static/images/mine/comment.png" mode="aspectFit"></image>
					<view>待评价</view>
					<view v-if="commentCounts > 0" class="badge">{{commentCounts > 99 ? '99+' : commentCounts}}</view>
				</view>
				<view 
					class="order-menu_item flex flex-column j-center a-center"
					@click="nav('order', 4)"
				>
					<image class="icon mb-2" src="/static/images/mine/unneed.png" mode="aspectFit"></image>
					<view>退款售后</view>
				</view>
			</view>
		</view>
		
		<!-- 功能与服务 -->
		<view class="server-wrap">
			<view class="title font-28 font-bold pt-3">功能与服务</view>
			<view
				class="server-item font-28 flex j-between a-center py-3"
				@click="nav('news')"
			>
				<text>消息中心</text>
				<icon class="right_arrow" />
			</view>
			<view
				class="server-item font-28 flex j-between a-center py-3"
				@click="phoneCall"
			>
				<text>联系老板</text>
				<icon class="right_arrow" />
			</view>
			<view
				class="server-item font-28 flex j-between a-center py-3"
				@click="nav('address')"
			>
				<text>地址管理</text>
				<icon class="right_arrow" />
			</view>
			<view
				class="server-item font-28 flex j-between a-center py-3"
				@click="nav('store')"
			>
				<text>店铺信息</text>
				<icon class="right_arrow" />
			</view>
		</view>

	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { checkLogin } from '@/utils/modules/login.js'
import { baseUrl } from '@/config/index.js'
import { makePhoneCall } from '@/utils/common.js'
import { orderNum } from '@/apis/order.js'
import { uncommentNum } from '@/apis/comment.js'
export default {
	data() {
		return {
			baseUrl,
			orderNum: {
				wait_pay: 0,
				wait_receive: 0,
				wait_send: 0
			},
			commentCounts: 0
		}
	},
	
	computed: {
		...mapState({
			token: state => state.user.token,
			userInfo: state => state.user.userInfo,
		})
	},
	
	onShow() { // 获取更新用户信息
		this.init()
	},
	
	onPullDownRefresh() {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		this.init()
		let timer = setTimeout(() => {
			uni.stopPullDownRefresh()
			clearTimeout(timer)
			timer = null
			uni.hideLoading()
		}, 800)
	},
	
	methods: {
		makePhoneCall,
		...mapActions('user', ['setUserInfo']), 
		
		init() {
			if(this.token) {
				this.setUserInfo()
				this.getOrderNum()
				this.getCommentNum()
			} else {
				this.orderNum = {
					wait_pay: 0,
					wait_receive: 0,
					wait_send: 0
				}
				this.commentCounts = 0
			}
		},
		
		nav(type, arg) {
			checkLogin(() => {
				switch (type) {
					case 'order':
						uni.navigateTo({
							url: `/pages/order/order-list?id=${arg}`
						})
						break;
					case 'address':
						uni.navigateTo({
							url: '/subPages/address/index'
						})
						break;
					case 'store':
						uni.navigateTo({
							url: '/subPages/storeInfo/index'
						})
						break;
					case 'comment':
						uni.navigateTo({
							url: '/subPages/comments/center'
						})
						break;
					case 'news':
						uni.navigateTo({
							url: '/subPages/news/index'
						})
						break;
					default:
						break;
				}
			})
		},
		
		handleAvatar() {
			if(this.token) {
				uni.navigateTo({
					url: '/subPages/userManage/index'
				})
			} else {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			}
		},
		
		// 拨打电话
		phoneCall() {
			this.$checkLogin(makePhoneCall)
		},
		
		async getOrderNum() {
			const { status, data } = await orderNum()
			if(status) {
				this.orderNum = data
			}
		},
		
		// 获取待评论数量
		async getCommentNum() {
			try{
				const { status, data } = await uncommentNum()
				if(status) {
					this.commentCounts = data.count
				}
			}catch(e){
				console.log(e)
				//TODO handle the exception
			}
		}
	}
}
</script>

<style lang="scss" scoped>
// .nav-title {
// 	position: fixed;
// 	left: 0;
// 	right: 0;
// 	z-index: 2;
// 	text-align: center;
// 	color: #fff;
// 	font-weight: 500;
// 	font-size: 34rpx;
// }
.user-wrap {
	position: relative;
	@include borderBox(0, 30rpx);
	height: 454rpx;
	.user-inner {
		color: #fff;
		
		.avatar {
			width: 140rpx;
			height: 140rpx;
			overflow: hidden;
			border-radius: 50%;
		}
	}
}

.bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: -1;
	width: 750rpx;
}

.order-wrap {
	position: relative;
	z-index: 3;
	@include borderBox(40rpx, 30rpx);
	width: 690rpx;
	height: 258rpx;
	margin: -120rpx auto 0;
	background-color: #fff;
	border-radius: 8rpx;
	.all-text {
		color: $desc;
	}
	.order-menu_item {
		position: relative;
		.icon {
			width: 44rpx;
			height: 42rpx;
		}
		.badge {
			position: absolute;
			right: 0;
			top: -16rpx;
			width: 32rpx;
			height: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			background-color: $primary;
			border: 1rpx solid $primary;
			font-size: 20rpx;
			border-radius: 50%;
		}
	}
}

.right_arrow {
	margin-left: 10rpx;
	@include right_arrow(14rpx, 28rpx);
}

.server-wrap {
	@include borderBox(0, 30rpx);
	width: 690rpx;
	margin: 20rpx auto 0;
	background-color: #fff;
	border-radius: 8rpx;
	.server-item {
		border-bottom: 1rpx solid $line;
		&:last-child {
			border-bottom: none;
		}
	}
}

.version {
	position: absolute;
	left: 50%;
	bottom: 10rpx;
	transform: translateX(-50%);
	color: #f9f9f9;
}
</style>
