aida_front/src/component/DetailCopy/model/modelNav.vue

<template>
   <div class="modelNavBox">
	<div class="modelNav" ref="modelNav" :style="{height:prentHeight}">
		<div class="modelNav_item item" 
			v-for="item,index in designDetail.clothes" 
			:class="{active:(selectDetail && item.id == selectDetail.id)}" 
			@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')" 
			@touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')"
			@click="selectDetailItem(item,index)">
			<i v-if="item?.id != selectDetail?.id" class="fi fi-rr-trash" @click.stop="deleteDetailItem(item?.id)"></i>
			<img :src="item.path" alt="">
		</div>
    </div>
	<div v-show="singleOveral.value == 'overall'" v-if="currentDetailType == 'sketch' || currentDetailType == '' " :class="{active:!selectDetail?.id && currentDetailType == 'sketch'}" class="modelNav_item add" @click="addSketch">
		+
	</div>
   </div>
</template>
<script lang="ts">
import { defineComponent,computed,createVNode,inject,watch,onBeforeUnmount,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined, } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import position from './modelPosition.vue';
import { getMousePosition } from "@/tool/mdEvent"
export default defineComponent({
    components:{
		position,
    },
	emits:['canvasReload','addSketch','deleteItem'],
    setup(props,{emit}) {
        const store = useStore();
		const {t} = useI18n()
		const detailData = reactive({
			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
			frontBack_:computed(()=>store.state.DesignDetailCopy.frontBack),
			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
			isEditPattern:inject('isEditPattern') as any,
			singleOveral:inject('singleOveral') as any,
			getCanvasIfEdit:inject('getCanvasIfEdit')as any,
			modelNav:null as any,
		})
		const collItemSize = reactive({
			collValue:18,
			num:1,
			prentHeight:0 as any,
			padding:10,
			likeStyle:{
				
			},
			itemStyle:{
				width:0,
				height:0,
			},
			collTime:null as any,
			isMove:false,
			elList:[] as any,
			selectIndex:0,
		})
		watch(()=>detailData.designDetail.clothes.length,(newVal)=>{
			nextTick(()=>{
				setItemPosition()
			})
		},{immediate:true})
		const selectDetailItem = (item:any,index:number)=>{
			console.log(detailData?.getCanvasIfEdit?.fun)
			new Promise((resolve, reject) => {
				if(detailData.isEditPattern.value && 
					detailData.selectDetail?.id && 
					detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
				){
					Modal.confirm({
						title: t('collectionModal.jsContent2'),
						icon: createVNode(ExclamationCircleOutlined),
						okText: 'Yes',
						cancelText: 'No',
						mask:false,
						centered:true,
						onOk() {
							resolve(true)
							emit('canvasReload')
						},
						onCancel(){
							resolve(false)
						}
					});
				}else{
					resolve(true)
					emit('canvasReload')
				}
			}).then((rv)=>{
				if(rv)store.commit('DesignDetailCopy/setDesignColthes',item.id)
			})
		}
		const deleteDetailItem = (id:number)=>{
			detailData.designDetail.clothes = detailData.designDetail.clothes.filter((item:any)=>item.id != id)
			detailData.frontBack_.back = detailData.frontBack_.back.filter((item:any)=>item.id != id)
			detailData.frontBack_.front = detailData.frontBack_.front.filter((item:any)=>item.id != id)
			emit('deleteItem')
		}
		const addSketch = ()=>{
			if(detailData.currentDetailType != 'sketch')store.commit('DesignDetailCopy/setCurrentDetailType','sketch')
			store.commit('DesignDetailCopy/addDesignColthes')
			emit('addSketch')
		}



		const designMousedown = (e:any,uniqueId:number,str:string)=>{
			let item:any  = collItemSize.elList.filter((item:any)=>item.uniqueId == uniqueId)[0]
			if(!item)return
			item.el.style.zIndex = 2;
			item.el.style.transition = 'all 0s';
			let startX = e.clientX,
			startY = e.clientY,
			top = item.el.offsetTop;
			collItemSize.isMove = false
			let moveFun = (e:any) => {
				collItemSize.isMove = true
				let X = 0;
				let Y = e.clientY - startY + top;
				item.el.style.left = `${X}px`;
				item.el.style.top = `${Y}px`;
				reRange(item, X, Y,str);
			};
			let mouseUpFun = ()=>{
				document.removeEventListener('mousemove',mouseMove)
				document.removeEventListener('touchmove',touchmove)

				document.removeEventListener('mouseup',mouseUpFun) 
				document.removeEventListener('touchend',mouseUpFun) 
				item.el.style.zIndex = 1;
				item.el.style.transition = 'top .5s';
				moveItem();
				sortDesignCollection()
			}
			let mouseMove = function(event:any){
				let e = getMousePosition(event,false)
				moveFun(e)
			}
			let touchmove = function(event:any){
				let e = getMousePosition(event,true)
				moveFun(e)
			}

			document.addEventListener('mousemove',mouseMove)
			document.addEventListener('touchmove',touchmove)

			document.addEventListener('mouseup',mouseUpFun) 
			document.addEventListener('touchend',mouseUpFun) 
		}
		//排序  从大到小
		const sortDesignCollection = ()=> {
		
		}
		const reRange = (item:any, x:number, y:number,str:string)=>{
			let elList:any = collItemSize.elList
			let index = collItemSize.selectIndex
			let width,height,num
			num = collItemSize.num
			width = collItemSize.itemStyle.width
			height = collItemSize.itemStyle.height
			
			let moveIndex = Math.round(x / (width + 10)) + Math.round(y / (height + 10)) * num;
			moveIndex = elList.length - 1 - moveIndex
			moveIndex = moveIndex < 0 ? 0 : moveIndex;
			moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
			if(moveIndex != index){
				collItemSize.selectIndex = moveIndex;
				let currentSort = item.sort;
				for(let i = 0;i < elList.length;i++){
					if(currentSort < moveIndex){
						if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
							elList[i].sort -= 1;
						};
					}else if(currentSort > moveIndex){
						if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
							elList[i].sort += 1;
						};
					}
				};
				elList[item.index].sort = moveIndex;
				moveItem();
			}
		}
		const moveItem = ()=>{
			let value = collItemSize.num
			for(let i = 0;i < collItemSize.elList.length;i++){
				let height = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.height +collItemSize.padding) + 'px';
				collItemSize.elList[i].el.style.top = height
			}
			setZIndex()
		}
		const setZIndex = ()=>{
			collItemSize.elList.forEach((elItem:any)=>{
				let clothesIndex = detailData.designDetail.clothes.findIndex((item:any)=>item.uniqueId == elItem.uniqueId)
				let clothesId = detailData.designDetail.clothes[clothesIndex].id
				detailData.designDetail.clothes[clothesIndex].priority = elItem.sort
				let frontIndex = detailData.frontBack_.front.findIndex((item:any)=>item.id == clothesId)
				detailData.frontBack_.front[frontIndex].style.zIndex = elItem.sort + 10
				// detailData.frontBack_.back[frontIndex].style.zIndex = elItem.sort + 1
			})
		}
		const setItemPosition = ()=>{
			let parent = detailData.modelNav.offsetWidth
			let elArr = detailData.modelNav.querySelectorAll('.item')
			let value = collItemSize.num
			const htmlFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
			const remValue = 12 * htmlFontSize;
			//子元素宽度 = (父容器总宽度 - (列数-1)*间隙) / 列数
			collItemSize.itemStyle.height = remValue
			collItemSize.elList = []
			let arr:any = detailData.designDetail.clothes
			arr.forEach((item,index) => {item.uniqueId  = `${Date.now()}_${index}`});

			const sortedArray = [...arr].sort((a, b) => a.priority - b.priority);
			const sortMap = {} as any;
			sortedArray.forEach((item, index) => {
				sortMap[item.priority] = index ; // 1, 2, 3, 4...
			});
			for(let i = 0;i < elArr.length;i++){
				collItemSize.elList.push({
					el: elArr[i], 
					// sort: elArr.length - i -1, 
					sort: sortMap[arr[i].priority],
					index: i,
					uniqueId:arr[i]?.uniqueId || 99999,
				});
			}
			collItemSize.prentHeight = (collItemSize.padding + remValue) * elArr.length + 'px'
			moveItem()
		} 
		onMounted(()=>{
			
		})
		// onBeforeUnmount(()=>{
		// 	detailData.selectIndex = -1
		// })
        return{
			...toRefs(detailData),
			...toRefs(collItemSize),
			selectDetailItem,
			deleteDetailItem,
			designMousedown,
			addSketch,
			getMousePosition,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
	.modelNavBox{
		.modelNav_item{
			width: 12rem;
			height: 12rem;
			padding: 1rem;
			border-radius: 2rem;
			border: 2px solid #B4B4B4;
			margin-bottom: 1.5rem;
			cursor: pointer;
			position: absolute;
			background: #fff;
			transition: top .3s;
			&:hover{
				> i{
					display: block;
				}
			}
			> i{
				display: none;
				position: absolute;
				right: 1rem;
				top: 1rem;
				cursor: pointer;
				font-size: 2rem;
			}
			&:last-child{
			    margin-bottom: 0;
			}
			&.active{
				border: 3px solid #000;
			}
			> img{
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
			&.add{
				font-size: 8rem;
				display: flex;
				align-items: center;
				position: absolute;
				justify-content: center;
			}
		}
	}
    .modelNav{
		position: relative;
		width: 12rem;
		
	}
</style>