<template>
	<view class="uni-page mine">
		<u-navbar title="个人中心" leftIconSize="0" bg-color="transparent" placeholder></u-navbar>
		<MineHeader></MineHeader>
		<view class="mine-inner">
			<!-- 开通会员 -->
			<view class="open-member">
				<view class="open-member-hd">
					<template v-if="userInfo.vip_end">
						<view class="open-member-hd-left">
							<image class="open-member-hd-left-vip" src="../../static/mine/m_member_vip.png" mode="">
							</image>
							<text>会员到期时间</text>
						</view>
						<view class="open-member-hd-right" @click="jumpPage('/pages/mine/openMember')">
							<text>有效期至{{ userInfo.vip_end }}</text>
						</view>
					</template>
					<template v-else>
						<view class="open-member-hd-left">
							<image class="open-member-hd-left-vip" src="../../static/mine/m_member_vip.png" mode="">
							</image>
							<text>开通会员功能</text>
						</view>
						<view class="open-member-hd-right" @click="jumpPage('/pages/mine/openMember')">
							<text>享受更多特权</text>
							<u-icon name="arrow-right" size="14" color="#6D3B00"></u-icon>
						</view>
					</template>
				</view>
				<!-- 钱包 -->
				<view class="open-member-bd">
					<view class="open-member-bd-left">
						我的钱包
					</view>
					<view class="open-member-bd-right">
						￥ {{ userInfo.money }}
						<!-- <text>我的钱包</text>
						<u-icon name="arrow-right" size="14" color="#ababab"></u-icon> -->
					</view>
				</view>
			</view>

			<!-- 订单 -->
			<view class="order-entrance">
				<view class="order-entrance-title">
					我的订单
				</view>
				<view class="order-entrance-list">
					<view class="order-entrance-list-item" v-for="item in order" :key="item.label"
						@click="jumpPage(item.path)">
						<view class="order-entrance-list-item-value">
							<text class="number">{{ orderNum[item.type] || 0 }}</text>
							<text class="unit">件</text>
						</view>
						<view class="order-entrance-list-item-label">
							{{ item.label }}
						</view>
					</view>
				</view>
			</view>

			<!-- 菜单 -->
			<view class="menu">
				<view class="menu-item" v-for="item in menuList" :key="item.label" @click="jumpPage(item.path)">
					<view class="menu-item-inner">
						<view class="menu-item-icon">
							<!-- <component :is="item.icon" size="20"></component> -->
							<u-icon :name="item.icon" size="20"></u-icon>
						</view>
						<view class="menu-item-text">
							<view class="label">
								{{ item.label }}
							</view>
							<view class="desc">
								{{ item.desc }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MineHeader from './components/MineHeader.vue';
	import {
		getOrderList,
		getUserInfo
	} from '@/request/yyf.js';
	export default {
		components: {
			MineHeader,
		},
		data() {
			return {
				order: [{
						label: '待付款',
						type: '0',
						path: '/pages/mine/mineOrder?type=0'
					},
					{
						label: '待寄出',
						type: '1',
						path: '/pages/mine/mineOrder?type=1'
					},
					{
						label: '已寄出',
						type: '2',
						path: '/pages/mine/mineOrder?type=2'
					},
					{
						label: '被退回',
						type: '3',
						path: '/pages/mine/mineOrder?type=3'
					},
					{
						label: '已取消',
						type: '4',
						path: '/pages/mine/mineOrder?type=4'
					},
				],
				menuList: [
					// { label: '邀请有礼', path: '', icon: 'share-square', desc: '邀请好友获取收益' },
					{
						label: '地址管理',
						path: '/pages/address/address',
						icon: 'map',
						desc: '添加收件地址'
					},
					{
						label: '我的优惠券',
						path: '/pages/coupon/coupon',
						icon: 'coupon',
						desc: '查看我的优惠券'
					},
					// { label: '咨询客服', path: '', icon: 'server-fill', desc: '在线咨询客服' },
					{
						label: '系统设置',
						path: '/pages/setting/setting',
						icon: 'setting',
						desc: '基本资料设置'
					},
					// { label: '关于我们', path: '', icon: 'error-circle', desc: '公司基本介绍' },
				]
			}
		},
		computed: {
			userInfo() {
				return this.$storeMine.userInfo;
			},
			orderList() {
				return this.$storeMine.orderList;
			},
			orderNum() {
				return this.$storeMine.orderNum;
			},
			prevTime() {
				let {
					prevtime
				} = this.userInfo;
				const date = new Date(prevtime * 1000);
				const year = date.getFullYear(); // 获取年份
				const month = date.getMonth() + 1 > 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1); // 获取月份，需要加1
				const day = date.getDate() > 10 ? date.getDate() : '0' + date.getDate(); // 获取日期
				const hour = date.getHours() > 10 ? date.getHours() : '0' + date.getHours(); // 获取小时
				const minute = date.getMinutes() > 10 ? date.getMinutes() : '0' + date.getMinutes(); // 获取分钟
				const second = date.getSeconds() > 10 ? date.getSeconds() : '0' + date.getSeconds(); // 获取秒数

				const formattedDate = `${year}-${month}-${day}`; // 拼接成格式化后的日期字符串

				return formattedDate
			}
		},
		onShow() {
			this.$actionsMine.onGetuserInfo();
			this.$actionsMine.onGetOrderNum();
		},
		methods: {
			jumpPage(path) {
				// console.log(path);
				path && this.$Router.push(path);
			},
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-icon {
		display: inline-block;
	}

	.mine-inner {
		.open-member {
			height: 210rpx;
			background: url(../../static/mine/m_member_bg.png) center/100% no-repeat;

			.open-member-hd {
				padding: 17rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.open-member-hd-left {
					display: flex;
					align-items: center;

					&-vip {
						width: 46rpx;
						height: 40rpx;
					}

					text {
						padding-left: 27rpx;
						line-height: 1;
						font-family: PingFang SC-Bold, PingFang SC;
						font-size: 26rpx;
						font-weight: 600;
						color: #6D3B00;
					}
				}

				.open-member-hd-right {
					cursor: pointer;
					display: flex;
					align-items: center;

					text {
						padding-right: 10rpx;
						line-height: 1;
						font-family: PingFang SC-Bold, PingFang SC;
						font-size: 24rpx;
						color: #6D3B00;
					}
				}
			}

			.open-member-bd {
				display: flex;
				align-items: center;
				justify-content: space-between;

				margin-top: 20rpx;
				padding: 0 30rpx;
				height: 130rpx;
				background-color: #fff;
				border-radius: 40rpx;

				&-left {
					font-size: 34rpx;
					font-family: OPPOSans-bold, OPPOSans;
					font-weight: bold;
					color: #111111;
				}

				&-right {
					display: flex;
					align-items: center;

					text {
						padding-right: 10rpx;
					}

					cursor: pointer;
					font-size: 24rpx;
					font-family: PingFang SC-Bold,
					PingFang SC;
					color: #ababab;
				}
			}
		}

		.order-entrance {
			box-sizing: border-box;
			margin-top: 26rpx;
			height: 260rpx;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			padding: 30rpx 40rpx;

			.order-entrance-title {
				padding-bottom: 45rpx;
				font-size: 34rpx;
				font-family: OPPOSans-bold, OPPOSans;
				font-weight: bold;
				color: #333333;
			}

			.order-entrance-list {
				cursor: pointer;
				display: flex;

				.order-entrance-list-item {
					flex: 1;
					text-align: center;

					&-label {
						padding-top: 18rpx;
						font-size: 26rpx;
						font-family: OPPOSans-Medium, OPPOSans;
						font-weight: 500;
						color: #333333;
					}

					&-value {
						.number {
							font-size: 34rpx;
							font-family: OPPOSans-Medium, OPPOSans;
							font-weight: 500;
							color: #CE7A2C;
						}

						.unit {
							padding-left: 5rpx;
							font-size: 24rpx;
							font-family: OPPOSans-Medium, OPPOSans;
							font-weight: 500;
							color: #CE7A2C;
						}
					}
				}
			}
		}

		.menu {
			display: flex;
			flex-wrap: wrap;
			margin: 0 -10rpx;

			.menu-item {
				margin-top: 10px;
				box-sizing: border-box;
				padding: 0 10rpx;
				width: 50%;

				.menu-item-inner {
					cursor: pointer;
					box-sizing: border-box;
					padding: 37rpx 39rpx;
					background-color: #fff;
					border-radius: 40rpx;
					display: flex;

					.menu-item-icon {
						padding-right: 12rpx;
					}

					.menu-item-text {
						.label {
							font-size: 26rpx;
							font-family: OPPOSans-Medium, OPPOSans;
							font-weight: 500;
							color: #111111;
							line-height: 1;
						}

						.desc {
							padding-top: 10rpx;
							font-size: 20rpx;
							color: #ababab;
							line-height: 1;
						}
					}
				}
			}
		}
	}
</style>