aida_front/src/component/WorksPage/newScaleImage.vue

<template>
		<a-modal
            class="newScaleImage_modal generalModel"
            v-model:visible="scaleImage"
            :footer="null"
            width="78%"
            :maskClosable="false"
            :centered="true"
            :closable="false"
            :mask="scaleImageMask"
			:keyboard="false"
			:destroyOnClose="true"
        >
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cancelDsign('')">
				<i class="fi fi-rr-cross-small"></i>
			</div>
			<!-- <div class="collection_closeIcon" @click.stop="download()">
				<i class="fi fi-rr-down-to-line"></i>
			</div> -->
		</div>
		<div class="newScaleImage_page">
			<div class="newScaleImage_left">
				<div class="newScaleImage_content_right">
					<div class="newScaleImage_content_right_img">
						<div>
							<img v-show="scaleImageIndex > 0" :src="scaleImageList[scaleImageIndex]">
							<div v-show="scaleImageIndex == 0">
								<fullScreenImg :src="scaleImageList[scaleImageIndex]" width="100%" :center="true"></fullScreenImg>
							</div>
							<!-- <img :src="scaleImageData?.canvasUrl"> -->
						</div>
					</div>
					<div class="nav_centent" v-mousewheel="{allLength:scaleImageData.length}" :style="{'margin-top':scaleImageMarginTop}">
						<img class="nav_centent_img" v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active2:index == scaleImageIndex, active3:index == scaleImageIndex+1, active1:index == scaleImageIndex-1}" :src="item" :key="item.id">
					</div>
				</div>
			</div>
			<div class="newScaleImage_right">
				<div class="newScaleImage_right_content">
					<!-- <div class="newScaleImage_right_content_type">
						<div class="generate_item_title_left scaleImage_chunk_title">{{$t('newScaleImage.Type')}}：{{ scaleImageData?.portfolioType=='History'? 'Collection' : 'Printboard' }}</div>
					</div> -->
					<div v-if="true" class="newScaleImage_right_content_collection">
						<div class="scaleImage_chunk_item content_left_collection_detail">
							<!-- <div class="scaleImage_chunk_title">设计模式:</div>
							<div class="scaleImage_chunk_title_intro">
								Overall
							</div> -->
							<!-- <div class="scaleImage_chunk_title_intro">zhh</div> -->
							<div class="detail_right_user detail_left_right_item">
								<!-- <div class="detail_right_user_head">
									<img v-lazy="scaleImageData?.imgUrl">
								</div> -->
								<div class="detail_right_user_content">
									<div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</div>
									<div v-if="scaleImageData.original == 1" class="scaleImage_chunk_title_intro scaleImage_chunk_title_Original">{{$t('newScaleImage.Original')}}</div>
									<div v-else @click="originalGetDetail()" class="scaleImage_chunk_title_intro">{{$t('newScaleImage.from')}}<span :class="{active:scaleImageData.jumpable == 1}"> @{{ scaleImageData.originalUserName }}/{{ scaleImageData.portfolioName }}</span></div>
									<!-- <div class="scaleImage_chunk_title_intro">个性签名</div>
									<div class="scaleImage_chunk_btn">关注</div> -->
								</div>
							</div>
							<div class="scaleImage_chunk_title">
								{{$t('newScaleImage.Title')}}: 
								<span class="scaleImage_chunk_title_intro">{{scaleImageData.portfolioName}}</span>
							</div>
							<div v-show="scaleImageData.portfolioDes" class="scaleImage_chunk_title">
								{{$t('newScaleImage.Describe')}}: <span>{{scaleImageData.portfolioDes}}</span>
							</div>
							<div class="scaleImage_chunk_title_intro">{{scaleImageData.createDate?.split('T')[0]}} {{scaleImageData.createDate?.split('T')[1]}}</div>
							<div class="detail_right_look_operation detail_left_right_item">
								<!-- <div class="detail_left_right_item_click">
									<svg :adminLike="!!true" xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
										<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
									</svg>
									<span>321</span>
								</div> -->
								<div class="detail_left_right_item_click" @click="setPortfolioLike">
									<i v-if="scaleImageData?.isLike == 1" :adminLike="!!true" class="fi fi-sr-thumbs-up" style="color: rgba(158, 158, 167);"></i>
									<i v-else class="fi fi-rr-social-network"></i>
									<span>{{scaleImageData.likeNum}}</span>
								</div>
								<div>
									<i class="fi fi-sr-eye"></i>
									<span>{{scaleImageData.viewNums}}</span>
								</div>
								<div>
									<i class="fi fi-rr-comment-alt-dots"></i>
									<span>{{commentList.length}}</span>
								</div>
								<div v-if="userInfo?.userName === scaleImageData.userName" @click="deletePortfolio" class="detail_left_right_item_click">
									<i class="icon iconfont icon-shanchu operate_icon"></i>
									<!-- <span>{{$t('newScaleImage.Delete')}}</span> -->
								</div>
							</div>
						</div>
						<div v-if="false" class="scaleImage_chunk_item content_left_collection_content" v-show="scaleImageData.openSource == 1">
							<div class="scaleImage_chunk_title">{{scaleImageData.Collection}}</div>
							<div class="content_left_collection_content_list">
								<img v-for="item in scaleImageData?.designPythonOutfitList" v-lazy="item.designUrl">
							</div>
						</div>
						<div v-if="systemUser.value == 1 && scaleImageData.isMine != 1 && scaleImageData.selected != 1" class="started_btn" @click="setChoose" >{{$t('newScaleImage.SecondaryCreation')}}</div>
						<!-- <div v-if="systemUser.value == 1 && scaleImageData.isMine != 1 && scaleImageData.selected != 1" class="started_btn" @click="setChoose" :title="systemUser.value != 1?$t('newScaleImage.jsContent1'): scaleImageData.openSource == 0?$t('newScaleImage.jsContent2'):''" :class="{active:systemUser.value != 1?true:scaleImageData.openSource == 0}">{{$t('newScaleImage.SecondaryCreation')}}</div> -->
					</div>
					<div v-else class="newScaleImage_right_content_generate">
						<div class="scaleImage_chunk_item content_left_generate_item">
							<div class="content_left_generate_item_title">
								<div class="scaleImage_chunk_title">模型：123123</div>
								<div class="generate_item_title_right">
									<img class="generate_item_title_right_img" v-lazy="'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad'" alt="">
								</div>
							</div>
						</div>
						<div class="scaleImage_chunk_item content_left_generate_item content_left_generate_describe">
							<div class="content_left_generate_item_title">
								<div class="scaleImage_chunk_title">describe</div>
								<div class="generate_item_title_right">
									<span class="scaleImage_chunk_btn" @click="setCopy">copy</span>
								</div>
							</div>
							<textarea ref="textarea" :value="generateValue"></textarea>
						</div>
					</div>
				</div>
				<div v-if="false" class="newScaleImage_right_detail">
					<div class="scaleImage_chunk_item">
						
						<div class="detail_right_work_detail detail_left_right_item">
							<!-- <div class="scaleImage_chunk_title">{{ scaleImageData?.portfolioName }}</div> -->
							<!-- <div class="scaleImage_chunk_title_intro">{{ scaleImageData?.portfolioDes }}</div> -->
						</div>
						<div class="detail_right_date detail_left_right_item">
							<div class="detail_right_date_setUp">
								<div>{{$t('newScaleImage.CreationTime')}}</div>
								<span>{{ scaleImageData.createDate }}</span>
							</div>
							<div class="detail_right_date_upData">
								<div>{{$t('newScaleImage.UpdateTime')}}</div>
								<span>{{ scaleImageData.updateDate }}</span>
							</div>
						</div>
						
						<!-- <div class="detail_right_auther detail_left_right_item">
							<div class="scaleImage_chunk_title">Auther Other Products</div>
							<div class="detail_right_auther_img">
								<div class="detail_right_auther_img_item">
									<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
								</div>
								<div class="detail_right_auther_img_item">
									<img src="https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center" alt="">
								</div>
								<div class="detail_right_auther_img_item">
									<img src="https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center" alt="">
								</div>
								<div class="detail_right_auther_img_item">
									<img src="https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center" alt="">
								</div>
								<div class="detail_right_auther_img_item detail_right_auther_img_end">
									<span>more +</span>
								</div>
							</div>
						</div> -->
					</div>
				</div>
				<div class="newScaleImage_right_comment scaleImage_chunk_item">
					<div class="scaleImage_chunk_title">{{$t('newScaleImage.Comment')}}</div>
					<!-- <div v-show="commentList.length === 0" class="newScaleImage_right_comment_null">
						<div class="scaleImage_chunk_title">{{$t('newScaleImage.NoComments')}}</div>
						<div class="scaleImage_chunk_title">{{$t('newScaleImage.first')}}</div>
					</div> -->
					<div class="newScaleImage_right_comment_setComment" @click.stop="">
						<input type="text" ref="commentInputFocus" v-model="commentText" :placeholder="commentInput">
						<div class="detail_left_setComment_btn" @click="setComment">
							<i class="fi fi-ss-paper-plane-top"></i>
						</div>
					</div>
					<div v-show="commentList.length !== 0" class="newScaleImage_right_comment_content">
						<div class="detail_left_content_item" v-for="item,index in commentList" :key="item.id">
							<!-- <div class="detail_left_content_item_img">
								<img v-lazy="scaleImageData?.imgUrl">
							</div> -->
							<div class="detail_left_content_item_content">
								<div class="scaleImage_chunk_title_intro">{{ item?.userName }}</div>
								<!-- <div class="scaleImage_chunk_title_intro">个性签名</div> -->
								<div v-commentUnfold="item" class="scaleImage_chunk_title" :class="[item.detailUnfold?'active':'']"><div>{{ item.comment }}</div></div>
								<div class="scaleImage_chunk_title_intro" style="font-size: 1.2rem;" v>{{ item.createTimes }}</div>
								<div class="detail_left_content_item_btn">
									<div class="left_content_item_reply" @click.stop="setCommentReply(item,'parent')">
										<i class="fi fi-rr-comment-alt-dots"></i>
										{{$t('newScaleImage.reply')}}
									</div>									
									<!-- <div class="left_content_item_thumbs">
										<i class="fi fi-sr-thumbs-up" :adminSix="!!true" style="color: rgb(158, 158, 167);"></i>
										<span>123</span>
									</div>									 -->
									<div class="left_content_item_btn">
										<div class="left_content_item_delete" v-if="userInfo?.userName === item.userName" @click="setDeleteComment(item,index,'')">{{$t('newScaleImage.Delete')}}</div>
										<div class="left_content_item_unfold" @click="()=>item.detailUnfold = !item.detailUnfold">{{item.detailUnfold?$t('newScaleImage.Collapse'):$t('newScaleImage.unfold')}}</div>
									</div>
								</div>
								<div v-if="item.childCommentVOList" class="detail_left_content_item_replyContent_box" :class="[item.unfold?'':'active']">
									<div class="detail_left_content_item_replyContent" v-for="children,childrenIndex in item.childCommentVOList" :key="children.id">
										<div class="detail_left_content_item_img">
											<!-- <img v-lazy="scaleImageData?.imgUrl"> -->
										</div>
										<div class="detail_left_content_item_content">
											<div class="scaleImage_chunk_title_intro">{{ children?.userName }}<span v-if="children?.replyTo" class="replyIcon"></span>{{ children?.replyTo }}</div>
											<!-- <div class="scaleImage_chunk_title_intro">个性签名</div> -->
											<div v-commentUnfold="children" class="scaleImage_chunk_title" :class="[children.detailUnfold?'active':'']"><div>{{ children.comment }}</div></div>
											<div class="scaleImage_chunk_title_intro" style="font-size: 1.2rem;" v>{{ children.createTimes }}</div>

											<div class="detail_left_content_item_btn">
												<div class="left_content_item_reply" @click.stop="setCommentReply(children,'son')">
													<i class="fi fi-rr-comment-alt-dots"></i>
													{{$t('newScaleImage.reply')}}
												</div>									
												<!-- <div class="left_content_item_thumbs">
													<i class="fi fi-sr-thumbs-up" :adminSix="!!true" style="color: rgb(158, 158, 167);"></i>
													<span>123</span>
												</div>									 -->
												<div class="left_content_item_btn">
													<div class="left_content_item_delete" v-if="userInfo?.userName === children.userName" @click="setDeleteComment(children,index,childrenIndex)">{{$t('newScaleImage.Delete')}}</div>
													<div class="left_content_item_unfold" @click="()=>children.detailUnfold = !children.detailUnfold">{{children.detailUnfold?$t('newScaleImage.Collapse'):$t('newScaleImage.unfold')}}</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div v-if="item.childCommentVOList" @click.stop="()=>item.unfold = !item.unfold" class="detail_left_content_item_replyContent_box_btn">
									{{$t('newScaleImage.replyAll')}}
									<div class="icon iconfont icon-xiala" :class="{active:item.unfold}"></div>
								</div>
							</div>
						</div>
						<div class="newScaleImage_right_comment_loading" v-show="!isNoData">
							<span class="page_loading" v-show="!isShowMark"></span>
							<span v-show="isShowMark">
								<a-spin size="large" />
							</span>
						</div>
					</div>
					
				</div>
				
			</div>
			
			<div class="mark_loading" v-show="loadingShow">
				<a-spin size="large" />
			</div>
		</div>
	</a-modal>
</template>

<script lang="ts">
import { defineComponent,watch,getCurrentInstance, createVNode, ref ,toRefs,computed,reactive,triggerRef, nextTick, onMounted} from "vue";
import { Https } from "@/tool/https";
import { getCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
import { useStore } from "vuex";
import { useRouter } from 'vue-router'
import { downloadIamge,setPubDate } from "@/tool/util";
import { Modal,message } from "ant-design-vue";
import { useI18n } from 'vue-i18n';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import fullScreenImg from '@/component/HomePage/fullScreenImg.vue'

export default defineComponent({
    components:{fullScreenImg},
	emits:['deletePorfolio','bbb'],
    setup(props:any,{emit}) {
		let {t} = useI18n()
		//首先在setup中定义
		let userInfo = ref({});
        const store = useStore();
 		const router = useRouter()
        let scaleImage: any = ref(false);//弹窗
		let scaleImageMask:any = ref(false)//弹窗遮罩
		let imgData:any = reactive({
			generateValue:'123123',
			loadingShow:false,
			scaleImageMarginTop:0,
			commentReply:{
				leve1Id:null,
				leve2Id:null,
				name:'',
			},
			scaleImageList:[],
			scaleImageIndex:0,//当前图片索引
			scaleImageData:{},//当前图片内容
			getCommentData:{
				portfolioId:0,
				page:1,
				size:10
			},
			commentText:'',
			commentInput:'',//评论框提示词
			commentList:[],
			isNoData:false,
			isShowMark:false,
		})
		let systemUser = computed(()=>{
			return store.state.UserHabit.systemUser
		})
		let commentInputFocus:any = ref()
		let textarea: any = ref(null)
		let setCopy = ()=>{
			textarea.value.select()
			document.execCommand("copy");
		}
		let init = (item:any)=>{
			scaleImage.value = true
			// let data = list[index]
			getDetail(item,'')
			document.addEventListener('click',removeCommentReply)
			// let scaleImageList = this.store.state.UploadFilesModule.moodboard
		}
		let cancelDsign = (id:any)=>{
			if(id){
				emit('deletePorfolio',id)
			}
			scaleImage.value = false
			imgData.scaleImageIndex = 0
			imgData.scaleImageData = {}
			imgData.commentText = ''
			imgData.scaleImageList = []
			imgData.getCommentData.page = 1
			imgData.getCommentData.size = 10
			document.removeEventListener('click',removeCommentReply)
		}
		let download = ()=>{
			downloadIamge(imgData.scaleImageList[imgData.scaleImageIndex].imgUrl)
		}
		let setScaleImageIndex = (index:any)=>{
			imgData.scaleImageIndex = index
		}
		let LikeFile = (item:any,str:string)=>{
			const currentInstance = getCurrentInstance();
			let parent:any = currentInstance?.parent
			parent.likeFile(item,str)
		}
	
		// LikeFile(item:any,str:string){
		// 	let parent:any = this.$parent
		// 	parent.likeFile(item,str)
		// },
		let getDeatilData = {}
		let originalGetDetail = ()=>{
			if(imgData.scaleImageData.jumpable != 1){
				return message.info(t('newScaleImage.jsContent6'))
			}
			getDetail({id:imgData.scaleImageData.originalPortfolioId},'')
		}
		let getDetail = (value:any,str:string)=>{
			imgData.loadingShow = true
			let data = value
			getDeatilData = value
		    Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
				(rv: any) => {
					imgData.loadingShow = false
					imgData.scaleImageData = rv
					let canvasUrl = [rv.canvasUrl]
					var findUrl = []
					if(rv.designPythonOutfitList){
						findUrl = rv.designPythonOutfitList.map((obj:any) => obj.designUrl);
					}
					imgData.scaleImageList = canvasUrl.concat(findUrl);
					imgData.scaleImageIndex = 0
					imgData.getCommentData.portfolioId = rv.id
					if(str == 'zan'){

					}else{
						getCommentPage('')
						nextTick(()=>{
							let imgParent:any = document.querySelector('.newScaleImage_modal .page_loading')
							new IntersectionObserver(
								(entries, observer) => {
									// 如果不是相交，则直接返回
									// console.log(entries[0]);
									
									if (!entries[0].intersectionRatio) return;
									imgData.getCommentData.size += 10
									getCommentPage('')
								},
								// { root:worksPage }
							).observe(imgParent);
						})
						
					}
				}).catch((res)=>{
					imgData.loadingShow = false
				}
			)
		}
		
		let setChoose = () =>{
			if(systemUser.value.value !== 1){
				return message.info(t('newScaleImage.jsContent1'))
			}
			if(imgData.scaleImageData.openSource == 0){
				return message.info(t('newScaleImage.jsContent2'))
			}
        	router.push({name:'homePage',params: {id:imgData.scaleImageData.id,type:'Works',isDesign:0}})
        	// router.push({name:'homePage',params: {id:imgData.scaleImageData.userLikeGroupSourceId,type:'Works'}})
		}
		let setCommentReply = (value:any,str:any)=>{
				imgData.commentReply.leve1Id = value.id
				imgData.commentReply.leve2Id = null
			if(str == 'son'){
				imgData.commentReply.leve1Id = value.parentLevel1Id
				imgData.commentReply.leve2Id = value.id
			}
			imgData.commentReply.name = value.userName
			imgData.commentInput = `${t('newScaleImage.reply')} ${imgData.commentReply.name}`
			commentInputFocus.value.focus()
		}
		let removeCommentReply = ()=>{
			imgData.commentReply.leve1Id = null
			imgData.commentReply.leve2Id = null
			imgData.commentReply.name = ''
			imgData.commentInput = t('newScaleImage.jsContent3')
		}
		let setComment = ()=>{
			if(!imgData.commentText){
				return message.info(t('LibraryPage.jsContent7'))
			}
			let data = {
				"accountId": 0,
				"comment": imgData.commentText,
				"createTime": "",
				"id": '',
				"isDeleted": 0,
				"parentLevel1Id": imgData.commentReply.leve1Id,
				"parentLevel2Id": imgData.commentReply.leve2Id,
				"portfolioId": imgData.scaleImageData.id,
			}
			Https.axiosPost(Https.httpUrls.portfolioComment, data)
			.then((rv) => {
				imgData.commentText = ''
				getCommentPage({str:'comment',id:imgData.scaleImageData.id})
			})
			.catch((rv) => {
			});
		}
		let getCommentPage = (value:any)=>{
			let data = imgData.getCommentData
			imgData.isShowMark = true
			Https.axiosPost(Https.httpUrls.portfolioCommentPage,data).then(
				(rv: any) => {
					rv.content.forEach((item:any)=>{
						if(value.id == item.portfolioId){
							item.unfold = true
						}
						item.createTimes = setPubDate(item.createTime)
						if (item.childCommentVOList) {
							item.childCommentVOList.forEach((obj:any)=>{
								obj.createTimes = setPubDate(obj.createTime)
							})
						}
					})
					// imgData.commentList.push(...rv.content)
					imgData.commentList = rv.content
					imgData.isShowMark = false
					if(rv.total == rv.content.length&&value?.str != 'comment'){
						imgData.isNoData = true
					}
				}
				).catch((res)=>{
					imgData.isShowMark = false
				}
			)
		}
		let setPortfolioLike = ()=>{
			
			let data = {id:imgData.scaleImageData.id}
			let url 
			if(imgData.scaleImageData.isLike == 1){
				url = Https.httpUrls.portfolioNoLike
			}else{
				url = Https.httpUrls.portfolioLike
			}
			Https.axiosGet(url, {params:data})
			.then((rv) => {
				if(imgData.scaleImageData.isLike == 1){
					imgData.scaleImageData.likeNum -= 1
					imgData.scaleImageData.isLike = 0
				}else{
					imgData.scaleImageData.likeNum += 1
					imgData.scaleImageData.isLike = 1
				}
				// getDetail(getDeatilData,'zan')
			})
			.catch((rv) => {
			});
		}
		let setDeleteComment = (value:any,index:any,childrenIndex:any)=>{
			Modal.confirm({
                    title: t('newScaleImage.jsContent4'),
                    icon: createVNode(ExclamationCircleOutlined),
                    okText: 'Ok',
                    cancelText: 'No',
					mask:false,
                    centered:true,
                    onOk() {
						let data = {
							"accountId": 0,
							"comment": "",
							"createTime": "",
							"id": value.id,
							"isDeleted": 0,
							"parentLevel1Id": 0,
							"parentLevel2Id": 0,
							"portfolioId": imgData.scaleImageData.id,
						}
						Https.axiosPost(Https.httpUrls.commentDelete, data)
						.then((rv) => {
							let commentData = {
								str:'comment',
								id:imgData.scaleImageData.id,
							}
							getCommentPage(commentData)
						})
						.catch((rv) => {
						});
                    },
					onCancel(){
					}
                });
			
		}
		let deletePortfolio = ()=>{
			Modal.confirm({
                    title: t('newScaleImage.jsContent5'),
					icon: createVNode(ExclamationCircleOutlined),
					okText: 'Yes',
					cancelText: 'No',
					mask:false,
					centered:true,
                    onOk() {
						let data = {
							id:imgData.scaleImageData.id
						}
						Https.axiosGet(Https.httpUrls.porfolioDelete, {params:data})
						.then((rv) => {
							cancelDsign(imgData.scaleImageData.id)
						})
						.catch((rv) => {
						});
                    },
					onCancel(){
					}
                });
		}
		watch(()=>imgData.scaleImageIndex,
			(newVal,oldVal)=>{
				let dom:any = document.querySelector('.newScaleImage_left .nav_centent')
				if(!dom) return
				let contentItemHeight = Number(getComputedStyle(dom).getPropertyValue('--snap-size').split('rem')[0]);
				imgData.scaleImageMarginTop = `${contentItemHeight*-(newVal) - contentItemHeight/2}rem`
			}
		)
		onMounted(()=>{
			let user:any = getCookie('userInfo')
			userInfo.value = JSON.parse(user)
		})
        return {
			userInfo,
            scaleImage,
			scaleImageMask,
			...toRefs(imgData),
			systemUser,
			commentInputFocus,
			textarea,
			setCopy,
			init,
			cancelDsign,
			download,
			setScaleImageIndex,
			originalGetDetail,
			LikeFile,
			setChoose,
			setCommentReply,
			deletePortfolio,
			setComment,
			setPortfolioLike,
			setDeleteComment,
        };
    },
	directives:{
		commentUnfold:{
			mounted (el,binding) {
				let parent = el.parentNode
				let commentBtn = parent.querySelector('.left_content_item_unfold')
				let commentDomSon = el.querySelector('div')
				let maxHeight = Number((window.getComputedStyle(el).maxHeight).split('px')[0])
				console.log(commentDomSon.offsetHeight , maxHeight);
				
				if(commentDomSon.offsetHeight > maxHeight){
					commentBtn.style.display = 'block'
				}else if(!binding.value.detailUnfold){
					commentBtn.style.display = 'none'
				}
			},
			// updated (el,binding) {
			// 	let parent = el.parentNode
			// 	let commentBtn = parent.querySelector('.left_content_item_unfold')
			// 	let commentDomSon = el.querySelector('div')
			// 	let maxHeight = Number((window.getComputedStyle(el).maxHeight).split('px')[0])
			// 	console.log(commentDomSon.offsetHeight , maxHeight);
				
			// 	if(commentDomSon.offsetHeight > maxHeight){
			// 		commentBtn.style.display = 'block'
			// 	}else if(!binding.value.detailUnfold){
			// 		commentBtn.style.display = 'none'
			// 	}
				
				
			// }
		},
		mousewheel:{
			mounted (el,binding:any) {
				// let contentHeight = Number(getComputedStyle(el).getPropertyValue('--content-height').split('rem')[0]);
				let contentItemHeight = Number(getComputedStyle(el).getPropertyValue('--snap-size').split('rem')[0]);
				let marginTop = (contentItemHeight*-(binding.instance.scaleImageIndex))-contentItemHeight/2
				binding.instance.scaleImageMarginTop = `${marginTop}rem`
				let move = false
				let parentNode:any = document.querySelector('.newScaleImage_modal .newScaleImage_page')
				el.addEventListener('mouseenter',(e:WheelEvent)=>{
					move = true
					parentNode.style.overflow = 'hidden'
				})
				el.addEventListener('mouseleave',(e:WheelEvent)=>{
					move = false
					parentNode.style.overflow = 'auto'
				})

				el.addEventListener('wheel',(e:WheelEvent)=>{
					if(!move) return
					marginTop = (contentItemHeight*-(binding.instance.scaleImageIndex))-contentItemHeight/2
					if(e.deltaY > 0 && marginTop > -(contentItemHeight*(binding.instance.scaleImageList.length) - contentItemHeight/2)){
						marginTop -= contentItemHeight
					}else if(e.deltaY < 0 && marginTop < -(contentItemHeight/2)){
						marginTop += contentItemHeight
					}
					binding.instance.scaleImageIndex = Math.round(Math.abs(marginTop/contentItemHeight))-1
					binding.instance.scaleImageMarginTop = `${marginTop}rem`
					if(Math.abs(marginTop)>=contentItemHeight*binding.instance.scaleImageList.length-5){
						// binding.instance.scaleImageList.push(...binding.instance.scaleImageList)
					}
				})
				
			}
		},

	},
    data() {
        return {
            // moodTemplateId: "", //模板id
			
        };
    },
    mounted() {
    },
    methods: {
    },
});
</script>

<style lang="less">
.newScaleImage_modal {
	.ant-modal-body{
		padding: 9rem;
	}
	.newScaleImage_page{
		overflow-y: auto;
		height: 100%;
		display: flex;
		&.newScaleImage_page::-webkit-scrollbar{display: none;}
	}
    
	--margin: 3rem;
	--padding: 2rem;
	--border-color: #c4c4c4;
	--background-color:#f5f5f5;
	.scaleImage_chunk_item{
		background: var(--background-color);
		padding: var(--padding);
		border-radius: var(--padding);
		margin-bottom: var(--margin);
	}
	.scaleImage_chunk_btn{
		padding: .5rem 1rem;
		border-radius: 4px;
		border: .2rem solid var(--border-color);
		background: #fff;
		cursor: pointer;
		
	}
	.scaleImage_chunk_title{
		font-size: 2.2rem;
		font-weight: 600;
		color: #000;
		overflow: hidden;
		max-height: 100px;
		text-align: left;
		&.active{
			max-height: max-content;
		}
		span{
			font-size: 1.8rem;
			font-weight: 300;
			color: #535353;
		}
	}
	.scaleImage_chunk_title_comment{
		font-size: 1.6rem;
		font-weight: 600;
		color: #000;
		max-height: 8.5rem;
	    overflow: hidden;
		&.active{
			max-height: max-content;
		}
	}
	.scaleImage_chunk_title_intro{
		font-size: 1.6rem;
		font-weight: 300;
		color: #535353;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
	}
	.detail_right_look_operation{
		display: flex;
		justify-content: space-between;
		width: 100%;
		>div{
			display: flex;
			align-items: center;
			font-size: 2rem;
			i{
				display: flex;
				font-size: 2rem;
				color: #9e9ea7;
			}
			span{
				margin-left: calc(var(--padding) / 2);
			}
		}
	}
	.mark_loading{
		position: absolute;
	}
	.detail_right_user{
		display: flex;
		width: 100%;
		.detail_right_user_content{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			.scaleImage_chunk_title_Original{
				color: #39215b;
				background: #c9a2ff;
				padding: 0 1rem;
				border-radius: 4px;
				font-weight: 600;
			}
			.scaleImage_chunk_title_intro{
				span{
					&.active{
						cursor: pointer;
						color: #39215b;
						text-decoration: underline;
					}
				}
			}
		}
		.detail_right_user_head{
			border-radius: 50%;
			overflow: hidden;
			margin-right: var(--margin);
			img{
				width: 10rem;
				height: 10rem;
				object-fit: cover;
			}
		}
		.detail_right_user_head:hover{

		}
		
	}
	.newScaleImage_left{
		display: flex;
		width: 60%;
		position: sticky;
		top: 0;
		.newScaleImage_content_right{
			--content-height: 60rem;
			display: flex;
			width: 100%;
			flex-wrap: wrap;
			justify-content: space-between;
			// height: var(--content-height);
			height: 100%;
			position: relative;
			overflow: hidden;
			// overflow-y: auto;

			.newScaleImage_content_right_img{
				height: 100%;
				width: 70%;
				margin-left: auto;
				// width: 100%;
				display: flex;
				// justify-content: center;
				justify-content: right;
				overflow-y: auto;
				&.newScaleImage_content_right_img::-webkit-scrollbar{display: none;}
				>div{
					width: 100%;
					height: auto;
					>div{
						width: 100%;
						height: 100%;
					}
					img{
						// width: auto;
						max-width: 100%;
						height: 100%;
						// height: 100%;
						object-fit: contain;
						width: 100%;
						margin-right: 2rem;
					}
					img:last-child{
						margin-right: 0;
					}
				}
				
			}
			--count: 50;
			--snap-size: 10rem;
			--offset: 2;
			.nav_centent{
				// width: auto;
				display: flex;
				flex-direction: column;
				position: absolute;
				right: 0;
				padding-top: calc(var(--content-height) / 2);
				// padding-left: 10rem;
				transition: all .2s;
				left: 0;
				width: 30%;
			}
			.nav_centent_img{
				max-width: calc(var(--snap-size) - 2rem);
				height: calc(var(--snap-size) - 2rem);
				width: calc(var(--snap-size) - 2rem);
				object-fit: contain;
				padding: .5rem 0;
				background-color: #ffffff;
				border: 1px solid #777777;
				object-position: 50%,50%;
				border-radius: calc(1rem*1.2);
				cursor: pointer;
				border-radius: 1rem;
				overflow: hidden;
				// padding: 1rem;
				margin: 1rem;
				flex-shrink: 0;
				position: relative;
				transition: all .1s;
				&.active1{
					// border: 4px solid rgb(148, 230, 255);
					transform: scale(1.4) translateX(30%);
					z-index: 2;
				}
				&.active2{
					// border: 4px solid rgb(216, 255, 172);
					transform: scale(1.6) translateX(60%);
					z-index: 3;
				}
				&.active3{
					// border: 4px solid rgb(148, 233, 183);
					transform: scale(1.4) translateX(30%);
					z-index: 2;
				}
			}
		}
		
	}
	.newScaleImage_right{
		width: 40%;
		padding-left: var(--margin);
		.newScaleImage_right_content{
			display: flex;
			flex-direction: column;
			height: var(--content-height);
			.detail_left_right_item_click{
				cursor: pointer;
				i{
					color: #9e9ea7;
				}
			}
			.generate_item_title_left{
				font-size: 2.4rem;
			}
			.newScaleImage_right_content_type{
				padding: var(--padding) 0;
				margin-bottom: var(--margin);
				border-bottom: .2rem solid var(--border-color);
			}
			.newScaleImage_right_content_collection,.newScaleImage_right_content_generate{
				display: flex;
				flex-direction: column;
				flex: 1;
			}
			.newScaleImage_right_content_collection{
				&.newScaleImage_right_content_collection::-webkit-scrollbar{display: none;}
				text-align: center;
				// .content_left_collection_btn{
				// 	display: flex;
				// 	justify-content: space-around;	
				// }
				.started_btn{
					margin-bottom: var(--margin);
					&.active{
						cursor: no-drop;
					}
				}
				.content_left_collection_detail{
					// height: calc(8rem + var(--padding) * 2);
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;
					.scaleImage_chunk_title{
						margin-right: 1rem;
					}
					>div{
						margin-bottom: .5rem;
					}
				}
				.content_left_collection_content{
					flex: 1;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					
					.content_left_collection_content_list{
						overflow-x: auto;
						display: flex;
						flex: 1;
						width: 100%;
						align-items: center;
						margin-top: var(--padding);
						img{
							height: 30rem;
							width: auto;
							margin-right: var(--margin);
						}
					}
					
				}
			}
			.newScaleImage_right_content_generate{
				.content_left_generate_item{
					
					overflow: hidden;
					.content_left_generate_item_title{
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.generate_item_title_right{
						   
							.generate_item_title_right_img{
								height: 8rem;
								width: auto;
								object-fit: contain;
							}
						}
					}
				}
				.content_left_generate_describe{
					display: flex;
					flex-direction: column;
					flex: 1;
					margin-bottom: 0;
					textarea{
						flex: 1;
						margin-top: var(--padding);
						width: 100% !important;
						height: 10rem !important;
						border-radius: 4rem;
						border: .2rem solid var(--border-color);
						font-size: 1.8rem;
						padding: 1rem;
						color: #575757;
    					outline: none; /* 清除默认焦点样式 */
					}
					textarea:focus{
						border: .2rem solid var(--border-color);
    					outline: none; /* 清除默认焦点样式 */
					}
				
				}
			}
		}
		.newScaleImage_right_detail,.newScaleImage_right_comment{
			height: auto;
			.detail_left_right_item{
				margin-bottom: var(--margin);
			}
			
			.detail_left_right_item:last-child{
				margin-bottom: 0;
			}
		}
		.newScaleImage_right_comment{
			display: flex;
			flex-direction: column;
			padding-bottom: 0;
			>.scaleImage_chunk_title{
			}
			.newScaleImage_right_comment_null,.newScaleImage_right_comment_content{
				flex: 1;
			}
			.newScaleImage_right_comment_null{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				// .scaleImage_chunk_title{
				// 	font-size: 3rem;
				// }
				
			}		
			.newScaleImage_right_comment_content{
				// max-height: 60rem;
				// overflow-y: auto;
				.detail_left_content_item{
					display: flex;
					margin-bottom: var(--margin);
					&.detail_left_content_item:last-child{
						margin-bottom: 0;
					}
					.detail_left_content_item_img{
						border-radius: 50%;
						overflow: hidden;
						width: 5rem;
						height: 5rem;
					}
					.detail_left_content_item_content{
						flex: 1;
						margin-left: 1rem;
						width: calc(100% - 6rem - 1rem);
						.replyIcon{
							width: 0;
							height: 0;
							vertical-align: middle;
							border: .5rem solid transparent;
							border-left: 1rem solid #000;
							border-right: none;
							display: inline-block;
							margin: 0 1rem;
						}
						>div{
							margin-top: .4rem;
							>span{
								margin-right: .5rem;
								color: rgba(122, 97, 220);
							}
						}

						
						.detail_left_content_item_btn{
							display: flex;
							align-items: center;
							margin-top: 1rem;
							.left_content_item_reply,.left_content_item_thumbs,.left_content_item_unfold,.left_content_item_delete{
								cursor: pointer;
							}
							.left_content_item_reply:hover{
								color: #000;
							}
							.left_content_item_thumbs{
								display: flex;
								margin-left: 2rem;
								i{
									font-size: 2rem;
									margin-right: 1rem;
									display: flex;
								}
							}
							.left_content_item_btn{
								margin-left: auto;
								margin-right: 1rem;
								display: flex;
								.left_content_item_delete{
								}
								.left_content_item_unfold{
									margin-left: 1rem;
								}
							}
							
						}
						.detail_left_content_item_replyContent_box{
							overflow: hidden;
							transition: all .3s;
							&.active{
								height: 0;
								margin: 0;
							}
						}
						.detail_left_content_item_replyContent_box_btn{
							cursor: pointer;
							display: flex;
							align-items: center;
							justify-content: center;
							div{
								transition: all .3s;
							}
							.active{
								transform: rotate(180deg);
							}
						}
						.detail_left_content_item_replyContent{
							margin-top: var(--padding);
							display: flex;
						}
					}
				}
			}
			.newScaleImage_right_comment_loading{
				text-align: center;
				>span{
					height: 7rem;
					width: 6rem;
					display: block;
					margin: 0 auto;
				}
			}
			.newScaleImage_right_comment_setComment{
				display: flex;
				align-items: center;
				height: 8rem;
				justify-content: center;
				position: sticky;
				z-index: 2;
				padding-bottom: var(--padding);
				padding-top: var(--padding);
				top: 0;
				background: #f5f5f5;
				input,.detail_left_setComment_btn{
					border-radius: 1rem;
				}
				input{
					padding-left: var(--padding);
					flex: 1;
					height: 100%;
					width: 50%;
					font-size: 2rem;
					margin-right: var(--padding);
					border: .2rem solid var(--border-color);
				}
				.detail_left_setComment_btn{
					cursor: pointer;
					width: 4rem;
					height: 4rem;
					background: rgba(57, 33, 91);
					display: flex;
					align-items: center;
					justify-content: center;
					i{
						color: #fff;
						display: flex;
					}
				}
			}
		}
		.newScaleImage_right_detail{
			
			.detail_right_work_detail{
				.scaleImage_chunk_title_intro{
					margin-top: calc(var(--padding) / 2);
					height: auto
				}
			}
			
			.detail_right_date{
				display: flex;
				justify-content: space-between;
				.detail_right_date_setUp,.detail_right_date_upData{
					width: 45%;
					div{
						font-size: 2rem;
						font-weight: 600;
					}
					span{
						font-size: 1.8rem;
					}
				}
			}
			.detail_right_auther{
				.detail_right_auther_img{
					width: 100%;
					display: flex;
					margin-top: var(--padding);
					--auther_wh: 8rem;
					.detail_right_auther_img_item{
						text-align: center;
						width: var(--auther_wh);
						height: var(--auther_wh);
						flex-shrink: 1;
						margin-right: calc(var(--padding) / 2);
						// margin-right: var(--padding);
						border-radius: var(--padding);
						cursor: pointer;
						overflow: hidden;
						img{
							height: 100%;
							max-width: 100%;
							object-fit: cover;
						}
					}
					.detail_right_auther_img_end{
						margin: 0;
						line-height: var(--auther_wh);
						text-align: center;
						background: #e2e2e2;
						font-size: 1.8rem;
						font-weight: 600;
					}
				}
			}
		}
	}
}
</style>