<template>
	<view>
		<!-- 顶部头像栏 -->
		<view class="padding bg-main-color" :style="'padding-top: ' + pageContentTop + 'px; padding-bottom: 100rpx;'">
			<view class="flex justify-start padding-bottom-xl solid-bottom">
				<view class="cu-avatar round"
					:style="'width: 120rpx; height: 120rpx; background-image:url(' + curUserInfo.userInfo.avatarUrl  + ');'"></view>
				<view class="margin-lr-sm">
					<view class="text-xl margin-bottom-xs">{{curUserInfo.userInfo.nickName}}</view>
					<view class="padding-xs text-sm">
						<view v-if="myInfo.vipInfo.isVip" class='cu-tag bg-yellow radius'>{{myInfo.vipInfo.level}}会员
						</view>
						<view v-else class='cu-tag bg-yellow radius'>非会员</view>
					</view>
				</view>
			</view>
			<view class="cu-bar">
				<view class="action bar-first-action"><text class="margin-right-sm">余额:</text><text>{{myInfo.balance}}</text></view>
				<view class="action"><text class="margin-right-sm">积分:</text><text>{{myInfo.integrate}}</text></view>
				<view class="action" @click="showCart">
					<text class="margin-right-sm">购物车:</text>
					<text class="cuIcon-cart my-cart">
						<text class="cu-tag badge my-cart-badge" v-if="myInfo.cartNum > 0">{{myInfo.cartNum}}</text>
					</text>
				</view>
			</view>
		</view>
		<view class="margin-lr-sm paper-drawer-bar margin-bottom-with-bar">
			<!-- 服务圈 -->
			<view class="bg-white padding-lr shadow-warp">
				<view class="cu-bar margin-top-sm solid-bottom">
					<view class="action bar-first-action">
						<text>{{myInfo.servCircle.name}}</text>
						<view class="cuIcon-title text-main-color"></view>
						<text>服务圈</text>
					</view>
					<view class="flex justify-end">
						<view class="text-center margin-right-sm">
							<view class="cuIcon-shop action-icon"></view>
							<view class="text-xs">邻里商铺</view>
						</view>
						<view class="text-center">
							<view class="cuIcon-roundaddfill text-main-color action-icon"></view>
							<view class="text-xs">您的小区</view>
						</view>
					</view>
				</view>
				<view class="padding-top serv-news">
					<view class="flex justify-between padding-bottom" v-for="(item, index) in myInfo.servCircle.news">
						<view class="flex justify-start">
							<view class="cu-avatar round margin-right-sm"
								:style="'background-image:url(' + item.avatarUrl + ');'"></view>
							<view class="text-sm">
								<text class="margin-right-xs">{{encryptString(item.userName)}}</text>
								<text>{{item.action}}</text>
							</view>
						</view>
						<view class="margin-left-sm">
							<button v-if="item.type === 0" class="cu-btn bg-main-color round sm">立即下单</button>
							<button v-else class="cu-btn bg-main-color round sm">学家政</button>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white padding-lr padding-bottom">
				<!-- 服务订单 -->
				<view class="cu-bar solid-bottom margin-top-sm">
					<view class="action bar-first-action">
						<text class="cuIcon-titles text-main-color"></text> 服务订单
					</view>
					<view @click="showMyOrders(servOrderTabList, 0, servOrderType)">
						<text>全部</text>
						<text class="cuIcon-right"></text>
					</view>
				</view>
				<view class="cu-list grid no-border col-5">
					<view class="cu-item" @click="showMyOrders(servOrderTabList, 0, servOrderType)">
						<view class="cuIcon-news">
							<view class="cu-tag badge" v-if="myInfo.serOrderNum.wait2Pay > 0">
								<block>{{myInfo.serOrderNum.wait2Pay}}</block>
							</view>
						</view>
						<text>待付款</text>
					</view>
					<view class="cu-item" @click="showMyOrders(servOrderTabList, 1, servOrderType)">
						<view class="cuIcon-list">
							<view class="cu-tag badge" v-if="myInfo.serOrderNum.wait2Serv > 0">
								<block>{{myInfo.serOrderNum.wait2Serv}}</block>
							</view>
						</view>
						<text>待服务</text>
					</view>
					<view class="cu-item" @click="showMyOrders(servOrderTabList, 2, servOrderType)">
						<view class="cuIcon-repair">
							<view class="cu-tag badge" v-if="myInfo.serOrderNum.processing > 0">
								<block>{{myInfo.serOrderNum.processing}}</block>
							</view>
						</view>
						<text>进行中</text>
					</view>
					<view class="cu-item" @click="showMyOrders(servOrderTabList, 3, servOrderType)">
						<view class="cuIcon-comment">
							<view class="cu-tag badge" v-if="myInfo.serOrderNum.afterServ > 0">
								<block>{{myInfo.serOrderNum.afterServ}}</block>
							</view>
						</view>
						<text>售后中</text>
					</view>
					<view class="cu-item" @click="showMyOrders(servOrderTabList, 4, servOrderType)">
						<view class="cuIcon-forward">
							<view class="cu-tag badge" v-if="myInfo.serOrderNum.wait2Forward > 0">
								<block>{{myInfo.serOrderNum.wait2Forward}}</block>
							</view>
						</view>
						<text>待转发</text>
					</view>
				</view>
				<!-- 商品订单 -->
				<view class="cu-bar solid-bottom">
					<view class="action bar-first-action">
						<text class="cuIcon-titles text-main-color"></text> 商品订单
					</view>
					<view @click="showMyOrders(productOrderTabList, 0, productOrderType)">
						<text>全部</text>
						<text class="cuIcon-right"></text>
					</view>
				</view>
				<view class="cu-list grid no-border col-5">
					<view class="cu-item" @click="showMyOrders(productOrderTabList, 0, productOrderType)">
						<view class="cuIcon-news">
							<view class="cu-tag badge" v-if="myInfo.serOrderNum.wait2Pay > 0">
								<block>{{myInfo.serOrderNum.wait2Pay}}</block>
							</view>
						</view>
						<text>待付款</text>
					</view>
					<view class="cu-item" @click="showMyOrders(productOrderTabList, 1, productOrderType)">
						<view class="cuIcon-goodsfavor">
							<view class="cu-tag badge" v-if="myInfo.serOrderNum.buy> 0">
								<block>{{myInfo.serOrderNum.buy}}</block>
							</view>
						</view>
						<text>买到的</text>
					</view>
					<view class="cu-item" @click="showMyOrders(productOrderTabList, 2, productOrderType)">
						<view class="cuIcon-goodsnew">
							<view class="cu-tag badge" v-if="myInfo.serOrderNum.sale > 0">
								<block>{{myInfo.serOrderNum.sale}}</block>
							</view>
						</view>
						<text>卖出的</text>
					</view>
					<view class="cu-item" @click="showMyOrders(productOrderTabList, 3, productOrderType)">
						<view class="cuIcon-comment">
							<view class="cu-tag badge" v-if="myInfo.serOrderNum.afterServ > 0">
								<block>{{myInfo.serOrderNum.afterServ}}</block>
							</view>
						</view>
						<text>售后中</text>
					</view>
					<view class="cu-item" @click="showMyOrders(productOrderTabList, 4, productOrderType)">
						<view class="cuIcon-forward">
							<view class="cu-tag badge" v-if="myInfo.serOrderNum.wait2Forward > 0">
								<block>{{myInfo.serOrderNum.wait2Forward}}</block>
							</view>
						</view>
						<text>待转发</text>
					</view>
				</view>
			</view>
			<!-- 所有功能 -->
			<view class="bg-white padding-lr padding-bottom">
				<view class="cu-bar margin-top-sm solid-bottom">
					<view class="action bar-first-action">
						<view class="cuIcon-titles text-main-color"></view>
						<text>所有功能</text>
					</view>
				</view>
				<view class="cu-list grid no-border col-4">
					<view class="cu-item">
						<view class="cuIcon-wefill text-red"></view>
						<text>我的发布</text>
					</view>
					<view class="cu-item" @click="showMyAddress">
						<view class="cuIcon-locationfill text-orange"></view>
						<text>地址管理</text>
					</view>
					<view class="cu-item">
						<view class="cuIcon-questionfill text-yellow"></view>
						<text>常见问题</text>
					</view>
					<view class="cu-item">
						<view class="cuIcon-servicefill text-olive"></view>
						<text>联系客服</text>
					</view>
					<view class="cu-item">
						<view class="cuIcon-qr_code text-green"></view>
						<text>二维码分享</text>
					</view>
					<view class="cu-item">
						<view class="cuIcon-moneybagfill text-cyan"></view>
						<text>钱包</text>
					</view>
					<view class="cu-item">
						<view class="cuIcon-friendaddfill text-blue"></view>
						<text>加盟项目</text>
					</view>
					<view class="cu-item">
						<view class="cuIcon-group_fill text-purple"></view>
						<text>社区代理</text>
					</view>
				</view>
			</view>
			<!-- 后台入口 -->
			<view class="bg-white padding-lr padding-bottom">
				<view class="cu-bar margin-top-sm solid-bottom">
					<view class="action bar-first-action">
						<view class="cuIcon-titles text-main-color"></view>
						<text>后台入口</text>
					</view>
				</view>
				<view class="cu-list grid no-border col-4">
					<view class="cu-item">
						<view class="cuIcon-brandfill text-mauve"></view>
						<text>商家注册</text>
					</view>
					<view class="cu-item" @click="showApplyOperator">
						<view class="cuIcon-wenzi text-pink"></view>
						<text>运营商申请</text>
					</view>
					<view class="cu-item">
						<view class="cuIcon-searchlist text-brown"></view>
						<text>后台数据</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'personal-center',
		components: {},
		data() {
			return {
				pageContentTop: this.CustomBar,
				curUserInfo: {},
				myInfo: {},
				servOrderTabList: [{
					type: 'ordersWait2Pay',
					name: '待付款'
				}, {
					type: 'ordersWait2Serv',
					name: '待服务'
				}, {
					type: 'ordersServing',
					name: '服务中'
				}, {
					type: 'ordersAfterServ',
					name: '售后中'
				}, {
					type: 'ordersFinish',
					name: '已完成'
				}],
				servOrderType: 'servOrder',
				productOrderTabList: [{
					type: 'pdOrdersWait2Pay',
					name: '待付款'
				}, {
					type: 'pdOrdersBought',
					name: '买到的'
				}, {
					type: 'pdOrdersSaled',
					name: '卖出的'
				}, {
					type: 'pdOrdersAfterServ',
					name: '售后中'
				}, {
					type: 'pdOrdersFinish',
					name: '已完成'
				}],
				productOrderType: 'productOrder'
			}
		},
		onReady() {
			this.loadData();
		},
		methods: {
			async loadData() {
				this.curUserInfo = this.$request.getCurUserInfo();
				this.myInfo = await this.$api.data('myInfo');
			},
			showMyOrders(tabHeaderList, tabCur, orderType) {
				let tabInfo = {
					orderType: orderType,
					tabHeaderList: tabHeaderList,
					tabCur: tabCur
				}
				uni.navigateTo({
					url: '/pages/my/my-order?tabInfo=' + encodeURIComponent(JSON.stringify(tabInfo))
				})
			},
			encryptString(str) {
				str = str[0] + "**" + str[str.length - 1];
				return str;
			},
			showCart() {
				uni.navigateTo({
					url: '/pages/my/my-cart'
				});
			},
			showMyAddress() {
				uni.navigateTo({
					url: '/pages/my/my-address'
				});
			},
			showApplyOperator() {
				uni.navigateTo({
					url: '/pages/my/apply-operator'
				})
			}
		}
	}
</script>

<style scoped>
	.bg-main-color .solid-bottom::after {
		border-bottom: 1upx solid rgba(255, 255, 255, 0.5);
	}

	.my-cart {
		position: relative;
		font-size: 40rpx;
	}

	.my-cart-badge {
		right: -30rpx;
	}

	.action-icon {
		font-size: 40rpx;
	}

	.paper-drawer-bar {
		position: relative;
		top: -100rpx;
	}
	
	.bar-first-action {
		margin-left: unset !important;
		font-size: 30rpx !important;
	}

	.serv-news .cu-avatar {
		min-width: 64rpx;
	}

	.serv-news button {
		min-width: 120rpx;
	}
</style>
