<script setup>
	import {
		ref,
		defineProps,
	} from 'vue'
	// 状态栏
	import statusBar from '@/components/header/statusBar'
	// 
	const props = defineProps({
		detail: {
			type: Object,
			default: {}
		}
	})
	// 顶部激活
	const headerActive = ref(false)
	const share_more = ref(null)
	const more_share_data = ref([])
	// 分享弹窗
	const more_share = {
		more: [
			// {
			// 	icon: '/static/news.png',
			// 	title: '信息'
			// },
			{
				icon: '/static/home.png',
				title: '回到首页',
				event: () => {
					uni.switchTab({
						url: '/pages/shop/shop'
					})
				}
			},
			{
				icon: '/static/individual.png',
				title: '个人中心',
				event: () => {
					uni.switchTab({
						url: '/pages/mine/mine'
					})
				}
			},
			{
				icon: '/static/order.png',
				title: '我的订单',
				event: () => {
					uni.redirectTo({
						url: '/pages/shop/order/index'
					})
				}
			}
		],
		share: [{
				icon: '/static/linkage.png',
				title: '复制链接'
			},
			{
				icon: '/static/download.png',
				title: '保存图片'
			}
		]
	}

	// 打开
	function open(val) {
		more_share_data.value = more_share[val]
		share_more.value.open()
	}

	/**
	 * 列表项事件
	 * @param {Object} item
	 */
	function handleItem(item) {
		if (item.event) item.event()
	}

	// 返回
	function goBack(url) {
		// 获取当前页面栈
		const pages = getCurrentPages();

		// 判断是否存在上一页
		if (pages.length > 1) {
			return uni.navigateBack({
				delta: 1
			})
		} else {
			return uni.reLaunch({
				url: url
			})
		}
	}

	defineExpose({
		headerActive,
	})
</script>

<template>
	<view class="apex pf t0 l0 r0" :class="{'active': headerActive}">
		<!-- 状态栏 -->
		<statusBar />

		<view class="head rows plr30">
			<view class="side">
				<image @click="goBack('/pages/shop/shop')" class="back wh55" src="/static/back.png" />
			</view>

			<view class="main f1 tac">
				<text>销量: {{detail.sales}}</text>
			</view>

			<view class="side df fdr jcr">
				<!-- <image @click="open('share')" class="share wh55" src="/static/share1.png" /> -->
				<image @click="open('more')" class="more wh55 ml20" src="/static/more.png" />
			</view>
		</view>
	</view>

	<!-- 详情 -->
	<uni-popup ref="share_more" type="bottom">
		<view class="menuAlt popBot">
			<view class="main df ptb40">
				<view class="item ver" v-for="(item, index) in more_share_data" :key="index" @click="handleItem(item)">
					<image class="wh100" :src="item.icon" />
					<view class="title mt10">
						<text class="txt c666 f8">{{ item.title }}</text>
					</view>
				</view>
			</view>

			<view class="btn lg bar mlr30 mtb30 bfff" @click="share_more.close()">
				<text class="c333">取消</text>
			</view>
		</view>
	</uni-popup>
</template>

<style lang="scss" scoped>
	// 顶部
	.apex {
		z-index: 10;
		background-color: #ffffff00;

		.head {
			.side {
				width: 150rpx;
			}

			.main {
				opacity: 0;
				transition: .1s;
			}
		}

		// 激活的
		&.active {
			background-color: #fff;

			.main {
				opacity: 1;
			}
		}
	}

	// 菜单弹窗
	.menuAlt {
		background: #F0F0F0;

		.main {
			height: 400rpx;
		}

		.item {
			width: 150rpx;
		}
	}
</style>