<template>
	<view class="profile">
		<view class="profile-header">
			<view class="bg"></view>
			<view class="bg1"></view>
			<view class="bg2"></view>
			<view class="profile-base">
				<view class="an">
					<image class="user-avatar" src="http://124.71.5.138:9683/avatar/avatar.png" mode="aspectFit">
					</image>
					<text class="user-name">User name</text>
				</view>
				<view class="my-orders">
					<view class="title">
						<text class="left">My Orders</text>
						<view class="right">
							<navigator url="/pages/order-details/order-details?Order_type=0" hover-class="none">
								<u--text suffixIcon="arrow-right" iconStyle="font-size: 28rpx" text="All"></u--text>
							</navigator>
						</view>
					</view>
					<view class="order-item">
						<navigator url="/pages/order-details/order-details?Order_type=1" hover-class="none">
							<view class="item">
								<image src="../../static/tab-bar/icon-2-2.png" mode="aspectFit"></image>
								<text>Processing</text>
							</view>
						</navigator>
						<navigator url="/pages/order-details/order-details?Order_type=2" hover-class="none">
							<view class="item">
								<image src="../../static/tab-bar/icon-2-2.png" mode="aspectFit"></image>
								<text>Shipped Out</text>
							</view>
						</navigator>
						<navigator url="/pages/order-details/order-details?Order_type=3" hover-class="none">
							<view class="item">
								<image src="../../static/tab-bar/icon-2-2.png" mode="aspectFit"></image>
								<text>Delivered</text>
							</view>
						</navigator>
					</view>
				</view>
			</view>
			<view class="profile-list">
				<u-cell-group :border="false">
					<u-cell url="/pages/shipping-address/shipping-address" icon="map" title="Shipping Address"
						:isLink="true" arrow-direction="right"></u-cell>
					<u-cell url="/pages/about/about" icon="info-circle" title="Contact Us" :isLink="true"
						arrow-direction="right"></u-cell>
					<u-cell url="/pages/about/about" icon="kefu-ermai" title="About" :isLink="true"
						arrow-direction="right"></u-cell>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {
			// 未登入的情况
			if (uni.getStorageInfoSync('token')) {
				// uni.navigateTo({
				// 	url: '/pages/login/login'
				// })
			}
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.profile {
		.profile-header {
			width: 100%;
			height: max-content;
			position: absolute;

			.bg {
				background-color: #1b3ed6;
				width: 100%;
				height: 500rpx;
			}

			.bg1 {
				width: 60%;
				height: 450rpx;
				background-color: rgba(255, 255, 255, 0.1);
				border-bottom-right-radius: 80%;
				position: absolute;
				left: 0;
				top: 0;
			}

			.bg2 {
				width: 60%;
				height: 350rpx;
				background-color: rgba(255, 255, 255, 0.1);
				border-bottom-left-radius: 100%;
				position: absolute;
				right: 0;
				top: 0;
			}

			.profile-base {
				margin: 0rpx 20rpx;
				position: absolute;
				top: 200rpx;
				width: calc(100% - 40rpx);

				.an {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					margin: 20rpx 0rpx;


					.user-avatar {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						margin: 10rpx;
						border: 1rpx solid #FFFFFF;
					}

					.user-name {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 300rpx;
						font-size: $uni-font-size-lg;
						color: $uni-text-color-inverse;
					}
				}

				.my-orders {
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 20rpx;
					box-shadow: 0rpx 0rpx 6rpx $uni-text-color-grey;

					.title {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						width: 100%;

						.left {
							font-size: $uni-font-size-base;
							font-weight: bold;
						}

						.right {
							/deep/ .u-text__value {
								font-size: $uni-font-size-base !important;
							}
						}
					}

					.order-item {
						display: flex;
						flex-direction: row;
						justify-content: space-around;
						align-items: center;
						text-align: center;
						margin-top: 40rpx;

						.item {
							width: 150rpx;
							overflow: hidden;

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

							text {
								margin-top: 10rpx;
								width: 100%;
								display: inline-block;
								font-size: $uni-font-size-sm;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
				}

			}

			.profile-list {
				margin-top: 120rpx;
				// border-top: 20rpx solid #f1f1f1;
			}
		}
	}
</style>
