<script setup>
	/**
	 * 个人中心 商城
	 */
	// 底部菜单
	import {
		ref,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		onReachBottom,
		onPullDownRefresh,
		onShow,
		onLoad,
		onReady,
		onPageScroll,
	} from '@dcloudio/uni-app';
	import {
		useStore
	} from 'vuex'
	// 顶部状态栏
	import statusBar from '@/components/header/statusBar'
	// 未登录状态
	import noLogin from '@/components/login/noLogin'

	// 产品列表
	import productList from '@/components/shop/productList/productList';
	// 底部导航
	import footerMneu from '@/components/footerMenu/footerMenu'
	// 工具库
	import util from '@/common/js/util';
	// 
	import api from '@/api/index.js'

	const {
		proxy
	} = getCurrentInstance()
	// 
	const store = useStore()
	// 用户信息
	const userinfo = computed(() => store.state.userinfo || {})
	// 是否显示顶部
	const showHeader = ref(false)

	onReady(() => {
		util.isLogin().then(rs => {
			proxy.$refs.productListRef.getList()
		})
	})

	onReachBottom(() => {
		proxy.$refs.productListRef.getMoreList()
	})

	onPullDownRefresh(() => {
		proxy.$refs.productListRef.refreshList()
	})

	onPageScroll((ev) => {
		if (ev.scrollTop > 44) showHeader.value = true
		else showHeader.value = false
	})

	// 跳转
	function link(url) {
		uni.navigateTo({
			url,
		})
	}

	function toCustomer() {
		uni.navigateTo({
			url: util.setUrl('/pages/mine/setting/feedback')
		})
	}
</script>

<template>
	<view class="page" v-if="!userinfo.id">
		<statusBar />
		<view class="head rows plr30">
			<view class="side"></view>
			<view class="f1"></view>
			<view class="side">
				<uni-icons type="gear" size="40rpx" color="#333" @click="link('/pages/mine/setting/setting')" />
			</view>
		</view>

		<noLogin class="f1" />
	</view>
	<view class="app" v-else>
		<view class="apex" :class="{ 'active': showHeader }">
			<statusBar />
			<view class="head rows">
				<view class=""></view>
				<view class="">个人中心</view>
				<view class=""></view>
			</view>
		</view>

		<!-- 个人中心 我的卡片 -->
		<view class="shopHeaderBg"></view>

		<!-- 顶部 -->
		<view class="header pr mtb30 mlr20">
			<statusBar />

			<view class="userinfo rows">
				<!-- 左头像 右昵称 收获地址 -->
				<image class="avatar wh130 cir" :src="userinfo.avatar" mode="aspectFill" />
				<view class="info f1 mlr30">
					<view class="nickname f34">{{ userinfo.userNickname }}</view>
					<view class="address df aic mt15 f28 c666" @click="link('/pages/mine/address/index')">
						<image class="wh30 mr10" src="/static/mine-dingwei.png" mode="aspectFill" />
						<text>收货地址</text>
					</view>
				</view>

				<view class="df">
					<!-- 客服 -->
					<image class="ml20 wh40" @click="toCustomer" src="@/static/mine-kefu.png" mode="aspectFill" />
					<!-- 设置 -->
					<image class="ml20 wh40" @click="link('/pages/mine/setting/setting')" src="@/static/mine-shezhi.png"
						mode="aspectFill" />
				</view>
			</view>
		</view>

		<!-- 我的钱包 -->
		<view class="wallet rows mtb10 mlr20 ptb20 plr20 bfff br20" @click="link('/pages/index/wallet/wallet')">
			<!-- 左边 -->
			<image class="wh80" src="@/static/mine-wallet.png" mode="aspectFill" />
			<view class="mlr20 f1 f36 c333">我的钱包</view>
			<!-- 右边 -->
			<view class="right df aic">
				<text>查看余额</text>
				<uni-icons type="right" />
			</view>
		</view>

		<!-- 我的订单 -->
		<view class="container">
			<view class="header mtb20 rows">
				<text class="title c333 f30">我的订单</text>
				<view class="df aic" @click="link('/pages/shop/order/index')">
					<text class="c999 f26 mr20">全部</text>
					<uni-icons type="right" />
				</view>
			</view>

			<view class="main ptb20 f24">
				<view class="item ver" @click="link('/pages/shop/order/index?tabIndex=1')">
					<image src="/static/mine-daifukuan.png" mode="aspectFit" class="wh50" />
					<text class="txt mt10 wsn">待付款</text>
				</view>
				<view class="item ver" @click="link('/pages/shop/order/index?tabIndex=2')">
					<image src="/static/mine-daifahuo.png" mode="aspectFit" class="wh50" />
					<text class="txt mt10 wsn">待发货</text>
				</view>
				<view class="item ver" @click="link('/pages/shop/order/index?tabIndex=3')">
					<image src="/static/mine-daishouhuo.png" mode="aspectFit" class="wh50" />
					<text class="txt mt10 wsn">待收货</text>
				</view>
				<view class="item ver" @click="link('/pages/shop/order/index?tabIndex=6')">
					<image src="/static/mine-daipingjia.png" mode="aspectFit" class="wh50" />
					<text class="txt mt10 wsn">评价</text>
				</view>
				<view class="item ver" @click="link('/pages/shop/order/index?tabIndex=6')">
					<image src="/static/mine-tuikuan_shouhou.png" mode="aspectFit" class="wh50" />
					<text class="txt mt10 wsn">退款/售后</text>
				</view>
			</view>
		</view>

		<!-- 其他功能 -->
		<view class="container">
			<view class="main ptb20 f24">
				<view class="item ver" @click="link('/pages/shop/collect')">
					<image src="/static/mine-wodeshoucang.png" mode="aspectFit" class="wh50" />
					<text class="txt mt10 wsn">商品收藏</text>
				</view>
				<view class="item ver" @click="link('/pages/shop/focusStore')">
					<image src="/static/mine-dianpushoucang.png" mode="aspectFit" class="wh50" />
					<text class="txt mt10 wsn">店铺收藏</text>
				</view>
				<view class="item ver" @click="link('/pages/shop/history')">
					<image src="/static/mine-lishijilu.png" mode="aspectFit" class="wh50" />
					<text class="txt mt10 wsn">历史浏览</text>
				</view>
				<!-- <view class="item ver" @click="link('/pages/shop/coupon')">
					<image src="/static/mine-youhuiquan.png" mode="aspectFit" class="wh50" />
					<text class="txt mt10 wsn">优惠券</text>
				</view> -->
			</view>
		</view>

		<!-- 商家管理 -->
		<view class="container">
			<view class="header ptb10 rows">
				<text class="title c333 f30">商家管理</text>
			</view>

			<view class="main ptb20 f24">
				<template v-if="userinfo.isShop == 0">
					<view class="item ver" @click="link('/pages/shop/settle')">
						<image src="/static/mine-ruzhushangjia.png" mode="aspectFit" class="wh50" />
						<text class="txt mt10 wsn">入驻商家</text>
					</view>
				</template>
				<template v-else-if="userinfo.isShop == 1">
					<view class="item ver" @click="link('/pages/shop/settle')">
						<image src="/static/mine-ruzhushangjia.png" mode="aspectFit" class="wh50" />
						<text class="txt mt10 wsn">店铺管理</text>
					</view>
					<view class="item ver" @click="link('/pages/shop/store/commodities')">
						<image src="/static/mien-dianpuguanli.png" mode="aspectFit" class="wh50" />
						<text class="txt mt10 wsn">商品管理</text>
					</view>
					<!-- <view class="item ver" @click="link('pages/merchant/order/index')">
						<image src="/static/mine-dingdanguanli.png" mode="aspectFit" class="wh50" />
						<text class="txt mt10 wsn">订单管理</text>
					</view> -->
					<!-- <view class="item ver">
						<image src="/static/mine-kehuxiaoxi.png" mode="aspectFit" class="wh50" />
						<text class="txt mt10 wsn">客户消息</text>
					</view> -->
				</template>
			</view>
		</view>

		<!-- 精选 -->
		<view class="recommend mtb20 mlr20">
			<productList ref="productListRef" :choicenessTitle="true" :requestFn="api.shop.getMineUserProList">
			</productList>
		</view>
	</view>

	<!-- 底部导航 -->
	<footerMenu ref="footerMneuRef" page="mine" />
</template>

<style lang="scss" scoped>
	// 
	.apex {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		opacity: 0;
		transition: .2s;

		&.active {
			opacity: 1;
			background-color: #fff;
		}
	}

	// 头部个人资料卡
	.header {
		.avatar {
			background: #D8D8D8;
		}
	}

	// 我的钱包
	.wallet {
		position: relative;

		.right {

			text {
				font-size: 24rpx;
				color: #999999;
				margin-right: 20rpx;
			}
		}
	}

	// 模块
	.container {
		position: relative;
		overflow: hidden;
		margin: 20rpx 20rpx;
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.main {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
		}
	}
</style>