aida_front/src/component/Detail/model/index.vue

<template>
    <div class="modelindex">
		<div class="modelindex_left">
			<div class="back" v-show="isEditPattern.value">
				<i class="fi fi-br-angle-left" @click="setBack"></i>
			</div>
			<modelNav ref="modelNav" @addSketch="()=>$emit('addSketch')" @sketchSysToLibrary="()=>$emit('sketchSysToLibrary')" @deleteItem="deleteItem"></modelNav>
		</div>
		<div class="modelindex_right" ref="modelindexRight">
			<div class="detail_btn">
				<!-- 全屏 --> 
				<!-- <i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail('2')"></i> -->

				<i class="icon iconfont icon-chehui" @click="revocation"></i>
				<i class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
				<!-- 编辑 -->
				<i class="fi fi-rs-pencil-paintbrush" :title="$t('DesignDetail.editSketchTitle')" :class="{'pointerEventsNone':!selectDetail?.id,active:isEditPattern.value == 'editSketch'}" @click="showDesignImgDetail('editSketch')"></i>
				<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value == 'canvasEditor','pointerEventsNone':!selectDetail?.id}" @click="showDesignImgDetail('canvasEditor')"></i>

				<i class="icon iconfont icon-clothes" :title="$t('Canvas.editFrontBack')" style="font-size: 3.2rem;" @click="showDesignImgDetail('redGreenExample')" :class="{active:isEditPattern.value == 'redGreenExample','pointerEventsNone':!selectDetail?.id}"></i>
				<!-- <i @click="showDesignImgDetail('redGreenExample')" :class="{active:isEditPattern.value == 'redGreenExample','pointerEventsNone':!selectDetail?.id}">
					<SvgIcon name="CClothes" size="30" />
				</i> -->

				<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i> -->
				<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
				<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->

				<!-- 层 -->
				<i :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mousedownDesignImg" @touchstart.passive="mousedownDesignImg" @touchend.passive="mousedownDesignImg">
					<SvgIcon name="DetailCompare" size="30" />
				</i>
				
			</div>
			<position ref="position" @addSketch="()=>$emit('addSketch')" :imgDesignImg=imgDesignImg></position>
		</div>
		
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,inject,onBeforeUnmount,createVNode,toRefs, reactive, onMounted} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { useI18n } from 'vue-i18n'
import position from './modelPosition.vue';
import modelNav from './modelNav.vue';
export default defineComponent({
    components:{
		position,modelNav
    },
	emits:['detailEdit','addSketch','revocation','oppositeRevocation','sketchSysToLibrary'],
    setup(props,{emit}) {
		const {t} = useI18n()
        const store = useStore();
		const detailData = reactive({
			getCanvasIfEdit:inject('getCanvasIfEdit')as any,
			selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
		})
		const setRevocation:any = inject('setRevocation')
		const getDetailListData = reactive({
			designDetail:computed(()=>store.state.DesignDetail.designDetail),
			isEditPattern:inject('isEditPattern') as any,
			imgDesignImg:false,
		})
		const getDetailListDom = reactive({
			libraryList:null as any,
			position:null as any,
			modelindexRight:null as any,
			modelNav:null as any,
		})
		const getSubmitData = (value:any)=>{
			return getDetailListDom.position.getSubmitData(value,)
		}
		const showDesignImgDetail = (str:any)=>{
			emit('detailEdit',str)

			// new Promise((resolve, reject) => {
			// 	if(
			// 		getDetailListData.isEditPattern.value&&
			// 		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('detailEdit',str)
			// 			},
			// 			onCancel(){
			// 				resolve(false)
			// 			}
			// 		});
			// 	}else{
			// 		resolve(true)
			// 		emit('detailEdit',str)
			// 	}
			// })
		}
		const deleteItem = ()=>{
			setRevocation()
		}
		const revocation = ()=>{//撤回
			emit('revocation')
			// getDetailListDom.position.updataPosition()
		}
		const oppositeRevocation = ()=>{//反撤回
			emit('oppositeRevocation')
			// getDetailListDom.position.updataPosition()
		}
	
		//图片按下样子
		const mousedownDesignImg = ()=>{
			getDetailListData.imgDesignImg = !getDetailListData.imgDesignImg
		}
		let time = null as any

		const handleResize = ()=>{ 
			clearTimeout(time)
			time = setTimeout(()=>{
				let data = {
					...getDetailListData.designDetail,
					fromType:'resize',
				}
				store.commit('DesignDetail/setDesignDetail',data)
				getDetailListDom.position?.updataPosition?.()
				getDetailListDom.modelNav?.setItemPosition?.()
				getDetailListDom.position?.updateRect?.()
			},200)
		}
		const updateRect = ()=>{
			getDetailListDom.position?.updateRect?.()
		}
		const setBack = ()=>{
			showDesignImgDetail(getDetailListData.isEditPattern.value)
		}
		let observers = null as any
		onMounted(()=>{
			observers = new ResizeObserver(entries => {
                for (let entry of entries) {
					handleResize()
                }
            });
			observers.observe(getDetailListDom.modelindexRight);
		})
		onBeforeUnmount(()=>{
			observers.disconnect();
		})
        return{
			...toRefs(detailData),
			...toRefs(getDetailListData),
			...toRefs(getDetailListDom),
			getSubmitData,
			showDesignImgDetail,
			revocation,
			deleteItem,
			oppositeRevocation,
			mousedownDesignImg,
			setBack,
			updateRect,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .modelindex{
		width: 100%;
		height: 100%;
		display: flex;
		// padding-top: 3rem;
		flex: 1;
		overflow: hidden;
		.modelindex_right,.modelindex_left{
			display: flex;
			flex-direction: column;
			align-items: center;

			justify-content: center;
		}
		> .modelindex_right{
			flex: 1;
			overflow: hidden;

			> .detail_btn{
				width: 100%;
				display: flex;
				justify-content: space-between;
				border-radius: 1rem;
				padding: .7rem ;
				flex-shrink: 0;
				overflow: hidden;
				// max-height: 4rem;
				position: relative;
				z-index: 99;
				> i{
					font-size: 2rem;
					cursor: pointer;
					// padding: 1.5rem;
					display: flex;
					align-items: center;
					border-radius: .6rem;
					overflow: hidden;
					transition: all .3s;
					width: 4rem;
					height: 4rem;
					justify-content: center;
					&.pointerEventsNone{
						cursor: not-allowed;
						pointer-events: none;
						opacity: 0.6;
					}
					@media (min-width: 1024px) {
						font-size: 2.4rem;
					}
					> img{
						width: 80%;
						color: #fff;
						height: 80%;
					}
				}
				> i:hover{
					background: #000000;
					color: #fff;
				}
				> .active{
					background: #000000;
					color: #fff;
				}	
			}
		}
		.modelindex_left{
			justify-content: center;
			position: relative;
			> .back{
				position: absolute;
				font-size: 3.6rem;
				font-weight: 500;
				display: flex;
				align-items: center;
				margin-bottom: 1.2rem;
				top: 8rem;
				left: 0;
				> i {
					margin-right: 2.8rem;
					font-size: 2rem;
					display: flex;
					cursor: pointer;
					align-items: center;
					width: 4.6rem;
					height: 4.6rem;
					border-radius: 1.2rem;
					display: flex;
					justify-content: center;
					border: 1px solid #D8DADC;
				}
			}
		}
	
	}
</style>