<template>
	<div ref="productImgModal">
		<a-modal
            class="productImg_modal generalModel"
            v-model:visible="productImg"
            :footer="null"
			:get-container="() => $refs.productImgModal"
            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()">
				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="23" cy="23" r="23" fill="white" 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>
		<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 Guide_1_32">
					<div class="">
						<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[productimgMenu.value]"
										@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[productimgMenu.value]"
								></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 v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
							<span>{{$t('ProductImg.Highlight')}}</span>
						</div>
						<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_similarity">
							<a-slider class="system_silder"
								v-model:value="brightenValue"
								:tooltipVisible="false"
								:max="3"
								:min="1"
								:step="0.1"
							>
							</a-slider>
							<input type="number" readonly v-model="brightenValue">
						</div>
						<div class="productImg_content_item_title">{{$t('ProductImg.SelectCollection')}}</div>
						<div class="productImg_content_item_imgBox generalScroll upload_item" 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':'']">
								<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
							</div>
							<div class="content_item_imgBox_itemImg" 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="content_item_imgBox_itemImg"
									v-show="file?.status === 'done'"

								>
									<img @click="setGenerate(file)" :class="[file?.isChecked?'active':'']" :src="file?.imgUrl" class="upload_img"/>
									<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_title">{{$t('ProductImg.Upload')}}</div>
						<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
							
							
						</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 class="Guide_1_35" v-show="item.menuShow || (driver__.index == 48 && index == 0)">
											<li v-for="menuItem,index in productimgMenuList" :class="[driver__.driver?'showEvents':'']" 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,
				brightenValue:brightenValue,
				RelightDirection:RelightDirection,
				RelightDirectionList:RelightDirectionList,
			}" 
			:isProductimg="true"></scaleImage>
		<UpgradePlan ref="UpgradePlan"></UpgradePlan>

	</a-modal>
</div>
</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 { 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";
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";


export default defineComponent({
	components:{
		ExportModel,
		scaleImage,
		generalMenu,UpgradePlan
	},
    props: ['setTask'],
    setup(props,{emit}) {
		const store = useStore();
		let userDetail:any= computed(()=>{
			return store.state.UserHabit.userDetail
		})
		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:{
				ToProductImage:'',
				Relight:'',
			},
			isTextarea:false,//是否展开
			remProductimg:false,//是否出现取消按钮
			isProductimg:false,//开始生成
			selectProductimgList:[],
			generateList:[],
			likeList:[],
			similarity:30,
			brightenValue:1,
			UpgradePlan
		})
		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){
					let dom:any = document.querySelectorAll('.Guide_1_32')[0]
					dom.scrollTop = dom.scrollHeight;
					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[productimgMenu.value.value],
				toProductImageVOList:selectArr,
				userLikeGroupId:upload.value.userlikeGroupId,
				direction:RelightDirection.value,
				brightenValue:productImgData.brightenValue,
				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
				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 = productImgData.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.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)
			if(generateProceedList){
				// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
				let str = generateProceedList.join(',')
				let data = {
					uniqueId:str,userId:userDetail.value.userId,
					timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
					type:productimgMenu.value.value,
				}
				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.productimgSearchName = productImgData.searchName[productimgMenu.value.value]
			scaleImage.value.productimgSimilarity = productImgData.similarity
			scaleImage.value.productimgBrightenValue = productImgData.brightenValue
			scaleImage.value.productimgRelightDirection = RelightDirection.value
			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(()=>{
					let dom:any = document.querySelectorAll('.Guide_1_32')[0]
					dom.scrollTop = dom.scrollHeight;
					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;
	flex-wrap: nowrap;
	.content_item_imgBox_itemImg{
		display: flex;
		margin-right: 1rem;
		position: relative;
		height: 14rem;
		position: relative;
		img{
			height: 100%;
			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{
	overflow-y: auto !important;
	width: 25%;
	position: relative;
	display: flex;
	height: 100%;
    flex-direction: column;
	.Guide_1_32{
		height: 100%;
		overflow-y: auto;
		padding: 0 1rem;
		&.Guide_1_32::-webkit-scrollbar{display: none;}
	}
	.upload_file_item{
		display: flex;
		margin-right: 1rem;
		height: 14rem !important;
		width: 9rem;
		border: none !important;
		&.upload_file_item:last-child{
			margin-right: 0rem;
		}
	}
	// width: 45%;
	.productImg_content_item_imgBox{
		.content_item_imgBox_itemImg{
			width: auto;
			max-width: 9rem;
			flex-shrink: 0;
			img{
				object-fit: contain;
			}
		}
		.upload_file_item{
			flex-shrink: 0;
			width: 9rem;
		}
	}
	.productImg_content_item_generate{
		--width:100%;
		padding-bottom: 1rem;
	}
	.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: 1rem;
		:deep(.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{
		margin-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%;
		width: 100%;
		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;
			overflow: hidden;
			flex-shrink: 0;
			.productImg_right_item_imgBox{
				height: 100%;
				overflow: hidden;
				.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;
				position: relative;
				border: .1rem solid #ccc;
				.fi-sr-heart{
					color: red;
				}
			}
			.productImg_right_item_menu{
				ul{
					top: 100%;
					position: absolute;
					width: 10rem;
					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>