<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import sellerHeader from "../../seller-header.vue"
import { VueDraggable } from "vue-draggable-plus"
import selectMenu from '@/component/modules/selectMenu.vue'
import { Https } from '@/tool/https'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'

//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
})
const store = useStore()
const route = useRoute()
const domSize = ref('Small')
const domSizeList = ref([
	{
		label:'Small',
		value:'Small',
	},
	{
		label:'Medium',
		value:'Medium',
	},
	{
		label:'Large',
		value:'Large',
	},
])
const router = useRouter()
const list = ref([
])
const showList = ref([])
const chooseList = ref([])
const chooseItem = (item:any)=>{	
	chooseList.value.push(item)
}

const next = ()=>{
	if(chooseList.value.length == 0)return
	let designItemIds = chooseList.value.map((item:any)=>({designOutfitUrl:item.designOutfitUrl,designItemId:item.id}))
	router.push({	
		path:'/home/seller/myListings/edit',
		state: {
			id:route.params.collectionId,
			designItemIds,
		}
	})
}

const config = ref({
	"data-container-type": "root",
	"data-parent-id": "null",
	animation: 250,
	handle: ".item", // 可拖动的元素
	"ghost-class": "ghost", // 拖动时的类名
	"chosen-class": "chosen", // 选中时的类名
	"drag-class": "drag", // 拖动时的类名
	"swap-threshold": 0.5,
	"empty-insert-threshold": 5,
	"force-fallback": false,
	"fallback-tolerance": 3,
	"scroll-sensitivity": 100,
	"scroll-speed": 10,
	onEnd: (e) => {}
})


let resizeObserver = null as any

const gap = ref({
	Small: '16px',
	Medium: '24px',	
	Large: '30px',
})
//根据宽度设置列表宽度
let upDataDomWidthTime = null as any
const listingsBoxRef = ref(null) as any
const setDomSize = (width: number)=>{
	if(!listingsBoxRef.value)return
	let listDom = listingsBoxRef.value.querySelector('.list')
	let listItemDom = listDom.querySelector('.item')
	let offsetWidth = listItemDom.getBoundingClientRect().width
	let lineNum = Math.floor(width / offsetWidth)
	let itemNum = Math.floor((width - (lineNum - 1) * parseInt(gap.value[domSize.value])) / offsetWidth)
	listDom.style.maxWidth = ((itemNum - 1) * parseInt(gap.value[domSize.value]) + itemNum * (offsetWidth)) + 'px'
}

const changeDomSize = ()=>{
	setTimeout(()=>{
		setDomSize(listingsBoxRef.value.clientWidth)
	},350)
}
const changeGender = ()=>{

}
const setShowList = ()=>{
	if(gender.value == 'All'){
		showList.value = list.value
	}else{
		showList.value = list.value.filter((item:any)=>item.sex == gender.value)
	}
}
const getCollectionDetail = ()=>{
	store.commit("set_loading", true)
	let moduleList = [] as any
	moduleList = ['design',]
	let value:any = {
		"id":route.params.collectionId,
		"moduleList":moduleList,
	}
	Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
		list.value = rv.design.userLikeDetails
		setShowList()
		store.commit("set_loading", false)
	}).catch(()=>{	
		store.commit("set_loading", false)
	})
}
onMounted(()=>{
	// 创建观察器
	nextTick(()=>{
		resizeObserver = new ResizeObserver((entries) => {
			for (const entry of entries) {
				// 获取元素尺寸
				const width = entry.contentRect.width
				if(upDataDomWidthTime)clearTimeout(upDataDomWidthTime)
				upDataDomWidthTime = setTimeout(()=>{
					setDomSize(width)
				},200)
			}
		})
		// 开始监听
		if(resizeObserver)resizeObserver.observe(listingsBoxRef.value)
	})
	getCollectionDetail()
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="create-select-item">
		<seller-header
			title="Select Collection"
			:breadcrumbs="[
				{title:'My Listings', name:'myListingsIndex'},
				{title:'Select Collection', name: 'myListingsSelect' },
				{title:'Select Sketch', name: 'myListingsSelectItem' }
			]"
		>
			<template #right>
				<div class="header-right">
					<div class="chooseNum">
						{{ chooseList.length }} sketches selected
					</div>
					<div class="button" @click="next">
						<span>Next</span>
						<div class="icon">
							<i class="fi fi-rr-arrow-small-right"></i>
						</div>
					</div>
				</div>
			</template>
		</seller-header>
		<div class="content" ref="listingsBoxRef">
			<div class="title">
				<div class="left">
						<i class="fi fi-rs-comments"></i>
						<span>Active Listings</span>
				</div>
				<div class="right">
					<div class="generalModel_state">
						<div>
							<selectMenu 
								:selectList="domSizeList" 
								@change="changeDomSize" 
								:isBtnOpen='true'
								:style="{
									'border-radius':'0rem',
									'border':'none',
									'font-weight': '900',
									'line-height': '3rem',
									'height': '3rem',
									'background': 'rgba(0,0,0,0)',
								}"
								v-model:select="domSize"
								>
								<template v-slot:btnText>
									{{ $t('Header.Size') }}
								</template>
							</selectMenu>
						</div>
					</div>
				</div>
			</div>
			<VueDraggable
				v-model="showList"
				class="list"
				:class="domSize"
				v-bind="config"
				:style="{gap: gap[domSize] || '1.6rem'}"
				:group="{
					name: 'sortable',
					pull: false,
					put: true
				}"
			>
				<div v-for="v in list" :key="v.id" 
					:draging="true" 
					class="item" 
					@click="chooseItem(v)"
					:class="{'active':chooseList.some(item => item.id === v.id)}"
				>
					<div class="choose">
						<i class="fi fi-rr-check"></i>
					</div>
					<img :src="v.designOutfitUrl || v.url" alt="">
				</div>
			</VueDraggable>
		</div>
	</div>
</template>
<style scoped lang="less">
	.create-select-item {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
		.header-right{
			display: flex;
			.chooseNum{
				font-family: pingfang_regular;
				font-weight: 400;
				font-size: 1.6rem;
				line-height: 140%;
				margin-right: 2rem;
				line-height: 6rem;
			}
			.button {
				width: 12.3rem;
				height: 6rem;
				border-radius: 4rem;
				display: flex;
				border: 1.5px solid #000000;
				background-color: #000;
				color: #fff;
				transition: all .3s;
				gap: .8rem;
				align-items: center;
				justify-content: center;
				font-size: 1.6rem;
				cursor: pointer;
				i{
					color: #fff;
					display: flex;
					font-size: 1.6rem;
				}
				&:hover{
					background-color: #fff;
					color: #000;
					i{
						color: #000;
					}
				}
			}
		}
		> .content {
			margin-top: 2rem;
			flex: 1;
			overflow: hidden;
			padding: 2.4rem 3rem; 
			background-color: #f9fafa;
			border-radius: 2rem;
			display: flex;
			flex-direction: column;
			> .title{
				display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 3rem;
				> .left{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-family: pingfang_heavy;
					font-weight: 400;
					font-size: 1.8rem;
					line-height: 130%;
					letter-spacing: 0%;
					gap: 1.2rem;
					> i{
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 2.4rem;
					}
				}
			}
			.list{
				display: flex;
				flex: 1;
				flex-wrap: wrap;
				margin: 0 auto;
				overflow-y: auto;
				align-content: flex-start;
				&::-webkit-scrollbar {
					display: none;
				}
				&.Small{
					--itemWidth: 17rem;
					--itemHeight: 26.1rem;
					--iconFS: 1.4rem;
					--iconWH: 2.4rem;
					--iconTR: 1.2rem;
				}
				&.Medium{
					--itemWidth: 22.6rem;
					--itemHeight: 34.6rem;
					--iconFS: 1.6rem;
					--iconWH: 3rem;
					--iconTR: 1.4rem;
				}
				&.Large{
					--itemWidth: 29.2rem;
					--itemHeight: 44.8rem;
					--iconFS: 2.2rem;
					--iconWH: 4rem;
					--iconTR: 1.62rem;
				}
				> .item{
					width: var(--itemWidth);
					height: var(--itemHeight);
					border-radius: 2rem;
					border: 1.5px solid #C7C7C7;
					// transition: all .3s;
					position: relative;
					overflow: hidden;
					display: flex;
					justify-content: center;
					> .choose{
						display: flex;
						width: var(--iconWH);
						height: var(--iconWH);
						position: absolute;
						background-color: #000;
						border-radius: 50%;
						display: none;
						justify-content: center;
						align-items: center;
						top: var(--iconTR);
						right: var(--iconTR);
						> i{
							color: #fff;
							font-size: var(--iconFS);
							display: flex;
						}
					}
					> img{
						height: 100%;
						object-fit: cover;
					}
					&.active{
						border: 1.5px solid #000;
						> .choose{
							display: flex;
						}
					}
					&:hover{
						border: 1.5px solid #000;
					}
				}
			}
		}
	}
</style>