<script setup>
/**
 * 个人中心 商城
 */
// 底部菜单
import {
	ref,
	computed,
} from 'vue'
import {
	onReachBottom,
	onPullDownRefresh,
	onShow,
	onLoad,
	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';
// 
const store = useStore()
// 用户信息
const userinfo = computed(() => {
	let result = store.state.userinfo || {}
	return result
})
// 是否显示顶部
const showHeader = ref(false)

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')
	})
	// let param = {};
	// param.type = 'C2C'
	// param.name = `${props.detail.merName}`
	// param.msgId = `${rs.data.serviceId}`
	// param.isCustomer = true

	// util.toChat(param)
	
	// uni.navigateTo({
	// 	url: util.setUrl('/pages/news/chat/chat', param)
	// })
}
</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 choicenessTitle="true"></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>