<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="Guide_1_32">
						<div class="productImg_content_item_title productImg_content_item_title_menu">
							<span>{{$t('ProductImg.MagicTools')}}</span>
							<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :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,index in selectList[productimgMenu.value]" :key="item.id" >
								<img @click="setGenerate(item)" v-lazy="item.designOutfitUrl?item.designOutfitUrl:item.url" alt="" :class="[driver__.driver?index == 0?driver__.index == 45?'Guide_img showEvents':'hideEvents':'hideEvents':'',item?.isChecked?'active':'']">
							</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)" :class="[file?.isChecked?'active':'']" :src="file?.imgUrl" class="upload_img"/>
									<!-- <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>

					<div class="productImg_content_item_generate_btn input_border">
						<div class="input_box Guide_1_33">
							<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 Guide_1_36" :style="[(driver__.index == 49 || driver__.index == 50 )?'display: flex;':'']"  @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" :class="{hideEvents:driver__.driver}" :style="[(driver__.index == 46 || driver__.index == 47 || driver__.index == 48)?'display: flex;':'']" @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 Guide_1_34" :style="[(driver__.index == 46 || driver__.index == 47 || driver__.index == 48)?'display: flex;':'']" @click.stop="setMenuShow(item)">
										<i class="fi fi-rr-circle-ellipsis"></i>
										<ul v-show="item.menuShow" class="Guide_1_35">
											<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  Guide_1_37" @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";
import { openGuide,driverObj__ } from "@/tool/guide";

export default defineComponent({
	components:{
		ExportModel,
		scaleImage,
		generalMenu,
	},
    setup(props,{emit}) {
		const store = useStore();
		const {t} = useI18n()
		const upload:any = ref({})
		let driver__:any = computed(()=>{
			return store.state.Guide.guide
		})
        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)
			if(driver__.value.driver){
				nextTick(()=>{
					driverObj__.moveNext();
				})
			}
		}
		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");
					if(driver__.value.driver){
						nextTick(()=>{
							driverObj__.moveNext();
						})
					}
				}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
			if(item.isChecked){
				if(driver__.value.driver){
					nextTick(()=>{
						driverObj__.moveNext();
					})
				}
			}
			// 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)
					}
					if(driver__.value.driver){
						driverObj__.moveNext();
					}
				}
			).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.dispatch('getCredits')
								clearInterval(prductimgTime)
								clearInterval(remPrductimgTime)
								productImgData.remProductimg = false
								productImgData.isProductimg = false
								if(driver__.value.driver){
									nextTick(()=>{
										driverObj__.moveNext();
									})
								}
							}
						}
					}
				).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)
			if(driver__.value.driver){
				nextTick(()=>{
					driverObj__.moveNext();
				})
			}
		}
		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
			if(driver__.value.driver){
				nextTick(()=>{
					driverObj__.moveNext();
				})
			}
		}
		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,
			driver__,
			...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;
			img{
				width: 100%;
				cursor: pointer;
				object-fit: contain;
				&.active{
					opacity: .5;
					transform: scale(.9);
				}
			}
			&.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>