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

<template>
    <div class="modelNav">
		<div class="modelNav_item" v-for="item,index in designDetail.clothes" :class="{active:(selectDetail && item.id == selectDetail.id)}" @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 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';
export default defineComponent({
    components:{
		position,
    },
	emits:['canvasReload','addSketch'],
    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),
			frontBack:{} as any,
			isEditPattern:inject('isEditPattern') as any
		})
		watch(()=>detailData.frontBack_,(newFollowVue)=>{
			detailData.frontBack = newFollowVue
		})
		const selectDetailItem = (item:any,index:number)=>{
			new Promise((resolve, reject) => {
				if(detailData.isEditPattern.value && detailData.selectDetail?.id){
					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)
				}
			}).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)
		}
		const addSketch = ()=>{
			if(detailData.currentDetailType != 'sketch')store.commit('DesignDetailCopy/setCurrentDetailType','sketch')
			store.commit('DesignDetailCopy/addDesignColthes')
			emit('addSketch')
		}
		// onBeforeUnmount(()=>{
		// 	detailData.selectIndex = -1
		// })
        return{
			...toRefs(detailData),
			selectDetailItem,
			deleteDetailItem,
			addSketch,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .modelNav{
		> .modelNav_item{
			width: 12rem;
			height: 12rem;
			padding: 1rem;
			border-radius: 2rem;
			border: 2px solid #B4B4B4;
			margin-bottom: 1.5rem;
			cursor: pointer;
			position: relative;
			&: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;
				justify-content: center;
			}
		}
	}
</style>