<template>
	<view class="profile-container">
		<view class="profile-info">
			<view class="profile-avatar">
				<image style="width: 220rpx;" src="../../static/logo.png" mode="scaleToFill" />
			</view>
			<view class="profile-nickname">
				<text>{{ nickName }}</text>
			</view>
		</view>

		<view class="order-center">
			<uni-section title="我的订单" type="line" padding>
				<template v-slot:right>
					<view class="order-more" @tap="showAllOrder">全部订单</view>
				</template>
				<uni-grid
					:column="4"
					:show-border="false"
					:square="false"
					@change="handleOrderTypeChange"
				>
					<uni-grid-item
						v-for="(item, index) in orderBtnList"
						:index="index"
						:key="index"
					>
						<view class="grid-item-box">
							<image class="image" :src="item.url" mode="aspectFill" />
							<text class="text">{{ item.text }}</text>
							<view v-if="item.badge" class="grid-dot">
								<uni-badge :text="item.badge" :type="item.type" />
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>

		<view class="function-expand">
			<uni-grid :column="3" :show-border="false" :square="false" @change="change">
				<uni-grid-item v-for="(item, index) in expandBtnList" :index="index" :key="index">
					<view class="grid-item-box">
						<image class="image" :src="item.url" mode="aspectFill" />
						<text class="text">{{ item.text }}</text>
						<view v-if="item.badge" class="grid-dot">
							<uni-badge :text="item.badge" :type="item.type" />
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>

		<view class="function-list">
			<u-cell-group>
				<u-cell-item icon="setting" title="设置" @click="toSetting"></u-cell-item>
				<u-cell-item icon="man-add" title="关于"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { orderCount } from '@/api/profile';

let nickName = uni.getStorageSync('nickName');

let orderStatusCount = ref();

let orderBtnList = ref([
	{
		url: '/static/my/tuisongshezhi.png',
		text: '待推送',
		badge: 1,
		type: 'error',
	},
	{
		url: '/static/my/wenjianshengchengguize.png',
		text: '待生成',
		badge: 1,
		type: 'error',
	},
	{
		url: '/static/my/31daifahuo.png',
		text: '待发货',
		badge: 1,
		type: 'error',
	},
	{
		url: '/static/my/yiwancheng.png',
		text: '已完成',
		badge: 1,
		type: 'error',
	},
]);

let expandBtnList = ref([
	{
		url: '/static/my/wodeshoucang.png',
		text: '我的收藏',
		badge: 0,
		type: 'error',
	},
	{
		url: '/static/my/shouhuodizhi.png',
		text: '收货地址',
		badge: 0,
		type: 'error',
	},
	{
		url: '/static/my/consignee.png',
		text: '收货人',
		badge: 0,
		type: 'error',
	},
]);

let initOrderCount = () => {
	orderCount().then((res: any) => {
		if (res.data.code === 200) {
			orderStatusCount.value = res.data.data.order;
			orderBtnList.value[0].badge = orderStatusCount.value.unpush;
			orderBtnList.value[1].badge = orderStatusCount.value.unproduction;
			orderBtnList.value[2].badge = orderStatusCount.value.undeliver;
			orderBtnList.value[3].badge = orderStatusCount.value.uncompleted;
		}
	});
};
initOrderCount();
let change = (e: any) => {
	let index = e.detail.index;
	switch (index) {
		case 0:
			uni.navigateTo({ url: './collection' });
			break;
		case 1:
			uni.navigateTo({ url: './address' });
			break;
		case 2:
			uni.navigateTo({ url: './consignee' });
			break;
	}
};

let handleOrderTypeChange = (e: any) => {
	let index = e.detail.index + 1;
	uni.navigateTo({ url: '/pages/order/orderList?showType=' + index });
};

let showAllOrder = () => {
	uni.navigateTo({ url: '/pages/order/orderList' });
};

let toSetting = () => {
	uni.navigateTo({ url: './setting' });
};
</script>

<style lang="scss" scoped>
.profile-container {
	.profile-info {
		height: 200rpx;
		margin-top: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;

		.profile-avatar {
			padding: 50rpx 40rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				overflow: hidden;
				border-radius: 50%;
			}
		}

		.profile-nickname {
			flex: auto;
			margin-top: 50rpx;
			margin-left: 10rpx;

			text {
				font-weight: bold;
				font-family: 'Helvetica Neue', Helvetica, sans-serif;
			}
		}
	}

	.order-center,
	.function-expand {
		margin-top: 15rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		.order-more {
			margin-right: 20rpx;
		}
		.grid-item-box {
			font-size: 24rpx;
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0;
			.grid-item-box-row {
				flex: 1;
				// position: relative;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: row;
				align-items: center;
				justify-content: center;
				//padding: 15px 0;
			}
			.grid-dot {
				position: absolute;
				top: -5rpx;
				right: 25rpx;
			}
		}
	}

	.function-expand {
		padding: 15rpx 0;
		//font-size: 24rpx;
	}

	.function-list {
		padding-top: 15rpx;
		border-radius: 20rpx;
	}
}
.image {
	width: 25px;
	height: 25px;
}
</style>
