<template>
		<a-modal
            class="scaleImage_modal generalModel"
            v-model:visible="scaleImage"
            :footer="null"
            width="78%"
            :maskClosable="false"
            :centered="true"
            :closable="false"
            :mask="true"
			:keyboard="false"
			:destroyOnClose="true"
        >
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
				<svg width="100%" height="100%" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
					</svg>

			</div>
			<div class="generalModel_closeIcon download" @click.stop="download()">
				<i class="fi fi-rr-down-to-line"></i>
			</div>
		</div>
		<div class="scaleImage_content">
			<div v-if="isProductimg" class="productImg_modal">
				<div class="productImg_left generalModel_state">
					<div class="productImg_content_item_title productImg_content_item_title_menu">
						<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
						<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
					</div>
					<!-- <div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
						<span>{{$t('ProductImg.SelectionFunction')}}</span>
					</div> -->
					<!-- 暂时去掉 -->
					<!-- <div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction generalModel_state_item" style="margin-bottom: 1rem;">
						<a-select size="large" style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
					</div> -->
					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
						<span>{{$t('ProductImg.Similarity')}}</span>
					</div>
					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value != 'flux'" class="productImg_content_item_similarity ">
						<a-slider class="system_silder"
							v-model:value="productimgSimilarity"
							:tooltipVisible="false"
							:step="5"
							@afterChange="()=>{}"
							:max="100"
						>
						</a-slider>
						<input style="margin-left: 2rem;" type="number" readonly v-model="productimgSimilarity">
					</div>
					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
						<span>{{$t('ProductImg.RelightDirection')}}</span>
					</div>
					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction generalModel_state_item">
						<!-- <a-slider class="system_silder"
							v-model:value="similarity"
							@afterChange="setSimilarity"
							:tooltipVisible="false"
							:step="5"
						>
						</a-slider> -->
						<a-select size="large" style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
					</div>
					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
						<span>{{$t('ProductImg.Highlight')}}</span>
					</div>
					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_similarity">
						<a-slider class="system_silder"
							v-model:value="productimgBrightenValue"
							:tooltipVisible="false"
							:max="3"
							:min="1"
							:step="0.1"
						>
						</a-slider>
						<input style="margin-left: 2rem;" type="number" readonly v-model="productimgBrightenValue">
					</div>
					<div class="input_border productImg_content_item_generate">
						<div class="input_box">
							<div class="input_box_btnBox">
								<!-- <input
									class="search_input"
									:placeholder="$t('Generate.inputContent1')"
									v-model="productimgSearchName"
									@keydown.enter="getPrductimg()"
								/>
								<i v-show="!productimgIsTextarea" class="fi fi-br-expand" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
								<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i> -->
								<textarea 
									ref="textarea"
									class="textarea "  
									
									:placeholder="$t('Generate.inputContent1')"
									@input="ifMaximumLength" 
									@keydown.enter="getPrductimg()"
									v-model="productimgSearchName"
								></textarea>
							</div>
						</div>
					</div>
					<div class="selectText" v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value == 'flux'">
						<div :title="$t('poseTransfer.hint')" @click="()=>{productimgSearchName = $t('poseTransfer.hint');ifMaximumLength()}">{{ $t('poseTransfer.hint') }}</div>
					</div>
					<div class="generage_btn_box" style="margin-left: auto;">
						<div class="generage_btn started_btn"  v-show="!productimgIsProductimg">
							<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getPrductimg()"></i>
							<div class="icon iconfont icon-xiala" v-show="scaleImageList[scaleImageIndex]?.resultType != 'Relight'" :class="{active:speedState}" @click.stop="openSpeed"></div>
							<div class="content" v-show="speedState">
								<div v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
							</div>
						</div>
						<div class="generage_btn started_btn" v-show="productimgIsProductimg && productimgRemProductimg">
							<i class="fi fi-br-loading" ></i>
						</div>
						<!-- <div class="generage_btn started_btn" v-show="productimgRemProductimg" @click="removeProductimg">
							{{$t('Generate.Close')}}
						</div> -->
					</div>
					<!-- <div class="productImg_content_item_generate_btn input_border">
						<div class="input_box">
							<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
								{{ $t('Generate.Generate') }}
							</div>
							<div v-show="productimgIsProductimg && !productimgRemProductimg" class="generage_btn started_btn" @click="getPrductimg">
								<i class="fi fi-br-loading"></i>
							</div>
							<div v-show="productimgRemProductimg" @click="removeProductimg" class="generage_btn started_btn">
								{{$t('Generate.Close')}}
							</div>
						</div>
					</div> -->
				</div>
			</div>
			<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
				<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
				<generalMiniCanvas v-if="false" :imgUrl="scaleImageList[scaleImageIndex]?.imgUrl || scaleImageList[scaleImageIndex]?.url" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
				<img v-else :style="{'max-width':maxWidth}" :src="scaleImageList[scaleImageIndex]?.imgUrl || scaleImageList[scaleImageIndex]?.url">
				
				<!-- <div class="img_operate_block" v-if="isLike">
					<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
					<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
				</div> -->
			</div>
		</div>
		<div class="scaleImage_nav">
			<div class="nav_left">
				<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
			</div>
			<div class="nav_list" v-mousewheel>
				<div class="nav_centent">
					<img  v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active:index == scaleImageIndex}" :src="item?.imgUrl || item?.url" :key="item.id">
				</div>
			</div>
			<div class="nav_right">
				<i class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
			</div>
		</div>
		<div class="mark_loading" v-show="loadingShow">
				<a-spin size="large" />
			</div>
		<UpgradePlan ref="UpgradePlan"></UpgradePlan>

	</a-modal>
</template>

<script lang="ts">
import { defineComponent, h, ref ,toRefs,createVNode,reactive, computed} from "vue";
import { Https } from "@/tool/https";
import { Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { downloadIamge } from "@/tool/util";
import { useI18n } from "vue-i18n";
import { useStore } from "vuex";
import generalMiniCanvas from "@/component/modules/generalMiniCanvas.vue";
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";

export default defineComponent({
	components:{generalMiniCanvas,UpgradePlan},
	props:{
		productData:{
            type:Object,
			default:{
				similarity:30,
				brightenValue:1,
				upload:'',
			},
		},
		imgType:{
			type:String,
			default:'',
		},
		sex:{
			type:String,
			default:''
		},
		maxWidth:{
			type:String,
			default:'50rem'
		},
	},
    setup(props:any,{emit}) {
		const store = useStore();
		let userDetail:any= computed(()=>{
			return store.state.UserHabit.userDetail
		})
		let {t} = useI18n()
		let productimg = reactive({
			UpgradePlan:null,
			textarea:null as any,
			isProductimg:false,
			productimgSearchName:'',
			productimgIsTextarea:false,
			productimgRemProductimg:false,
			productimgIsProductimg:false,
			productimgSimilarity:props.productData.similarity,
			productimgBrightenValue:props.productData.brightenValue,
			productimgUpload:props.productData.upload,
			productimgRelightDirection:props.productData.RelightDirection,
			productimgRelightDirectionList:props.productData.RelightDirectionList,
		})
		let speed = reactive({
			speedList:[
			] as any,
			speedTypeList:{
				poseTransfer:[
					{
						title:'',
						label:t('speedList.High'),
						value:'',
					},{
						title:'',
						label:t('speedList.generateWx'),
						value:'wx',
					},
				],
				toPorductImg:[
					{
						title:'',
						label:t('speedList.toproductFlus'),
						relightLabel:t('speedList.relightEdit'),
						value:'flux',
					},{
						title:'',
						label:t('speedList.toproductBasic'),
						relightLabel:t('speedList.changeBackground'),
						value:'',
					},
				]
			},
			speedState:false,
			speedData:{
				title:'',
				label:t('speedList.toproductFlus'),
				relightLabel:t('speedList.relightEdit'),
				value:'flux',
			},
		})
		const openSpeed = ()=>{
			speed.speedState = !speed.speedState
			if(speed.speedState){
				document.addEventListener('click',openSpeed)
			}else{
				document.removeEventListener('click',openSpeed)
			}
		}
		const setSpeed = (item:any)=>{
			speed.speedData = item
			speed.speedState = false
			document.removeEventListener('click',openSpeed)
		}
        let scaleImage: any = ref(false);
		let isShowMark = ref(false)
		let loadingShow = ref(false)
		let isComparison = ref(false)
		const visible = ref<boolean>(false);
		const setVisible = (value:any): void => {
			visible.value = value;
		};
		let scaleImageList:any = ref([
			
		])
		let scaleImageMask:any = ref(false)
		let scaleImageIndex:any = ref(0)
		let isLike:any = ref(true)
		let robotAssits:any = ref(0)

		//procuctimg
		let remPrductimgTime:any = null
		let prductimgTime:any = null
		let getPrductimg = ()=>{
			let obj = {
				elementId:scaleImageList.value[scaleImageIndex.value].elementId,
				elementType:scaleImageList.value[scaleImageIndex.value].elementType,
			}
			// let imageStrength = productimg.productimgSimilarity == 100? 95 :productimg.productimgSimilarity
			let imageStrength = 70 / 100 * productimg.productimgSimilarity
			let data:any ={
				direction:productimg.productimgRelightDirection,
				prompt:productimg.productimgSearchName,
				toProductImageVOList:[obj],
				brightenValue:productimg.productimgBrightenValue,
				userLikeGroupId:productimg.productimgUpload.userlikeGroupId,
				imageStrength:(100 - imageStrength)/100,
			}

			productimg.productimgIsProductimg = true
			// remPrductimgTime = setTimeout(()=>{
			// 	productimg.productimgRemProductimg = true
			// },10000)
			let url = Https.httpUrls.relight
			if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
				url = Https.httpUrls.toProduct
			}
			isShowMark.value = true
			Https.axiosPost(url, data).then(
                (rv) => {
					productimg.productimgRemProductimg = true
					isShowMark.value = false
					scaleImageList.value[scaleImageIndex.value].imgUrl = '/image/loading.gif'
					let arr:any = []
					rv.forEach((item:any)=>{
					  arr.push(item.taskId)  
					})
					generateProceedList = rv.map(user => user.taskId);
					// productimg.generateList.unshift(...rv)
					setPrductimg(arr)
                }
            ).catch(res=>{
				isShowMark.value = false
				productimg.productimgIsProductimg = false
				clearInterval(remPrductimgTime)
				productimg.productimgRemProductimg = false
				if(res.errCode === 2){
					Modal.confirm({
						title: res.errMsg,
						icon: createVNode(ExclamationCircleOutlined),
						okText: 'Yes',
						cancelText: 'No',
						mask:false,
						zIndex:99999,
						centered:true,
						onOk() {
							let UpgradePlan:any = productimg.UpgradePlan
							UpgradePlan.init()
						},
						onCancel(){
							
						}
					});
				}

            });
		}
		let generateProceedList:any = []
		let setPrductimg = (dataList:any)=>{
			let data = dataList
			let dataNum = dataList.length
			let state = true
			let url = Https.httpUrls.relightResult
			if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
				url = Https.httpUrls.toProductImageResult
			}
			prductimgTime = setInterval(()=>{
				if(!state)return
				state = false
				Https.axiosPost(url, data).then(
					(rv) => {
						state = true
						if(productimg.productimgIsProductimg){//防止取消后有正在执行的获取状态
							// generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
							let isEnd = false
							if(rv[0].status == 'Success'){
								// rv[0].imgUrl = rv[0].url
								// rv[0].resultType = scaleImageList.value[scaleImageIndex.value]?.resultType
								// scaleImageList.value[scaleImageIndex.value] = rv[0]
								scaleImageList.value[scaleImageIndex.value].imgUrl = rv[0].url
								scaleImageList.value[scaleImageIndex.value].url = rv[0].url
								isEnd = true
								clearInterval(remPrductimgTime)
							}else if(rv[0].status == 'Fail'){
								isEnd = true
							}
							generateProceedList = data
							if(isEnd){
								store.state.store.dispatch('getCredits')
								clearInterval(prductimgTime)
								clearInterval(remPrductimgTime)
								productimg.productimgRemProductimg = false
								productimg.productimgIsProductimg = false
							}
						}
					}
				).catch(res=>{
					clearInterval(prductimgTime)
					clearInterval(remPrductimgTime)
					productimg.productimgIsProductimg = false
					productimg.productimgRemProductimg= false
				});
			},1000)
		}
		let removeProductimg = ()=>{
			productimg.productimgIsProductimg = false
			productimg.productimgRemProductimg= false
			clearInterval(prductimgTime)
			if(generateProceedList){
				// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
				let str = generateProceedList.join(',')
				let data = {
					uniqueId:str,
					userId:userDetail.value.userId,
					type:scaleImageList.value[scaleImageIndex.value]?.resultType
				}
				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
					(rv) => {
						generateProceedList = []
					}
				).catch(res=>{
				});
			}
		}
		let submitBase64Data = async (rv:any)=>{
			loadingShow.value = true
			let isOverlay = false
			await new Promise<void>((resolve, reject) => {
				Modal.confirm({
					title: t('scaleImage.overlayOrNot'),
					icon: createVNode(ExclamationCircleOutlined),
					okText: 'Yes',
					cancelText: 'No',
					mask:false,
					centered:true,
					onOk() {
						resolve()
						isOverlay = true

					},
					onCancel(){
						isOverlay = false
						resolve()
					}
				});
			})
			let data = {
				"base64": rv,
				"category": scaleImageList.value[scaleImageIndex.value]?.categoryValue || scaleImageList.value[scaleImageIndex.value]?.level2Type,
				"gender": props.sex,
				"originalId":scaleImageList.value[scaleImageIndex.value]?.id,
				"isOverride":isOverlay,
				originalIdSource:props.imgType,
				type:props.imgType,
			}
			Https.axiosPost(Https.httpUrls.modifySketch, data).then(
				(rv) => {
					rv.imgUrl = rv.url
					rv.status = 'Success'
					rv.category = scaleImageList.value[scaleImageIndex.value]?.category || rv.category
					rv.categoryValue = scaleImageList.value[scaleImageIndex.value]?.categoryValue || scaleImageList.value[scaleImageIndex.value]?.level2Type
					rv.designType = scaleImageList.value[scaleImageIndex.value]?.designType || null
					isOverlay?(scaleImageList.value[scaleImageIndex.value] = rv):(scaleImageList.value.unshift(rv))
					loadingShow.value = false
					scaleImage.value = false
				}
			).catch(res=>{
				loadingShow.value = false
			});
		}
		const ifMaximumLength = async ()=>{
			await nextTick()
			let textarea = productimg.textarea;
			if(!textarea)return
			const scrollTop = textarea.scrollTop;
			// 2. 计算单行高度
			const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20; // 默认20px
			// 3. 重置高度为1行
			textarea.style.height = lineHeight + 'px';
			// 4. 计算实际需要的高度
			const newHeight = Math.max(lineHeight, textarea.scrollHeight);
			textarea.style.height = newHeight + 'px';
			textarea.scrollTop = scrollTop;
		}
        return {
			t,
			...toRefs(productimg),
			...toRefs(speed),
			openSpeed,
			setSpeed,
            scaleImage,
			isShowMark,
			loadingShow,
			isComparison,
			visible,
			setVisible,
			scaleImageList,
			scaleImageMask,
			scaleImageIndex,
			isLike,
			robotAssits,
			getPrductimg,
			removeProductimg,
			submitBase64Data,
			ifMaximumLength,
        };
    },
    data() {
        return {
            // moodTemplateId: "", //模板id
			isNext:false
        };
    },
	directives:{
		mousewheel:{
			mounted (el) {
				el.addEventListener('wheel',(e:WheelEvent)=>{
					let num = 0
					if(e.deltaY > 0){
						num = 25
					}else{
						num = -25
					}
					el.scrollBy(num, 0);
				})
			}
		},
	},
    mounted() {
    },
    methods: {
		setUserData(item:any){
			this.productimgSearchName = item.prompt
			this.productimgSimilarity = (100 - item.imageStrength * 100) * 100 / 70

			this.productimgRelightDirection = item.direction
			// let list = this.speedTypeList.toPorductImg
			if(this.speedList.length == 0)return
			let modelName = ''
			if(!item.modelName){
				modelName = ''
			}else{
				modelName = item.modelName
			}
			this.speedList.forEach((item:any)=>{
				if(modelName == item.value){
					this.speedData = {...item}
				}
			})
		},
		clearUserData(){
			this.productimgSearchName = ''
			this.productimgSimilarity = 30
			this.productimgRelightDirection = ''
		},
		init(list:any,index:any,dialogueIndex:any){
			this.scaleImage = true
			this.scaleImageList = list
			this.scaleImageIndex = index
			if(dialogueIndex)this.robotAssits = dialogueIndex
			// let scaleImageList = this.store.state.UploadFilesModule.moodboard
			if(this.scaleImageList[index].resultType == "PoseTransfer"){
				this.speedList = this.speedTypeList.poseTransfer
			}else{
				this.speedList = this.speedTypeList.toPorductImg
			}
			// this.speedData = JSON.parse(JSON.stringify(this.speedList[0]))
			document.addEventListener('keydown',this.setKeydown)
			this.setUserData(list[index])
			this.$nextTick()
			this.ifMaximumLength()
		},
		cancelDsign(){
			this.scaleImage = false
			this.scaleImageList = []
			this.scaleImageIndex = 0
			this.isNext = false
			document.removeEventListener('keydown',this.setKeydown)
		},
		lastStep(){
			if(this.productimgIsProductimg) return
			if(this.isNext)return
			let num = this.scaleImageIndex
			if(this.scaleImageIndex <= 0){
			}else{
				num -=1
				this.setImageIndex(num)
			}
		},
		nextStep(){
			if(this.productimgIsProductimg) return
			if(this.isNext)return
			let num = this.scaleImageIndex
			if(this.scaleImageIndex >= this.scaleImageList.length-1){
			}else{
				num += 1
				this.setImageIndex(num)
			}
		},
		download(){
			let url = this.scaleImageList[this.scaleImageIndex].imgUrl || this.scaleImageList[this.scaleImageIndex]?.url
			downloadIamge(url)
		},
		setScaleImageIndex(index:any){
			// this.scaleImageIndex = index
			this.setImageIndex(index)
		},
		setImageIndex(index:any){
			if(this.isNext)return
			let this_ = this
			if(this.imgType == 'Printboard' || this.imgType == 'Sketchboard'){
				this.isNext = true
				new Promise((resolve,reject)=>{
				    Modal.confirm({
						title: this.t('scaleImage.submitCanvas'),
						icon: createVNode(ExclamationCircleOutlined),
						okText: 'Yes',
						cancelText: 'No',
						mask:false,
						centered:true,
						onOk() {
							this_.scaleImageIndex = index
							this_.isNext = false
							resolve('') 
						},
						onCancel(){
							this_.isNext = false
							resolve('') 
						}
					});
				})
			}else{
				this.scaleImageIndex = index
			}
		},
		LikeFile(item:any,str:string){
			let parent:any = this.$parent
			if(this.robotAssits){
				parent.likeFile(item,this.scaleImageIndex,this.robotAssits)
			}else{
				parent.likeFile(item,str)
			}
		},
		setKeydown(event:any){
			if(event.keyCode == 37){
				this.lastStep()
			}else if(event.keyCode == 39){
				this.nextStep()
			}
		},
    },
});
</script>
<style>
.scaleImage_modal{
	overflow: visible !important;
}
</style>
<style lang="less" >
.scaleImage_modal {
	.ant-modal-body {
		display: flex;
		flex-direction: column;
    }
	.scaleImage_content{
		display: flex;
		justify-content: center;
		// margin-top: calc(5rem*1.2);
		// height: 75%;
		height: 100%;
		position: relative;
		.productImg_modal{
			position: relative;
			left: 0;
			z-index: 9;
			width: 24%;
			.productImg_left{
				width: 100%;
				display: flex;
				height: 100%;
				flex-direction: column;
				align-items: stretch;
				flex-wrap: nowrap;
				.input_box_btnBox{
					width: 100%;
				}
				.input_box{
					justify-content: flex-end;
				}
				.productImg_content_item_generate_btn{
					// transform: translateY(100%);
					// position: absolute;
					// bottom: 0;
					width: 100%;
					justify-content: space-around;
					margin-top: 0;
				}
				.productImg_content_item_title{
					font-weight: 600;
					font-size: 1.6rem;
					margin-bottom: 1rem;
					&.productImg_content_item_title_menu{
						margin-bottom: 6rem;
						:deep(.generalMenu_printModel){
							margin: 0;
							width: 100%;
							> div,> ul{
								width: 100%;
							}
						}
						.productImg_content_item_title_menubtn{
							font-size: 1.6rem;
							font-weight: 500;
						}
					}
					&.productImg_content_item_title_similarity{
						// margin-bottom: 8rem;
					}
				}
				.productImg_content_item_Direction{
					padding-bottom: 1rem;
					margin-right: 0;
					margin-bottom: 1rem;
				}
				.selectText{
					margin-bottom: 2rem;
					display: flex;
					width: 100%;
					> div{
						background: #efeff1;
						width: 100%;
						font-size: 1.6rem;
						margin-right: 1.2rem;
						border-radius: 1.6rem;
						cursor: pointer;
						padding: 1.2rem;
						white-space: nowrap; /* 文本不换行 */
						overflow: hidden; /* 溢出部分隐藏 */
						text-overflow: ellipsis; /* 显示省略号 */
						&:hover{
							background: #f5f5f5;
						}
						&:first-child{
							margin-right: 0;
						}
					}
				}
				.productImg_content_item_similarity{
					padding-bottom: 2.4rem;
					display: flex;
					align-items: center;
					input{
						width: 5rem;
						height: 5rem;
						text-align: center;
						font-size: 1.8rem;
					}
				}
			}
		}
		.scaleImage_content_imgBox{
			position: relative;
			// max-width: 70rem;
			width: 100%;
			text-align: center;
			justify-content: center;
			img{
				width: auto;
				height: 100%;
				max-width: 50rem;
				object-fit: contain;
			}
			&.active{
				display: flex;
				img{
					// width: 50%;
					height: 100%;
					object-fit: contain;
					margin: 0 1rem;
				}
			}
			.img_operate_block{
				width: 3.6rem;
				height: 3.6rem;
				background: rgba(0,0,0,0.6);
				border-radius: 50%;
				text-align: center;
				line-height: 3.6rem;
				cursor: pointer;
				margin-bottom: 0.4rem;
				position: absolute;
				right: 2rem;
				top: 2rem;
				opacity: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 99;
				.operate_icon{
					font-size: 1.8rem;
					color: #fff;
					&.fi-sr-heart{
						color: red;
					}
				}
				i{
					display: flex;
					font-size: 1.8rem;
					color: #fff;
				}
			}
		}
		
		
	}
	.scaleImage_content_imgBox:hover{
		.img_operate_block{
			opacity: 1;
		}
	}
	.scaleImage_nav{
		flex: 1;
		margin: calc(2.5rem*1.2) calc(0rem*1.2);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		top: 100%;
		left: 0;
		position: absolute;
		.nav_left,.nav_right{
			cursor: pointer;
			top: 50%;
			i{
				display: flex;
				font-size: 4rem;
				transition: .3s all;
				color: rgba(0, 0, 0, .5);
			}
		}
		// .nav_left{
		// 	left: 0;
		// 	transform: translate(-200%,-50%);
		// }
		// .nav_right{
		//     right: 0;
		// 	transform: translate(200%,-50%);
		// }
		.nav_left:hover,.nav_right:hover{
			i{
				color: rgba(0, 0, 0, 1);
			}
		}
		.nav_list{
			margin: 0 calc(2rem*1.2);
			max-width:  calc(60rem*1.2);
			overflow-y: hidden;
			&.nav_list::-webkit-scrollbar {
				display: none;
			}
			.nav_centent{
				width: auto;
				display: flex;
			}
			img{
				max-width: calc(5rem*1.2);
				max-height: calc(5rem*1.2);
				object-fit: cover;
				object-position: 50%,50%;
				margin-left: calc(1rem*1.2);
				border-radius: calc(1rem*1.2);
				overflow: hidden;
				cursor: pointer;
				padding: calc(.1rem*1.2);
				flex-shrink: 0;
				&.active{
					border: 2px solid #aaaaaa;
				}
			}
			img:nth-child(1){
				margin-left: calc(0rem*1.2);
			}
		}
	}
}
</style>