<template>
	<div class="toProduct">
		<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" :class="{active:button.left}">
					<!-- <div class="productImg_content_item_title productImg_content_item_title_menu">
						<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
					</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="[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 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-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="input_border productImg_content_item_generate">
						<div class="input_box">
							<div class="input_box_btnBox">
								<!-- <input
									class="search_input"
									:placeholder="productimgMenu.value == 'Relight'?$t('ProductImg.relightInput'):$t('ProductImg.productInput')"
									v-model="searchName[productimgMenu.value]"
									@keydown.enter="getPrductimg()"
								/> -->
								<textarea 
									class="textarea"  
									@input="ifMaximumLength" 
									:placeholder="productimgMenu.value == 'Relight'?$t('ProductImg.relightInput'):$t('ProductImg.productInput')"
									@keydown.enter.prevent="getPrductimg()"
									v-model="searchName[productimgMenu.value]"
								></textarea>
							</div>
						</div>
					</div>
					<!-- <div class="productImg_content_item_title">{{$t('ProductImg.Upload')}}</div>
					<div class="productImg_content_item_imgBox generalScroll upload_item">
						
						
					</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_right_item_box generalScroll">
						<div class="content_header_left">
							<i class="fi fi-rs-comments"></i><span class="content_header_des">
								{{ $t('ProductImg.SelectedDesign') }}
							</span>
						</div>
						<!-- <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_men" @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 class="content">
							<generalDrag ref="generalDragLeft" @setBtn="selectSetBtn" :list="likeList[productimgMenu.value]"></generalDrag>
						</div>
						<!-- </div> -->
						
						<!-- <div class="btnLeft" @click="setSize('left')">
							<span class="icon iconfont icon-xiala" :class="{'active':button.left}"></span>
						</div> -->
						<div class="btnRight" @click="setSize('right')">
							<span class="icon iconfont icon-xiala" :class="{'active':button.right}"></span>
						</div>
					</div>
				</div>
				<div class="productImg_right" :class="{active:button.right}">
					<div class="productImg_right_item_box right generalScroll">
						<div class="content_header_left">
							<i class="fi fi-rs-comments"></i><span class="content_header_des">
								{{ $t('ProductImg.productImageDrafts') }}
							</span>
						</div>
						<div class="content">
							<generalDrag ref="generalDragRight" @setBtn="generateSetBtn" :list="generateList" :showMark="isShowMark"></generalDrag>
						</div>
						<!-- <div class="mark_loading" v-show="isShowMark">
							<a-spin size="large" />
						</div> -->
						<!-- <div class="productImg_right_item" v-for="item,index in likeList[productimgMenu.value]" :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[productimgMenu.value],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>
		<scaleImage ref="scaleImage"
			:productData="{
				upload:upload,
				similarity:similarity,
				brightenValue:brightenValue,
				RelightDirection:RelightDirection,
				RelightDirectionList:RelightDirectionList,
			}" 
			:isProductimg="true"></scaleImage>
		<UpgradePlan ref="UpgradePlan"></UpgradePlan>
</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 { useStore } from "vuex";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import generalMenu from "@/component/HomePage/generalMenu.vue";
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
import generalDrag from '@/component/modules/generalDrag.vue';
import { List } from "echarts";


export default defineComponent({
	components:{
		scaleImage,
		generalMenu,UpgradePlan,generalDrag
	},
    props: ['setTask','productimgMenu'],
    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 productImgData:any = reactive({
			isShowMark:false,
			fileList:{},
			searchName:{
				ToProductImage:'',
				Relight:'',
			},
			remProductimg:false,//是否出现取消按钮
			isProductimg:false,//开始生成
			selectProductimgList:[],
			generateList:[],
			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
			likeList:{
				ToProductImage:computed(()=>store.state.HomeStoreModule.toProductImageList),
				Relight:computed(()=>store.state.HomeStoreModule.relightList),
			} as any,
			similarity:30,
			brightenValue:1,
			UpgradePlan,
			button:{
				left:false,
				right:false,
			}
		})
		const productImgDom = reactive({
			generalDragLeft:null as any,
			generalDragRight:null as any,
		})
		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 selectList:any = ref({})
		// let likeDesignCollectionList: any = computed(() => {
		// 	return store.state.HomeStoreModule.likeDesignCollectionList;
		// });
		let selectDesignList: any = computed(() => {
			return store.state.UploadFilesModule.modularData;
		});
		let userlikeGroupId = 0
		const openSetData = ()=>{
			// cleardata()
			if(props.productimgMenu.value == 'ToProductImage'){
				selectList.value['ToProductImage'] = JSON.parse(JSON.stringify(selectDesignList.value.design.likeData))
			}else if(props.productimgMenu.value == 'Relight'){
				selectList.value['Relight'] = JSON.parse(JSON.stringify(selectDesignList.value.toProduct))
			}
			upload.value = {
				projectId:productImgData.selectObject.id
			}
			userlikeGroupId = selectDesignList.value.userlikeGroupId
			// getLikeProductImage(selectDesignList.value.userlikeGroupId)
			productImgDom.generalDragLeft.setItemPosition()
		}
		let setproduct = (value:any)=>{
			// props.productimgMenu = value
		}
		let getLikeProductImage = (userGroupId:any)=>{
			let data = {
				userLikeGroupId:userGroupId,
				type:props.productimgMenu.value
			}
			Https.axiosPost(Https.httpUrls.productImageLikeList, data).then(
				(rv) => {
					rv.forEach((item:any) => {
						item.imgUrl = item.url
					});
					let value = {
							list: rv,
							str:'add',
							index:-1,
						}
					if(props.productimgMenu.value == 'ToProductImage'){
						store.commit("setToProductImage", value);
					}else{
						store.commit("setRelightList", value);
					}
				}
			).catch(res=>{
			});
		}
		let cleardata = ()=>{
			productImgData.generateList = []
			selectList.value = {}
			// props.productimgMenu = 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(props.productimgMenu.value == 'Relight'){
					// 	file.type = "ToProductImage"
					// }
					productImgData.fileList[props.productimgMenu.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[props.productimgMenu.value].splice(index,1)
		}
		let setGenerate = (item:any)=>{
			item.isChecked = !item.isChecked
		}
		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'){
						let value = {
							list:[item],
							str:'add',
							index:-1,
						}
						if(props.productimgMenu.value == 'ToProductImage'){
							store.commit("setToProductImage", value);
						}else{
							store.commit("setRelightList", value);
						}
						productImgData.generateList.splice(index,1)
					}else{
						let value = {
							list:[item],
							str:'splice',
							index:index,
						}
						productImgData.generateList.push(item)
						if(props.productimgMenu.value == 'ToProductImage'){
							store.commit("setToProductImage", value);
						}else{
							store.commit("setRelightList", value);
						}

					}
				}
			).catch(res=>{
			});
		}
		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[props.productimgMenu.value]){
				productImgData.fileList[props.productimgMenu.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[props.productimgMenu.value]){
				selectList.value[props.productimgMenu.value].forEach((item:any)=>{
					if(item.isChecked){
						obj.elementId = item.designOutfitId
						obj.elementType = 'DesignOutfit'
						if(props.productimgMenu.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[props.productimgMenu.value],
				toProductImageVOList:selectArr,
				// userLikeGroupId:upload.value.userlikeGroupId,
				projectId:productImgData.selectObject.id,
				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(props.productimgMenu.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(props.productimgMenu.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[props.productimgMenu.value]){
									// 	productImgData.generateList[props.productimgMenu.value] = []										
									// }
									let index = productImgData.generateList.findIndex((obj:any) => obj.taskId === element.taskId);
									productImgData.generateList[index] = element
									// productImgData.generateList[props.productimgMenu.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
							}
						}
					}
				).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:props.productimgMenu.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[props.productimgMenu.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)
		}
		let setMenu=(menuItem:any,item:any)=>{
			// props.productimgMenu = menuItem
			// if(!selectList.value[props.productimgMenu.value]){
			// 	selectList.value[props.productimgMenu.value] = []										
			// }
			// selectList.value[props.productimgMenu.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)
		}

		const setLikeZoom = (item:any,str:string,index:number,list:List) =>{
			console.log(str)
			if(str == 'zoom'){
				setScaleImage(list,index,true)
			}else{
				likeFile(item,str,index)
			}
		}
		const selectSetBtn = (id:any,str:string)=>{
			productImgData.likeList[props.productimgMenu.value].forEach((item:any,index:number)=>{
				if(item.id == id){
					let selectStr = ''
					str == 'zoom'?selectStr = 'zoom':selectStr ='noLike'
					setLikeZoom(item,selectStr,index,productImgData.likeList[props.productimgMenu.value])
				}
			})
		}
		const generateSetBtn = (id:any,str:string)=>{
			productImgData.generateList.forEach((item:any,index:number)=>{
				if(item.id == id){
					let selectStr = ''
					str == 'zoom'?selectStr = 'zoom':selectStr ='like'
					setLikeZoom(item,selectStr,index,productImgData.generateList)
				}
			})
		}
		const setItemPosition = ()=>{
			productImgDom.generalDragLeft.setItemPosition()
			productImgDom.generalDragRight.setItemPosition()
		}
		const setSize = (str:string)=>{
			productImgData.button[str] = !productImgData.button[str] 
			nextTick(()=>{
				setItemPosition()
			})
		}
		const ifMaximumLength = (event:any)=>{
			let textarea = event.target as HTMLTextAreaElement;
			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 {
			upload,
			driver__,
			openSetData,
			...toRefs(productImgData),
			...toRefs(productImgDom),
			productimgMenuList,

		RelightDirectionList,
		RelightDirection,

		selectList,
		setproduct,
		fileUploadChange,
		beforeUpload,
		deleteFile,
		setGenerate,
		likeFile,
		getPrductimg,
		removeProductimg,
		scaleImage,
		setScaleImage,
		setMenu,
		setMenuShow,
		setSimilarity,
		setTask,
		selectSetBtn,
		generateSetBtn,
		setItemPosition,
		setSize,
		ifMaximumLength,
	};
},
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" scoped>
.toProduct{
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}
.productImg_content{
	height: 100%;
	width: 100%;
	.modal_title_text{
		height: 4rem;
	}
}
.productImg_content_bottom{
	height: 100%;
	--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;
		: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_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: 36rem;
		max-height: 100%;
		position: relative;
		img{
			height: 100%;
			width: 100%;
			cursor: pointer;
			object-fit: contain;
			opacity: .5;
			&.active{
				opacity: 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;
	padding-right: 3.8rem;
	width: 39rem;
	&.active{
			width: 0;
			padding: 0;
			overflow: hidden;
		}
	.upload_file_item{
		display: flex;
		margin-right: 1rem;
		height: 14rem !important;
		width: 9rem;
		border: none !important;
		&.upload_file_item:last-child{
			width: 9rem;
			margin-right: 0rem;
		}
	}
	// width: 45%;
	.productImg_content_item_imgBox{
		flex-shrink: 0;
		margin-bottom: 3rem;
		.content_item_imgBox_itemImg{
			width: auto;
			max-width: 20rem;
			flex-shrink: 0;
			img{
				object-fit: contain;
			}
		}
		.upload_file_item{
			flex-shrink: 0;
			width: 36rem;
		}
	}
	.productImg_content_item_generate{
		--width:100%;
		padding-bottom: 1rem;
		// margin-top: auto;
	}
	.productImg_content_item_similarity{
		display: flex;
		align-items: center;
		padding-bottom: 3rem;
		.system_silder{
			flex: 1;
		}
		input{
			width: 30%;
			width: 5rem;
			height: 5rem;
			text-align: center;
			font-size: 1.8rem;
			margin-left: 2rem;
		}
	}
	.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{
		width: 100%;
		justify-content: space-around;
		.input_box{
			flex: 0;
			margin-left: auto;
		}
		.started_btn{
			// width: 13rem;
			// text-align: center;
			margin: 0;
		}
	}
}
.productImg_right{
	height: 100%;
	flex-direction: row;
	flex: 1;
	&.active{
		flex: 0;
		overflow: hidden;
	}
	.productImg_right_item_box{
		// height: 40%;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		&.right{
			padding-left: 2.3rem;
		}
		> .content{
			background: #f6f6fa;
			border-radius: 2rem;
			padding: 1rem 1.5rem;
			border-radius: 2rem;
			position: relative;
			flex: 1;
		}
		> .btnLeft,> .btnRight{
			position: absolute;
			width: 4rem;
			height: 7rem;
			background: #fff;
			border: 2px solid;
			border-right: none;
			border-radius: 2rem 0 0 2rem;
			top: 50%;
			transform: translate(-100%,-50%);
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 2;
			cursor: pointer;
			>span{
				transition: all .3s;
				transform: rotate(90deg);
				&.active{
					transform: rotate(270deg);
				}
			}
		}
		> .btnRight{
			left: calc(100% + 4rem) ;
			transform: translate(-100%,-50%) rotate(180deg);
		}
		.content_header_left {
			display: flex;
			align-items: center;
			margin-bottom: 2rem;
			.content_header_des {
				font-size: 1.6rem;
				color: #000000;
				margin-left: 1rem;
				font-weight: 900;
			}
		}
		.mark_loading{
			position: absolute
		}
	}
	.productImg_right_titleBtn{
		display: flex;
		justify-content: space-between;
	}

}
</style>