<script setup>
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance,
		defineExpose,
		computed,
		onBeforeUnmount,
		defineProps,
	} from 'vue';
	// 工具库
	import util from '@/common/js/util.js'
	// api
	import api from '@/api/index.js'
	// 产品详情
	import proDetail from '@/components/shop/detail/detail'
	//底部
	import footerMenu from '@/components/shop/detail/footerMenu';

	const {
		proxy
	} = getCurrentInstance()

	const props = defineProps({
		// 
	})
	// 商品id
	const proId = ref('42')
	// 详情
	const detail = reactive({})
	// 用户信息
	const userinfo = computed(() => uni.$store.state.userinfo || {})

	/**
	 * 初始化
	 * @param {Object} productId 产品id
	 */
	function init(productId) {
		if(productId) proId.value = productId

		// 打开
		open()
		// 获取详情
		getDetail()
		// 添加商品浏览记录
		addBrowsing()
	}

	// 获取详情
	function getDetail() {
		api.shop.productDetail({
			query: {
				userId: userinfo.value.id,
				// 产品id
				productionId: proId.value
			}
		}).then(rs => {
			if (rs.code == 200) {
				Object.assign(detail, {}, rs.data)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 添加商品浏览记录
	function addBrowsing() {
		// 验证登录
		util.isLogin(() => {
			// 添加浏览记录
			api.shop.addBrowsing({
				data: {
					userId: userinfo.value.id,
					goodsId: proId.value
				},
			}).then(rs => {
				if (rs.code != 200) console.log('addbrows err', rs.msg)
			})
		})
	}

	/**
	 * 详情
	 * @param {Object} ev 修改的详情
	 */
	function handleDetail(ev) {
		Object.assign(detail, {}, ev)
	}

	// 打开弹窗
	function open() {
		proxy.$refs.detailAlt.open()
	}

	// 关闭弹窗
	function close() {
		proxy.$refs.detailAlt.close()
	}

	defineExpose({
		init,
		open,
		close,
	})
</script>

<template>
	<uni-popup ref="detailAlt" type="bottom">
		<view class="container popBot">
			<scroll-view class="scroll" :scroll-y="true">
				<view class="main">
					<!-- 获取详情 -->
					<proDetail :id="proId" :detail="detail" />
					
					<!-- 底部 -->
					<footerMenu :detail="detail" @update="handleDetail" />
				</view>
			</scroll-view>
		</view>
	</uni-popup>
</template>

<style lang="scss">
	// 详情
	.container {
		background-color: #f8f8f8;

		.scroll {
			height: 1300rpx;
		}
	}
</style>