<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import CommodityList from "./commodity-list.vue";
import MerchantInfo from "./merchant-info.vue";
import { useRouter } from "vue-router";
import myEvent from '@/utils/myEvent'
//const props = defineProps({
//})
//const emit = defineEmits([
//])
const router = useRouter()
let data = reactive({
})
const addShopping = (item) => {
	myEvent.emit('addShopping', item)
}
const openDetail = (item) => {	
	router.push({name: 'digitalDetail', params: {id: item.id}})
}
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="brand">
		<div class="header-img">
			<img src="@/assets/images/brand/brandBg.png" alt="">
		</div>
		<div class="content">
			<div class="merchant-info">
				<MerchantInfo></MerchantInfo>
			</div>
			<div class="commodity-list">
				<CommodityList @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>
<style lang="less" scoped>
	.brand{
		width: 100%;
		height: 100%;
		position: relative;
		overflow-y: auto;
		.header-img{
			width: 100%;
			>img{
				width: 100%;
			}
		}
		.content{
			display: flex;
			height: auto;
			align-items: flex-start;
			.merchant-info{
				width: 40rem;
				padding-left: 12.7rem;
				padding-right: 2.7rem;
				height: var(--app-view-height);
				overflow-y: auto;
				position: sticky;
				top: 0;
				&::-webkit-scrollbar{
					width: 0;
					height: 0;
				}
			}
			.commodity-list{
				flex: 1;
				border-left: 0.5px solid #585858;
				border-right: 0.5px solid #585858;
				margin-right: 9rem;
			}
		}
	}
</style>