<template>
	<a-modal
		class="productImg_modal generalModel"
		v-model:visible="productImg"
		:footer="null"
		width="78%"
		:maskClosable="false"
		:centered="true"
		:closable="false"
		:mask="productImgMask"
		: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>
	<div class="productImg_content">
		<div class="modal_title_text">
			<div>{{$t('ProductImg.Finalize')}}</div>
			<div class="modal_title_text_intro"></div>
		</div>
		<div class="productImg_content_bottom">
			<div class="productImg_left">
				<div class="productImg_content_item_title productImg_content_item_title_menu">
					<span>{{$t('ProductImg.MagicTools')}}</span>
					<generalMenu class="productImg_content_item_title_menubtn" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
				</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="searchName"
								@keydown.enter="getPrductimg()"
							/>
							<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="()=>isTextarea = !isTextarea"></i>
							<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="()=>isTextarea = !isTextarea"></i>
						</div>
						<textarea 
							v-show="isTextarea"
							class="search_textarea "  
							@keydown.enter="getPrductimg()"
							v-model="searchName"
						></textarea>
						
					</div>
				</div>
				<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
					<span>{{$t('ProductImg.Similarity')}}</span>
				</div>
				<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_similarity">
					<a-slider class="system_silder"
						v-model:value="similarity"
						@afterChange="setSimilarity"
						:tooltipVisible="false"
						:step="5"
					>
					</a-slider>
					<input type="number" readonly v-model="similarity">
				</div>
				<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
					<span>{{$t('ProductImg.RelightDirection')}}</span>
				</div>
				<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_Direction">
					<!-- <a-slider class="system_silder"
						v-model:value="similarity"
						@afterChange="setSimilarity"
						:tooltipVisible="false"
						:step="5"
					>
					</a-slider> -->
					<a-select  style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
				</div>
				
				<div class="productImg_content_item_title">{{$t('ProductImg.SelectCollection')}}</div>
				<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
					<div class="content_item_imgBox_itemImg" v-for="item in selectList[productimgMenu.value]" :key="item.id" >
						<img @click="setGenerate(item)" v-lazy="item.designOutfitUrl?item.designOutfitUrl:item.url" alt="" :class="{active:item.isChecked}">
						<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
					</div>
				</div>
				<div class="productImg_content_item_title">{{$t('ProductImg.Upload')}}</div>
				<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
					<div class="upload_file_item" v-for="(file, index) in fileList[productimgMenu.value]" :key="file">
						<div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
							<a-spin
								:indicator="indicator"
								tip="Uploading..."
							/>
						</div>
						<div
							class="upload_file_item_content content_item_imgBox_itemImg"
							v-show="file?.status === 'done'"

						>
							<img @click="setGenerate(file)" :src="file?.imgUrl" class="upload_img" :class="{active:file?.isChecked}"/>
							<a-checkbox v-model:checked="file.isChecked"></a-checkbox>
							<!-- <div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
								<i class="fi fi-rr-trash"></i>
							</div> -->
						</div>
					</div>
					<div class="upload_file_item upload_component ">
					<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
						<a-upload
							:action="uploadUrl + '/api/history/toProductImageElementUpload'"
							list-type="picture-card"
							:capture="null"
							:data="{
								...upload,
							}"
							:headers="{ Authorization: token }"
							:before-upload="beforeUpload"
							v-model:file-list="fileList[productimgMenu.value]"
							:multiple="true"
							:maxCount="8"
							accept=".jpg,.png,.jpeg,.bmp"
							@change="(file) => fileUploadChange(file)"
						>
							<div
								class="upload_tip_block"
							>
								<i class="fi fi-br-upload"></i>
								<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
							</div>
						</a-upload>
					</div>
				</div>
				<div class="productImg_content_item_generate_btn input_border">
					<div class="input_box">
						<div v-show="!isProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
							{{ $t('Generate.Generate') }}
						</div>
						<div v-show="isProductimg && !remProductimg" class="generage_btn started_btn" @click="getPrductimg">
							<i class="fi fi-br-loading"></i>
						</div>
						<div v-show="remProductimg" @click="removeProductimg" class="generage_btn started_btn">
							{{$t('Generate.Close')}}
						</div>
					</div>
				</div>
			</div>
			<div class="productImg_right">
				<div class="productImg_content_item_title">{{$t('ProductImg.GenerateProduct')}}</div>
				<div class="productImg_right_item_box generalScroll" v-mousewheel>
					<div class="productImg_right_item" v-for="item,index in generateList" :key="item">
						<div class="productImg_right_item_imgBox" v-if="item?.status != 'Success' && !item.imgUrl">
							<img class="loadingImg" src="@/assets/images/homePage/loading.gif" alt="">
						</div>
						<div class="productImg_right_item_imgBox" v-else>
							<img :src="item.url" alt="">
							<div class="productImg_right_item_iconRight">
								<div class="productImg_right_item_like" @click.stop="likeFile(item,'like',index)">
									<i class="fi fi-rr-heart"></i>
								</div>
							</div>
							<div class="productImg_right_item_iconLeft">
								<div class="productImg_right_item_scale" @click.stop="setScaleImage(generateList,index,true)">
									<i class="fi fi-bs-expand-arrows-alt"></i>
								</div>
								<div v-show="item.resultType != 'Relight'" class="productImg_right_item_menu" @click.stop="setMenuShow(item)">
									<i class="fi fi-rr-circle-ellipsis"></i>
									<ul v-show="item.menuShow">
										<li v-for="menuItem,index in productimgMenuList" v-show="index != 0" @click.stop="setMenu(menuItem,item)" :key="menuItem.value">{{ menuItem.label }}</li>
									</ul>
								</div>
							</div>
							
						</div>
					</div>
					<div class="mark_loading" v-show="isShowMark">
						<a-spin size="large" />
					</div>
				</div>
				<div class="productImg_content_item_title productImg_right_titleBtn">
					{{$t('ProductImg.SelectedProduct')}}
					<div class="button_second" @click="setExport">{{$t('ProductImg.Export')}}</div>
				</div>
				<div class="productImg_right_item_box generalScroll" v-mousewheel>
					<div class="productImg_right_item" v-for="item,index in likeList" :key="item">
						<img :src="item.url" alt="">
						<div class="productImg_right_item_iconRight">
							<div class="productImg_right_item_like" @click.stop="likeFile(item,'noLike',index)">
								<i class="fi fi-sr-heart"></i>
							</div>
						</div>
						<div class="productImg_right_item_iconLeft">
							<div class="productImg_right_item_scale" @click.stop="setScaleImage(likeList,index,false)">
								<i class="fi fi-bs-expand-arrows-alt"></i>
							</div>
							<div v-show="item.resultType != 'Relight'" class="productImg_right_item_menu" :title="$t('ProductImg.moreTitle')" @click.stop="setMenuShow(item)">
								<i class="fi fi-rr-circle-ellipsis"></i>
								<ul v-show="item.menuShow">
									<li v-for="menuItem,index in productimgMenuList" v-show="index != 0" @click.stop="setMenu(menuItem,item)" :key="menuItem.value">{{ menuItem.label }}</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<ExportModel ref="ExportModel" @setTask="setTask"></ExportModel>
	<scaleImage ref="scaleImage"
		:productData="{
			upload:upload,
			similarity:similarity,
			RelightDirection:RelightDirection,
			RelightDirectionList:RelightDirectionList,
		}" 
		:isProductimg="true"></scaleImage>
</a-modal>
</template>

<script lang="ts">
import { LoadingOutlined } from "@ant-design/icons-vue";
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
// import { getCookie } from "@/tool/cookie";
import { Https } from "@/tool/https";
import { getCookie,setCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
import { getUploadUrl,isMoible } from "@/tool/util";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Upload,message,Modal } from 'ant-design-vue';
import { downloadIamge } from "@/tool/util";
import { useI18n } from "vue-i18n";
import ExportModel from "@/component/HomePage/ExportModel.vue";
import { useStore } from "vuex";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import generalMenu from "@/component/HomePage/generalMenu.vue";

export default defineComponent({
components:{
	ExportModel,
	scaleImage,
	generalMenu,
},
setup(props,{emit}) {
	const store = useStore();
	const {t} = useI18n()
	const upload:any = ref({})
	let productImg: any = ref(false);//弹窗
	let productImgMask:any = ref(false)//弹窗遮罩
	let productImgData:any = reactive({
		isShowMark:false,
		fileList:{},
		searchName:'',
		isTextarea:false,//是否展开
		remProductimg:false,//是否出现取消按钮
		isProductimg:false,//开始生成
		selectProductimgList:[],
		generateList:[],
		likeList:[],
		similarity:30,
	})
	let productimgMenuList = ref([
		{
			value:'ToProductImage',
			label:useI18n().t('ProductImg.ProductImage')
		},{
			value:'Relight',
			label:useI18n().t('ProductImg.Relight')
		}
	])
	let productimgMenu:any = ref(productimgMenuList.value[0])
	let RelightDirectionList = ref([
		{
			value:'Right Light',
			label:useI18n().t('ProductImg.RightLight')
		},{
			value:'Left Light',
			label:useI18n().t('ProductImg.LeftLight')
		},{
			value:'Top Light',
			label:useI18n().t('ProductImg.TopLight')
		},{
			value:'Bottom Light',
			label:useI18n().t('ProductImg.BottomLight')
		}
	])
	let RelightDirection:any = ref(RelightDirectionList.value[0].value)
	let ExportModel = ref()
	let selectList:any = ref({})
	let likeDesignCollectionList: any = computed(() => {
		return store.state.HomeStoreModule.likeDesignCollectionList;
	});
	let userlikeGroupId = 0
	let init = (userGroupId:any)=>{
		productImg.value = true
		selectList.value['ToProductImage'] = JSON.parse(JSON.stringify(likeDesignCollectionList.value))
		upload.value = {
			userlikeGroupId:userGroupId
		}
		userlikeGroupId = userGroupId
		getLikeProductImage(userGroupId)
	}
	let setproduct = (value:any)=>{
		productimgMenu.value = value
	}
	let getLikeProductImage = (userGroupId:any)=>{
		let data = {
			userLikeGroupId:userGroupId
		}
		Https.axiosPost(Https.httpUrls.productImageLikeList, data).then(
			(rv) => {
				rv.forEach((item:any) => {
					item.imgUrl = item.url
				});
				productImgData.likeList = rv
			}
		).catch(res=>{
		});
	}
	let cancelDsign = ()=>{
		Modal.confirm({
			title: t('ProductImg.jsContent1'),
			icon: createVNode(ExclamationCircleOutlined),
			okText: 'Yes',
			cancelText: 'No',
			mask:false,
			centered:true,
			onOk() {
				cleardata()
			}
		});
	}
	let cleardata = ()=>{
		productImg.value = false
		productImgData.likeList = []
		productImgData.generateList = []
		selectList.value = {}
		productimgMenu.value = productimgMenuList.value[0]
	}

	let fileUploadChange = (data: any)=> {
		let file = data.file;
		let bor = true
		if (file.status === "done") {
			let res = JSON.parse(file.xhr.response);
			if(res.errCode == 0){
				file.imgUrl = res.data.url;
				file.id = res.data.id
				file.isChecked = true
				file.type = 'ProductElement'
				// if(productimgMenu.value.value == 'Relight'){
				// 	file.type = "ToProductImage"
				// }
				productImgData.fileList[productimgMenu.value.value].filter((v: any) => v.status === "done");
			}else{
				bor = false
			}
			// this.showFileList = productImgData.fileList
		} else if (file.status === "error") {
			bor = false
		}
	}
	let beforeUpload = (file: any)=>{
		const isJpgOrPng =
			file.type === "image/jpeg" ||
			file.type === "image/png" ||
			file.type === "image/jpg" ||
			file.type === "image/bmp";
		if (!isJpgOrPng) {
			message.info(useI18n().t('MoodboardUpload.jsContent3'));
		}
		const isLt2M = file.size / 1024 / 1024 < 5;
		if (!isLt2M) {
			message.info(useI18n().t('MoodboardUpload.jsContent4'));
		}
		return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
	}
	let deleteFile = (index:any)=>{
		productImgData.fileList[productimgMenu.value.value].splice(index,1)
	}
	let setGenerate = (item:any)=>{
		item.isChecked = !item.isChecked
		// productImgData.selectProductimgList
	}
	let likeFile = (item:any,str:any,index:any) =>{
		let url
		let data = {
			toProductImageResultId:[item.id]
		}
		if(str == 'like'){
			url = Https.httpUrls.productImageLike
		}else{
			url = Https.httpUrls.productImageUnLike
		}
		Https.axiosPost(url, data).then(
			(rv) => {
				if(str == 'like'){
					productImgData.likeList.push(item)
					productImgData.generateList.splice(index,1)
				}else{
					productImgData.generateList.push(item)
					productImgData.likeList.splice(index,1)
				}
				
			}
		).catch(res=>{
		});
	}
	let setExport = ()=>{
		let imgList:any = []
		imgList = productImgData.likeList
		let data = {
			key:'FinalizeImage',
			imgList:imgList,
			userlikeGroupId,
		}
		let exportModel:any = ExportModel.value
		
		exportModel.init(data)
	}
	let remPrductimgTime:any = null
	let prductimgTime:any = null
	let getPrductimg = ()=>{
		if(productImgData.isProductimg) return
		clearInterval(remPrductimgTime)
		let selectArr:any = []
		let obj = {
			"createTime": "",
			"elementId": 0,
			"elementType": "",
			"id": 0,
			"isLike": 0,
			"taskId": "",
			"toProductImageRecordId": 0,
			"url": "",
		}
		if(productImgData.fileList[productimgMenu.value.value]){
			productImgData.fileList[productimgMenu.value.value].forEach((item:any)=>{
				if(item.isChecked){
					obj.elementId = item.id
					obj.elementType = item.type
					selectArr.push(JSON.parse(JSON.stringify(obj)))
				}
			})
		}
		if(selectList.value[productimgMenu.value.value]){
			selectList.value[productimgMenu.value.value].forEach((item:any)=>{
				if(item.isChecked){
					obj.elementId = item.designOutfitId
					obj.elementType = 'DesignOutfit'
					if(productimgMenu.value.value == 'Relight'){
						obj.elementId = item.id
						obj.elementType = 'ToProductImage'
					}
					selectArr.push(JSON.parse(JSON.stringify(obj)))
				}
			})
		}
		
		if(selectArr.length == 0) {
			message.info(t('ProductImg.jsContent2'))
			return
		}
		let imageStrength = productImgData.similarity == 100? 95 :productImgData.similarity
		let data:any ={
			prompt:productImgData.searchName,
			toProductImageVOList:selectArr,
			userLikeGroupId:upload.value.userlikeGroupId,
			direction:RelightDirection.value,
			imageStrength:(100 - imageStrength)/100,
		}
		productImgData.isProductimg = true
		remPrductimgTime = setTimeout(()=>{
			productImgData.remProductimg = true
		},10000)
		let url = Https.httpUrls.toProduct
		if(productimgMenu.value.value == 'Relight'){
			url = Https.httpUrls.relight
		}
		productImgData.isShowMark = true
		Https.axiosPost(url, data).then(
			(rv) => {
				productImgData.isShowMark = false
				let arr:any = []
				rv.forEach((item:any)=>{
				  arr.push(item.taskId)  
				})
				
				productImgData.generateList.unshift(...rv)
				setPrductimg(arr)
			}
		).catch(res=>{
			productImgData.isShowMark = false
			productImgData.isProductimg = false
			clearInterval(remPrductimgTime)
			productImgData.remProductimg= false
		});
	}
	let generateProceedList:any = []
	let setPrductimg = (dataList:any)=>{
		let data = dataList
		let dataNum = dataList.length
		let state = true
		let url = Https.httpUrls.toProductImageResult
		if(productimgMenu.value.value == 'Relight'){
			url = Https.httpUrls.relightResult
		}

		prductimgTime = setInterval(()=>{
			if(!state)return
			state = false
			Https.axiosPost(url, data).then(
				(rv) => {
					state = true
					if(productImgData.isProductimg){//防止取消后有正在执行的获取状态
						// generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
						rv.forEach((element:any) => {
							if(element.status == 'Success'){
								element.imgUrl = element.url
								// if(!productImgData.generateList[productimgMenu.value.value]){
								// 	productImgData.generateList[productimgMenu.value.value] = []										
								// }
								let index = productImgData.generateList.findIndex((obj:any) => obj.taskId === element.taskId);
								productImgData.generateList[index] = element
								// productImgData.generateList[productimgMenu.value.value].unshift(element)
							}else if(element.status == 'Fail'){
								let index = productImgData.generateList.findIndex((obj:any) => obj.taskId === element.taskId);
								productImgData.generateList.splice(index,1)
							}
							data = data.filter((item:any) => item !== element.taskId);
						});
						generateProceedList = data
						if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
							// if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
							// }
							store.state.store.dispatch('getCredits')
							clearInterval(prductimgTime)
							clearInterval(remPrductimgTime)
							productImgData.remProductimg = false
							productImgData.isProductimg = false
						}
					}
				}
			).catch(res=>{
				productImgData.generateList.filter((item:any)=>item.status == 'Success')
				clearInterval(prductimgTime)
				clearInterval(remPrductimgTime)
				productImgData.isProductimg = false
				productImgData.remProductimg= false
			});
		},1000)
	}
	let removeProductimg = ()=>{
		productImgData.isProductimg = false
		productImgData.remProductimg= false
		clearInterval(prductimgTime)
		let userInfo:any = getCookie("userInfo")
		if(generateProceedList){
			// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
			let str = generateProceedList.join(',')
			let data = {uniqueId:str,userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
			Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
				(rv) => {
					generateProceedList = []
					productImgData.generateList = productImgData.generateList.filter((item:any)=>item.status == 'Success')
				}
			).catch(res=>{
				productImgData.generateList = productImgData.generateList.filter((item:any)=>item.status == 'Success')
			});
		}
	}
	let scaleImage = ref()
	let setScaleImage = (arr:any,index:any,isLike:any)=>{
		arr.forEach((item:any)=>{
		  item.imgUrl = item.url  
		})
		scaleImage.value.isProductimg = isLike
		// scaleImage.value.isProductimg = false
		scaleImage.value.init(arr,index)
		scaleImage.value.isLike = false
		scaleImage.value.isComparison = true
	}
	let generalIsMenuShow:any = {}
	let setMenuShow = (item:any)=>{
		item.menuShow = true
		generalIsMenuShow = item
		document.addEventListener('click',removeMenuShow)
	}
	let setMenu=(menuItem:any,item:any)=>{
		productimgMenu.value = menuItem
		if(!selectList.value[productimgMenu.value.value]){
			selectList.value[productimgMenu.value.value] = []										
		}
		selectList.value[productimgMenu.value.value].forEach((item:any) => {
			item.isChecked = false
		});
		if(selectList.value[menuItem.value].indexOf(item) == -1){
			item.isChecked = true
			selectList.value[menuItem.value].push(item)
		}
		generalIsMenuShow.menuShow = false
	}
	let removeMenuShow = ()=>{
		generalIsMenuShow.menuShow = false
		generalIsMenuShow = {}
		document.removeEventListener('click',removeMenuShow)
	}
	let setSimilarity = (num:any)=>{
		
	}
	
	//超分
	let setTask = (data:any)=>{
		emit('setTask',data)
	}
	
	return {
		upload,
		productImg,
		productImgMask,
		...toRefs(productImgData),
		productimgMenuList,
		productimgMenu,

		RelightDirectionList,
		RelightDirection,

		selectList,
		likeDesignCollectionList,
		ExportModel,
		init,
		setproduct,
		cancelDsign,
		fileUploadChange,
		beforeUpload,
		deleteFile,
		setGenerate,
		likeFile,
		setExport,
		getPrductimg,
		removeProductimg,
		scaleImage,
		setScaleImage,
		setMenu,
		setMenuShow,
		setSimilarity,
		setTask,
	};
},
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);
			},{ passive: true })
		}
	},
},
data() {
	return {
		indicator: h(LoadingOutlined, {
			style: {
				fontSize: "2.4rem",
			},
			spin: true,
		}),
		// moodTemplateId: "", //模板id
		token: "",
		uploadUrl: "",
		
	};
},
mounted() {
	this.token = getCookie("token") || "";
	this.uploadUrl = getUploadUrl();
},
methods: {
	// init(list:any,index:any,dialogueIndex:any){
		
	// },
	// cancelDsign(){
	// 	this.productImg = false
	// 	// this.productImgList = []
	// 	// this.productImgIndex = 0
	// },
	// download(){
	// 	// downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
	// },
	// setScaleImageIndex(index:any){
	// 	// this.productImgIndex = index
	// 	// console.log(this.productImgIndex);
		
	// },
	// LikeFile(item:any,str:string){
	// 	let parent:any = this.$parent
	// 	parent.likeFile(item,str)
	// },
},
});
</script>

<style lang="less">
.productImg_modal {
.productImg_page{
	overflow-y: auto;
	height: 100%;
	&.productImg_page::-webkit-scrollbar{display: none;}
}
.productImg_content{
	display: flex;
	flex-direction: column;
	height: 100%;
	.modal_title_text{
		height: 4rem;
	}
}
.productImg_content_bottom{
	height: calc(100% - 4rem - 2.4rem);
	--border-color: #c4c4c4;
	display: flex;
	justify-content: space-between;
	flex: 1;
	.upload_item{
	}
}
.productImg_content_item_title{
	font-weight: 600;
	font-size: 1.6rem;
	margin-bottom: 1rem;
	&.productImg_content_item_title_menu{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.productImg_content_item_title_menubtn{
			font-size: 1.6rem;
			font-weight: 500;
		}
	}
	&.productImg_content_item_title_similarity{
		// margin-bottom: 8rem;
	}
}
.productImg_content_item_intro{
	font-size: 1.4rem;
}
.productImg_content_item_imgBox{
	display: flex;
	overflow-x: auto;
	width: auto;
	margin-bottom: 2rem;
	align-items: center;
	.content_item_imgBox_itemImg{
		display: flex;
		margin-right: 1rem;
		position: relative;
		height: 14rem;
		position: relative;
		img{
			width: 100%;
			cursor: pointer;
			object-fit: contain;
			opacity: .5;
			transform: scale(.9);
			&.active{
				opacity: 1;
				transform: scale(1);
			}
		}
		.ant-checkbox-wrapper{
			position: absolute;
			right: 0;
			top: 0;
		}
		&.content_item_imgBox_itemImg:hover{
			.content_item_imgBox_itemImg_delete{
				display: block;
				cursor: pointer;
			}
		}
		.content_item_imgBox_itemImg_delete{
			display: none;	
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.2);
			position: absolute;
			i{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				color: #fff;
			}
		}

	}
	.content_item_imgBox_itemImg:last-child{
		margin-right: 0;
	}
}
.productImg_left,.productImg_right{
	display: flex;
	flex-direction: column;
}
.productImg_content_item:last-child{
	margin-bottom: 0;
}
.productImg_left{
	width: 25%;
	position: relative;
	.upload_file_item{
		display: flex;
		margin-right: 1rem;
		width: auto !important;
		height: 14rem !important;
		border: none !important;
		margin-bottom: 0 !important;
		&.upload_file_item:last-child{
			margin-right: 0rem;
		}
	}
	// width: 45%;
	.productImg_content_item_imgBox{
		.content_item_imgBox_itemImg{
			width: 7rem;
			flex-shrink: 0;
		}
	}
	.productImg_content_item_generate{
		--width:100%;
	}
	.productImg_content_item_similarity{
		display: flex;
		align-items: center;
		.system_silder{
			flex: 1;
		}
		input{
			width: 30%;
			width: 5rem;
			height: 5rem;
			text-align: center;
			font-size: 1.8rem;
		}
	}
	.productImg_content_item_Direction{
		padding-bottom: calc(2rem* 1.2);
		.ant-select{
			font-size: 1.6rem;
			.ant-select-selector::after{
				line-height: 1;
			}
			.ant-select-selector .ant-select-selection-item{
				line-height: 1;
			}
			.ant-select-selector{
				height: auto;
				padding: 1rem 1rem;
				box-shadow: none !important;
				border: calc(0.1rem* 1.2) solid #F1F1F1;
			}
		}
	}
	.productImg_content_item_generate_btn{
		position: absolute;
		bottom: 0;
		top: auto;
		width: 100%;
		justify-content: space-around;
		.input_box{
			flex: 0;
			margin-left: auto;
		}
		.started_btn{
			// width: 13rem;
			// text-align: center;
			margin: 0;
		}
	}
}
.productImg_right{
	width: 75%;
	padding-left: 2rem;
	height: 100%;
	justify-content: space-between;
	.productImg_right_item_box{
		height: 40%;
		display: flex;
		overflow-x: auto;
		background: #f6f6fa;
		border-radius: 2rem;
		margin-bottom: 2%;
		padding: 1rem 1.5rem;
		position: relative;
		.mark_loading{
			position: absolute
		}
		.productImg_right_item{
			height: 100%;
			padding: 1rem 0;
			margin-right: 1rem;
			position: relative;
			background: #fff;
			.productImg_right_item_imgBox{
				height: 100%;
				.loadingImg{
					width: 14rem;
					object-fit: contain;
				}
			}
			img{
				height: 100%;
			}
			.productImg_right_item_iconRight,.productImg_right_item_iconLeft{
				position: absolute;
				top: 2rem;
				display: flex;
				flex-direction: column;
				>div{
					margin-bottom: 1rem;
				}
				>div:last-child{
					margin-bottom: 0;
				}
			}
			.productImg_right_item_iconRight{
				right: 2rem;
			}
			.productImg_right_item_iconLeft{
				left: 2rem;
			}
			.productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{
				display: none;
				cursor: pointer;
				width: 3rem;
				height: 3rem;
				background: #fff;
				align-items: center;
				justify-content: center;
				border-radius: .5rem;
				border: .1rem solid #ccc;
				.fi-sr-heart{
					color: red;
				}
			}
			.productImg_right_item_menu{
				ul{
					top: 100%;
					position: absolute;
					width: 13rem;
					left: 0;
					text-align: center;
					border-radius: calc(1rem*1.2);
					overflow: hidden;
					z-index: 3;
					li{
						background: #cccccc;
						padding: .5rem 1rem;
					}
					li:hover{
						// background: rgba(0,0,0,.4);
						background: #999999;
						color: #000;
					}
				}
			}
		}
		.productImg_right_item:hover{
			.productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{
				display: flex;
			}	
		}
		.productImg_right_item:last-child{
			margin-right: 0;
		}
	}
	.productImg_right_item_box:last-child{
		margin-bottom: 0;
	}
	.productImg_right_titleBtn{
		display: flex;
		justify-content: space-between;
	}

}
}
</style>