<template>
	<view>
		<!-- 用户信息 -->
		<view class="user">
			<view class="user-tool">
				<image src="@/static/icons/user_icon_00.png" mode="widthFix" />
			</view>
			<view class="user-content">
				<image class="info-cover" src="../../static/dev/good_cover_00.jpg" mode="aspectFill" />
				<view class="info-nickname">唐明明</view>
				<view class="info-signa">潮流就是我的态度</view>
				<view class="info-tags">
					<text class="info-tags-item identity">普通用户</text>
					<text class="info-tags-item vip">PULS企业</text>
				</view>
			</view>
			<view class="user-tabs">
				<view class="user-tabs-item" :class="{'show': tabsIndex === 0}" @click="tabsIndex = 0">管理中心</view>
				<view class="user-tabs-item" :class="{'show': tabsIndex === 1}" @click="tabsIndex = 1">我的推广</view>
			</view>
		</view>
		<!-- 消息 -->
		<view class="user-ad">
			<uni-icons class="user-ad-icon" type="sound-filled" color="#e93340"></uni-icons>
			<swiper class="user-ad-swiper" :interval="3000" autoplay vertical circular>
				<swiper-item>
					<view class="user-ad-item">恭喜用户0101成功开通PLUS企业会员</view>
				</swiper-item>
				<swiper-item>
					<view class="user-ad-item">恭喜用户0101成功开通PLUS企业会员</view>
				</swiper-item>
			</swiper>
		</view>
		<block v-if="tabsIndex === 0">
			<!-- 我的资产 -->
			<view class="user-group">
				<view class="title">
					<view class="title-text">我的资产</view>
				</view>
				<view class="group-flex group-flex-4">
					<view class="item">
						<view class="item-num">0</view>
						<view class="item-title">原石</view>
					</view>
					<view class="item">
						<view class="item-num">0</view>
						<view class="item-title">贡献值</view>
					</view>
					<view class="item">
						<view class="item-num">0</view>
						<view class="item-title">易币</view>
					</view>
					<view class="item">
						<view class="item-num">0</view>
						<view class="item-title">零钱</view>
					</view>
				</view>
			</view>
			<!-- 我的权证 -->
			<view class="user-group">
				<view class="title" >
					<view class="title-text">我的权证</view>
				</view>
				<view class="group-flex group-flex-4">
					<view class="item" @click="$Router.push({name:'NumberWeight'})">
						<view class="item-num">0</view>
						<view class="item-title">权证持有</view>
					</view>
					<view class="item" @click="$Router.push({name:'33'})">
						<view class="item-num">0</view>
						<view class="item-title">权证转让</view>
					</view>
					<view class="item" @click="$Router.push({name:'334'})">
						<view class="item-num">0</view>
						<view class="item-title">已使用</view>
					</view>
					<view class="item" @click="$Router.push({name:'MallShipments'})">
						<view class="item-num">0</view>
						<view class="item-title">已提货</view>
					</view>
				</view>
			</view>
			<!-- 我的权证 -->
			<view class="user-group">
				<view class="group-flex group-flex-4">
					<view class="item">
						<image class="item-cover" src="@/static/icons/user_icon_01.png" mode="aspectFill" />
						<view class="item-title">商品收藏</view>
					</view>
					<view class="item">
						<image class="item-cover" src="@/static/icons/user_icon_02.png" mode="aspectFill" />
						<view class="item-title">关注企业</view>
					</view>
					<view class="item" @click="$Router.push({name:'CouponList'})">
						<image class="item-cover" src="@/static/icons/user_icon_03.png" mode="aspectFill" />
						<view class="item-title">我的优惠券</view>
					</view>
					<view class="item" @click="$Router.push({name:'AddressList'})">
						<image class="item-cover" src="@/static/icons/user_icon_04.png" mode="aspectFill" />
						<view class="item-title">地址管理</view>
					</view>
				</view>
			</view>
		</block>
		<block v-else-if="tabsIndex === 1">
			<!-- 我的权证 -->
			<view class="user-group">
				<view class="title">
					<view class="title-text">推广数据</view>
				</view>
				<view class="group-flex group-flex-2">
					<view class="item">
						<view class="item-num">0</view>
						<view class="item-title">推广人数</view>
					</view>
					<view class="item">
						<view class="item-num">0</view>
						<view class="item-title">推广企业</view>
					</view>
				</view>
			</view>
            
			<!-- 排名信息 -->
			<view class="user-group">
                <view class="title">
                	<view class="title-text">推广排名</view>
                </view>
				<view class="ranking ranking-after">
                    <view class="ranking-title">
                        <view class="ranking-text">全站推广人数</view>
                        <view class="ranking-number">5</view>
                    </view>
                    <image class="tips" src="../../static/icons/property_icon_00.png" mode="aspectFill" />
				</view>
                <view class="ranking">
                    <view class="ranking-title">
                    	<view class="ranking-text">推广企业</view>
                        <view class="ranking-number">5</view>
                    </view>
                    <image class="tips" src="../../static/icons/property_icon_01.png" mode="aspectFill" />
                </view>
			</view>
            
			<!-- 推广海报 -->
            <view class="poster-text">推广海报</view>
			<carousel :img-list="imgList" url-key="url" @selected="selectedBanner"/>
            
            
            <view class="" @click="outLogin">
                临时退出
            </view>
		</block>
		<!-- 版权信息 -->
		<view class="copyright">易品新境 beta 1.0.0</view>
	</view>
</template>

<script>
	import carousel from '@/components/vear-carousel/vear-carousel'
	export default {
		components: {
			carousel
		},
		data() {
			return {
				tabsIndex: 1,
				imgList: [{
					url: 'https://img9.51tietu.net/pic/2019-091200/vgkpidei2tjvgkpidei2tj.jpg',
					id: 1
				},{
					url: 'https://img9.51tietu.net/pic/2019-091200/euzekmi5m23euzekmi5m23.jpg',
					id: 2
				},{
					url: 'https://img9.51tietu.net/pic/2019-091200/143tt0ta4sr143tt0ta4sr.jpg',
					id: 3
				}]
			}
		},
		methods: {
			outLogin(){
				this.$store.commit('setToken', '')
			},
			selectedBanner(item, index) {
				console.log('🥒', item, index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 退出按钮
	.out-login{
		padding: 0 $padding;
		button{
			background: $text-price;
			height: 90rpx;
			line-height: 90rpx;
			color: white;
			font-size: $title-size;
			border-radius: $radius;
			font-weight: bold;
			&::after{
				border: none;
			}
		}
	}
	// 消息通知
	.user-ad{
		position: relative;
		background: white;
		margin: $margin;
		border-radius: $radius;
		line-height: 90rpx;
		padding: 0 $padding;
		font-size: $title-size-m;
		.user-ad-icon{
			position: absolute;
		}
		.user-ad-swiper{
			height: 90rpx;
			padding-left: 50rpx;
			.user-ad-item{
				color: $text-gray;
				@extend .nowrap;
			}
		}
	}
	// 用户
	.user{
		.user-tool{
			@extend .ios-top;
			background: $text-price;
			color: white;
			padding-left: $padding;
			padding-right: $padding;
			padding-bottom: 200rpx;
			line-height: 90rpx;
			text-align: right;
			font-size: $title-size-m;
			image{
				width: 58rpx;
			}
		}
		.user-content{
			margin: -140rpx $margin 0 $margin;
			background: white;
			border-radius: $radius;
			text-align: center;
			padding: 0 $padding ($padding + 50);
			.info-cover{
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
				border:solid 4rpx white;
				margin-top: -64rpx;
				box-sizing: border-box;
				margin-bottom: $margin/2;
			}
			.info-nickname{
				font-weight: bold;
				font-size: $title-size + 4;
				line-height: 50rpx;
			}
			.info-signa{
				line-height: 50rpx;
				color: $text-gray;
				font-size: $title-size-sm;
			}
			.info-tags{
				padding: ($padding/2) 0 0;
				font-size: $title-size-sm - 2;
				.info-tags-item{
					background: $text-price;
					color: white;
					margin: 0 ($margin/2);
					padding: 0 ($padding/2);
					line-height: 40rpx;
					display: inline-block;
					border-radius: 20rpx;
					&.identity{
						background-image: linear-gradient(to right, #e75e44, #e93340);
					}
					&.vip{
						background-image: linear-gradient(to right, #f8e5c0, #d6a46a);
						color: #8d4928;
					}
				}
			}
		}
		.user-tabs{
			margin-top: -33rpx;
			text-align: center;
			.user-tabs-item{
				display: inline-block;
				width: 240rpx;
				height: 66rpx;
				line-height: 66rpx;
				text-align: center;
				background-color: white;
				border:solid 1rpx $border-color;
				font-size: $title-size-m;
				&.show{
					background: $text-price;
					color: white;
					border-color: $text-price;
				}
			}
		}
		
		.user-total{
			padding: $padding ($padding - 10);
			display: flex;
			.total-item{
				position: relative;
				margin: 0 ($margin/3);
				text-align: center;
				width: calc(33.33% - #{$margin - 10});
				.total-number{
					font-size: $title-size;
					font-weight: bold;
					line-height: 50rpx;
				}
				.total-text{
					font-size: $title-size-sm;
					line-height: 40rpx;
				}
				&::before{
					position: absolute;
					right: -($margin/3);
					top: 25%;
					height: 50%;
					content: " ";
					width: 1rpx;
					background: #c2c4c1;
				}
				&:last-child::before{
					display: none;
				}
			}
		}
	}
	// 用户功能组
	.user-group{
		margin: $margin;
		background: white;
		border-radius: $radius;
        .ranking {
            width: 50%;
            display: inline-block;
            position: relative;
            padding: $padding $padding - 10 $padding - 10 $padding;
            box-sizing: border-box;
            .ranking-title {
                font-size: 28rpx;
                .ranking-text {
                    margin-bottom: $margin - 10;
                }
                .ranking-number {
                    font-weight: 600;
                    font-size: 30rpx;
                }
            }
            .tips {
                position: absolute;
                right: 30rpx;
                top: 25rpx;
                width: 90rpx;
                height: 90rpx;
            }
        }
        .ranking-after::after {
            position: absolute;
            content: '';
            right: 0;
            top: 0;
            width: 2rpx;
            height: 100%;
            background-color: $border-color;
        }
		.title{
			padding: $padding $padding ($padding - 10);
			display: flex;
			justify-content: space-between;
			border-bottom: solid 1rpx $border-color;
			align-items: center;
			.title-text{
				line-height: 40rpx;
				font-size: $title-size;
			}
			.title-more{
				height: 40rpx;
				line-height: 40rpx;
				font-size: $title-size-sm;
				color: $text-gray-m;
			}
			.title-icon{
				vertical-align: middle;
			}
		}
		.group-flex{
			display: flex;
			padding: $padding - 10;
			flex-wrap: wrap;
			.item{
				margin: $padding / 3;
				text-align: center;
			}
		}
	}
    .poster-text {
        margin: $margin + 10 0 0;
        text-align: center;
    }
	// 易货订单
	.order-flex{
		.item{
			width: calc(20% - #{$padding - 10});
			.item-num{
				font-weight: bold;
				font-size: $title-size + 4;
			}
			.item-cover{
				width: 72rpx;
				height: 72rpx;
				vertical-align: top;
				margin-bottom: 10rpx;
			}
			.item-title{
				font-size: $title-size-sm - 2;
				color: $text-gray-m;
				line-height: 40rpx;
			}
		}
	}
	// 工具内容
	.group-flex-4{
		@extend .order-flex;
		.item{
			width: calc(25% - #{$padding - 10});
		}
	}
	.group-flex-3{
		@extend .order-flex;
		.item{
			width: calc(33.33% - #{$padding - 10});
		}
	}
	.group-flex-2{
		@extend .order-flex;
		.item{
			width: calc(50% - #{$padding - 10});
		}
	}
	
	// 易品新境
	.copyright{
		padding: $padding 0 ($padding * 2);
		text-align: center;
		font-size: $title-size-sm;
		color: $text-gray-m;
	}
</style>
