<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs, onActivated } from "vue";
import CommodityList from "./commodity-list.vue";
import MerchantInfo from "./merchant-info.vue";
import { useRouter } from "vue-router";
import scListNull from '@/views/shoppingCart/sc-list-null.vue'
import { useI18n } from 'vue-i18n'	
import { AddShoppingCart } from '@/api/shoppingCart'
import { ElMessage } from 'element-plus'
import myEvent from '@/utils/myEvent'


// 定义组件名称
defineOptions({
  name: 'digitalItem'
})
//const props = defineProps({
//})
//const emit = defineEmits([
//])
const { t } = useI18n()
const categories = ref(['all'])
const gender = ref(['all'])
const digitalItemRef = ref(null)
const scrollTop = ref(0)
const router = useRouter()
const commodityListRef = ref(null)

const searechTypeList = ref([
	{
		value:'salesVolume',
		label:t('digitalItem.BestSelling')
	},{
		value:'price',
		label:t('digitalItem.Price')
	},{
		value:'updateTime',
		label:t('digitalItem.NewestFirst')
	},
])

const searechType = ref('updateTime')
const addShopping = (item) => {
	console.log(item)
	if(!item.price) return ElMessage.warning(t('brandDetail.addShoppingTip'))
	AddShoppingCart({listingIds:[item.id]}).then((res)=>{
		myEvent.emit('addShopping', item)
	})
}
const openDetail = (item) => {
	scrollTop.value = digitalItemRef.value.scrollTop
	router.push({
		path: '/digitalItem/' + item.id,
	})
}
const handleChange = (val) => {
	categories.value = val.categories
	gender.value = val.gender
	if(categories.value.length == 0 || gender.value.length == 0){
		commodityListRef.value.clearData()
	}else{
		commodityListRef.value.reset()
	}
}
const updateSort = () => {
	commodityListRef.value.reset()
}
onActivated(()=>{
	digitalItemRef.value.scrollTop = scrollTop.value
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
</script>
<template>
	<div class="digitalItem" ref="digitalItemRef">
		<div class="header-img">
			<img src="@/assets/images/digitalItem/digital_item_banner.png" alt="">
			<div class="text">
				<div class="title">{{ $t('digitalItem.title') }}</div>
				<p class="info">{{ $t('digitalItem.info') }}</p>
			</div>
		</div>
		<div class="filters">
			<div class="filter-item">
				<el-select v-model="searechType" @change="updateSort" :placeholder="$t('digitalItem.sortBy')" :teleported="false">
					<template #label="{ label }">
						<span class="header-label">{{ $t('digitalItem.sortBy') }}</span>
						<span class="header-value">{{ label }}</span>
					</template>
					<el-option
						v-for="item in searechTypeList"
						:key="item.label"
						:value="item.value"
						:label="item.label"
					/>
				</el-select>
			</div>
		</div>
		<div class="content">
			<div class="merchant-info">
				<MerchantInfo @change="handleChange"></MerchantInfo>
			</div>
			<div class="commodity-list">
				<CommodityList 
					v-show="commodityListRef?.commodityList?.length > 0 || !commodityListRef?.getListingListData.isNoData" 
					ref="commodityListRef"
					:getListData="{
						designFor: gender[0],
						categories: categories,
						sortField: searechType,
					}"
					@addShopping="addShopping" 
					@openDetail="openDetail"></CommodityList>
				<div v-show="commodityListRef?.commodityList?.length == 0" class="null">
					<sc-list-null 
						nullImage="shopping-cart"
						:showButton="false" 
						:title="$t('digitalItem.noData')"
						:tip="$t('digitalItem.noDataTip')"
					/>
				</div>
				
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>
<style lang="less" scoped>
	.digitalItem{
		width: 100%;
		height: 100%;
		position: relative;
		overflow-y: auto;
		.header-img{
			width: 100%;
			position: relative;
			>img{
				width: 100%;
			}
			> .text{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				> .title{
					font-family: KaiseiOpti-Bold;
					color: #232323;
					font-weight: 700;
					font-size: 4rem;
					line-height: 2.3rem;
					letter-spacing: 0%;
					text-align: center;
				}
				> .info{
					font-family: KaiseiOpti-Regular;
					color: #585858;
					font-size: 1.6rem;
					line-height: 140%;
					margin-top: 1.2rem;
					text-align: center;
				}
			}
		}
		> .filters{
			width: 100%;
			height: 6rem;
			display: flex;
			align-items: center;
			padding: 0 9rem;
			justify-content: flex-end;
			> .filter-item{	
				:deep(.el-select) {
					width: 15rem;
					--el-border-radius-base: 0;
					--el-select-input-color: rgba(0, 0, 0, 0.5);
					--el-select-input-font-size: 1rem;
					.el-select__wrapper {
						font-size: 1.07rem;
						padding: 0 0.7rem;
						line-height: 1;
						min-height: 0;
						height: 2.2rem;

						.header-label {
							font-family: KaiseiOpti-Regular;
							color: rgba(0, 0, 0, 0.5);
							margin-right: 0.6rem;
						}
						.header-value {
							font-family: KaiseiOpti-Bold;
							color: #232323;
						}
					}
					.el-select__popper {
						--el-popper-border-radius: 0;
						border: 0.1rem solid #d0d0d0;
						.el-select-dropdown__list {
							padding: 0;
							> .el-select-dropdown__item {
								margin-bottom: 0.89rem;
								color: #232323;
								font-size: 1.069rem;
								height: 2.68rem;
								line-height: 2.68rem;
								padding: 0 1.4rem;
								&:last-child {
									margin-bottom: 0;
								}
								&.is-selected {
									font-family: KaiseiOpti-Bold;
									background-color: #f4f4f4;
								}
							}
						}
					}
				}

			}
		}
		> .content{
			display: flex;
			height: auto;
			// align-items: flex-start;
			border-top: 0.5px solid #585858;
			.merchant-info{
				width: 38.5rem;
				padding-left: 10.2rem;
				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;
				display: flex;
				position: relative;
				.null{
					flex: 1;
					position: absolute;
					width: 100%;
					height: 100%;
					background-color: #fff;
				}
			}
		}
	}
</style>