aida_front/src/component/HomePage/PrintboardUpload.vue

<template>
    <div class="printboard_upload_modal" :class="[driver__.driver?'showEvents':'']">
		
        <div class="printboard_left_upload">
            <div class="left_upload_header">
                <div class="upload_header_item">
                    <div class="switch_type_list">
                        <div
							@click.stop="open(1)"
							class="switch_type_item"
							:class="[openClick == 1 ? 'select_swtich' : '']"
						>
							<span>{{ $t('PrintboardUpload.Upload') }}</span>
						</div>
						<div
							@click.stop="open(2)"
							class="switch_type_item"
							:class="[openClick == 2 ? 'select_swtich' : '']"
						>
							<span>{{ $t('PrintboardUpload.Library') }}</span>
						</div>
						<div
							@click.stop="open(3)"
							class="switch_type_item Guide_1_2_1"
							:class="[openClick == 3 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
						>
							<span>{{ $t('PrintboardUpload.Generate') }}</span>
						</div>
                    </div>
                </div>
            </div>
             <div v-show="openClick == 1" class="printboard_body">
                <div class="upload_img_body">
                    <div class="upload_item">
                        <div :class="['upload_file_item']" v-for="(file, index) in fileList" :key="file">
                            <div class="upload_file_img_block">
                                <div class="upload_file_item_content" v-show="file?.status === 'uploading'">
                                    <a-spin  :indicator="indicator" tip="Uploading..."/>
                                </div>
                                <div class="upload_file_item_content"  v-show="file?.status === 'done'">
                                    <img  v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
                                    <div class="delete_like_file_block" @click.stop="deleteFile(file)">
										<span
											class="icon iconfont icon-shanchu"
										></span>
									</div>
                                </div>
                            </div>
                            <div class="pin_block" v-show="file?.status === 'done'">
                                <a-checkbox v-model:checked="file.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
                            </div>
                            
                        </div>
                        <div class="upload_file_item upload_component" v-show="printboardList.length < 8">
                            <a-upload
                                :action="uploadUrl + '/api/element/upload'"
								:capture="null"
                                list-type="picture-card"
                                :before-upload="beforeUpload"
                                :data="{
                                    ...upload
                                }"
                                :headers="{Authorization:token}"
                                v-model:file-list="fileList"
                                :customRequest="function(){}"
								:multiple="!driver__.driver"
                                :maxCount="8 - printboardList.length+fileList.length"
                                accept=".jpg,.png,.jpeg,.bmp"
                                @change="fileUploadChange"
                                >
								<div
                                    class="upload_tip_block"
									v-show="printboardList.length < 8"
                                >
                                    <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="upload_max_tip">
					<span class="icon iconfont icon-zhuyi"></span>
					<span>{{ $t('PrintboardUpload.Maximum') }}</span>
				</div>
            </div>
			<Material v-show="openClick == 2" ref="Material" msg="Printboard" @setLibrary = setSetchboardGenerate @confirmSelect="confirmSelect"></Material>
			<Generate v-show="openClick == 3" ref="Generate" msg="Printboard" @setGenerate = setSetchboardGenerate @generateCheckbox="getgenerateCheckbox"></Generate>
        </div>
		<div class="modal_right">
			<div class="modal_layout">
				<div class="modal_text">
					<div>{{ $t('PrintboardUpload.Thumbnail') }}</div>
					<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
				</div>
				<div class="modal_img">
					<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click.stop="deleteFile(item)">
						<img v-lazy="item.imgUrl">
						<div class="checked" >
							<i class="fi fi-rr-trash"></i>
						</div>
					</div>
				</div>
			</div>
			<div v-show="openClick == 3" class="modal_accomplish">
				<div class="input_border">
					<div class="Guide_1_2_8 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
						<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
						<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div>
						<span>{{ $t('PrintboardUpload.maximumLength') }}</span>
					</div>
					<!-- <div>
						<div v-show="!isUseGenerate" @click="setUseGenerate">Printboard</div>
						<div v-show="isUseGenerate" @click="setUseGenerate">Generate</div>
					</div> -->
				</div>
				<div class="modal_img" :style="[loadingShow?'overflow:hidden':'']">
					<div v-for="item,index in generateList" class="modal_imgItem Guide_1_2_9" :class="[item?.checked?'active':'',driver__.driver?'showEvents':'']" >
						<img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt="">
						<img v-show="item.status == 'Success'" :src="item.imgUrl" @click.stop="generageAdd(item)">
						<div
							class="delete_like_file_block"
							:class="[driver__.driver?'hideEvents':'']"
						>
							<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
							<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
						</div>
						<div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
							<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
						</div>
						<div class="pin_block">
							<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
						</div>
					</div>
					
				</div>
				<div class="mark_loading" v-show="loadingShow">
						<a-spin size="large" />
						<div v-show="remGenerate" :class="[driver__.driver?'hideEvents':'']" class="mark_loading_btn" @click="removeGenerate">{{$t('Generate.Close')}}</div>
					</div>
			</div>
		</div>
		<!-- 取消请求 -->
		<!-- <button @click="canelAxios">9999999999999999999</button> -->
		<scaleImage ref="scaleImage"></scaleImage>
        <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
    </div>
</template>
<script lang="ts">
import { defineComponent,h,ref,computed,inject, nextTick } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue';
import {getCookie} from '@/tool/cookie'
import {getUploadUrl} from '@/tool/util'
import {useStore} from 'vuex'
import { Https } from "@/tool/https";
import { message,Upload} from 'ant-design-vue';
import Cropper from '@/component/HomePage/Cropper.vue'
import Material from '@/component/HomePage/Material.vue'
import Generate from "@/component/HomePage/Generate.vue";
import GO from "@/tool/GO";
import { useI18n } from 'vue-i18n';
import { openGuide,driverObj__ } from "@/tool/guide";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import axios from 'axios'
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow';

export default defineComponent({
    components:{
        Cropper,
        Material,
		Generate,
		scaleImage,
    },
    setup(){
        let store:any =useStore()
        let fileList:any = ref([]),//选中的文件id数据
            printImgList:any = ref([]), //print的印花图片
            moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboard}),
            printBoards:any = computed(()=>{
				return store.state.UploadFilesModule.printboard
				
			})
        let openClick: any = ref(1);
		let generateCheckbox:any = ref()
		let generateList:any = ref([
		])
		let loadingShow = ref(false)
		let inputShow = ref(false)
		let inputTime = ref()
		let driver__:any = inject('driver__')
		let {t} = useI18n()
		let isTest = ref()
		let userInfo:any = {}
		let generateTime:any = ref()
		let remGenerate:any = ref(false)
		let remGenerateTime:any = ref()
		let isUseGenerate = ref(false)
		let useGenerate:any = ref({
			imgId : '',
			imgUrl:1,
			checked:false,
			level2Type:'',
			designType:''
		})
        return {
            fileList,
            printImgList,
            moodBoards,
			printBoards,
			openClick,
			generateCheckbox,
			generateList,
			loadingShow,
			inputShow,
			inputTime,
			driver__,
			t,
			isTest,
			userInfo,
			generateTime,
			remGenerate,
			remGenerateTime,
			useGenerate,
			isUseGenerate,
        }
    },
    computed:{
        // getPinLength(){
        //     let selectLength:any =  0 
        //     for(let item of this.printBoards){
        //         if(item.pin){
        //             selectLength++
        //         }
        //     }
        //     return selectLength
        // }
    },
	watch:{
		printBoards:{
			handler(newVal:any,oldVal:any){
				// if(newVal.length>=2 && this.driver__.driver && newVal.length!=oldVal.length){
				// 	driverObj__.moveTo(7)
				// }
			}
		}
	},
    data(){
        return {
            swtich_type:'upload',
            indicator : h(LoadingOutlined, {
                style: {
                    fontSize: '2.4rem*1.2)',
                },
                spin: true,
            }),
            upload:{
                isPin:0,
				gender:'',
                level1Type:'Printboard',
                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
            },
            token:'',
            uploadUrl:'',
            store:useStore(),
            cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
            currentFileNum:0, //当前上传的文件数
            isUpload:false,
			captionGeneration:'',
			printboardList:computed(()=>{
				return  useStore().state.UploadFilesModule.printboard
			}),
			source:axios.CancelToken.source()

        }
    },
    mounted(){
		let userInfo:any = getCookie("userInfo")
        this.userInfo = JSON.parse(userInfo);
        this.token = getCookie('token') || ''
		let isTest:any = getCookie('isTest')
        this.isTest =JSON.parse(isTest)
        this.uploadUrl = getUploadUrl()
		if(this.driver__.driver){
			this.captionGeneration = 'Elegant floral print for high-fashion attire'
		}else{
			this.captionGeneration = ''
		}
    },
     methods:{
		//设置library里面选择generate图片
		setUseGenerate(){
			this.isUseGenerate = !this.isUseGenerate
			let printMaterialFiles:any = computed(()=>{
				return this.store.state.UploadFilesModule.printMaterialFiles
			})
			let Material:any = this.$refs.Material
			Material.setUseGenerate(printMaterialFiles.value)
			if(this.isUseGenerate){
				let generate:any = this.$refs.Generate
				generate.checkbox.forEach((item:any)=>{
					if(item.name == "text-image"){
						item.type = true
					}else{
						item.type = false
					}
				})
				this.generateCheckbox = false
			}
		},
		setSetchboardGenerate(item:any){
			this.useGenerate.imgId = item.imgId
			this.useGenerate.imgUrl = item.imgUrl
			this.useGenerate.level2Type = item.level2Type
			this.useGenerate.designType = item.designType
			let Material:any = this.$refs.Material
			let generate:any = this.$refs.Generate

			if(item.designType == 'collection'){
				Material.setUseGenerate([])
			}else {
				generate.sketchboardList.forEach((item:any) => {
					item.checked = false
				});
			}
		},
		//取消请求测试
		canelAxios(){
			// Https.axiosCanel()
			this.source.cancel('请求被取消');
			this.source = axios.CancelToken.source()
		},
		open(num: Number) {
            this.openClick = num;
			let material:any = this.$refs.Material
			if(num == 2){
				material.init('Printboard')
			}
			if(num == 3){
				nextTick().then(()=>{
					if(this.driver__.driver){
						driverObj__.moveNext()
					}
				})
			}
        },
        fileUploadChange(data:any){
            let file = data.file
			
			// let res = JSON.parse(data?.xhr?.response);
			file.id_ = GO.id++
			file.type_ = {
				type1:'upload',
				type2:'Printboard'
			};
			file.pin = false;
			// file.id = res.data.id?res.data.id:""
            let Cropper:any = this.$refs.Cropper
            if(this.currentFileNum === 1){
                var reader = new FileReader();
				
                reader.onload = (e:any) => {
                    let data_new;
                    if (typeof e.target.result === 'object') {
                    // 把Array Buffer转化为blob 如果是base64不需要
                    data_new = window.URL.createObjectURL(new Blob([e.target.result]));
                    } else {
                    data_new = e.target.result;
                    }
                    Cropper.getOptionImg(data_new)
					
					
                };
                // 转化为base64
                // reader.readAsDataURL(file)
                // 转化为blob
                reader.readAsArrayBuffer(file.originFileObj);
                this.cropperFileData = file
                Cropper.changeShowModal(true)
				nextTick().then(()=>{
					if(this.driver__.driver){
						driverObj__.moveNext()
					}
				})
            }else{
                this.customRequest(file)
            }
        },

        beforeUpload(file:any,fileList:any){
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
            if (!isJpgOrPng) {
                message.info(this.t('PrintboardUpload.jsContent1'));
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                message.info(this.t('PrintboardUpload.jsContent2'));
            }
            if(isJpgOrPng && isLt2M){
                this.currentFileNum = fileList.length
            }else{
                return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
            }
            
        },

        deleteFile(item:any){
            // this.fileList.splice(item, 1)
            // this.store.commit('setPrintboardFile',this.fileList)
			if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
				item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
				this.store.commit("addGenerateMaterialFils", item);
			}else{
				this.fileList = this.store.state.UploadFilesModule.printboardFiles
				let moodboard 
				this.store.state.UploadFilesModule.printboardFiles.forEach((items:any,index:Number)=>{
					if(items.id_ == item.id_){
						moodboard = index
						
					}
				})
				this.fileList.splice(moodboard,1)
				this.store.commit("setPrintboardFile", this.fileList);
			}
        },
		likeFile(item:any,str:string){
			if(str == 'like'){
				let data = {
					generateDetailId:item.id,
					level1Type:"Printboard",
					level2Type: '',
					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
				}
				Https.axiosPost(Https.httpUrls.generateLike, data).then(
					(rv) => {
						item.like = true
					}
				).catch(res=>{
				});
			}else{
				let data = {
					generateDetailId:item.id,
					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
				}
				Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
					(rv) => {
						item.like = false
					}
				).catch(res=>{
				});
			}

		},

        
        customRequest(data:any){
            let new_data = {
                ...this.upload,
                file:data.originFileObj
            }
            let fileUid = data.uid
            Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
                (rv: any) => {
                    if (rv) {
                        for(let file of this.fileList){
                            if(fileUid === file.uid){
                                file.status = 'done'
                                file.imgUrl = rv.url
                                file.pin = false
                                file.id = rv.id
                                file.resData = rv

                            }
                        }
                        let fileList = this.fileList.filter((v:any)=> v.status === 'done')
                        this.store.commit('setPrintboardFile',fileList)
                    }
                }
            ).catch((res)=>{
                let index = -1
                this.fileList.forEach((ele:any,index1:any) => {
                    if(fileUid === ele.uid){
                        index = index1
                    }
                });
                if(index > -1){
                    this.fileList.splice(index, 1)
                }
            });
        },

        closeCropper(type:any){
            if(this.isUpload){
                return
            }
            if(type == 'error'){
                let index = -1
                this.fileList.forEach((ele:any,index1:any) => {
                    if(this.cropperFileData.uid === ele.uid){
                        index = index1
                    }
                });
                if(index > -1){
                    this.fileList.splice(index, 1)
                }
            }
            let Cropper:any = this.$refs.Cropper
            Cropper.closeCropper()

        },

        deletUploadFile(){
            let index = -1
            this.fileList.forEach((ele:any,index1:any) => {
                if(this.cropperFileData.uid === ele.uid){
                    index = index1
                }
            });
            if(index > -1){
                this.fileList.splice(index, 1)
            }
        },


        handleCropperSuccess(event:any){
            let {file, fileData} =event
            let new_data = {
                ...this.upload,
                file:file
            }
            if(this.isUpload){
                return
            }
            this.isUpload = true
            const hide = message.loading('loading', 0);
            Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
                (rv: any) => {
                    for(let file of this.fileList){
                        if(fileData.uid === file.uid){
                            file.status = 'done'
                            file.imgUrl = rv.url
                            file.id = rv.id
                            file.resData = rv
                        }
                    }
                    let fileList = this.fileList.filter((v:any)=> v.status === 'done')
                    this.isUpload = false
                    this.closeCropper('success')
                    this.cropperFileData = {name:'',uid:''}
                    this.store.commit('setPrintboardFile',fileList)
                    hide()
					nextTick().then(()=>{
						if(this.driver__.driver){
							driverObj__.moveNext()
						}
					})
                }
            ).catch(res=>{
                let index = -1
                this.fileList.forEach((ele:any,index1:any) => {
                    if(fileData.uid === ele.uid){
                        index = index1
                    }
                });
                if(index > -1){
                    this.fileList.splice(index, 1)
                }
                this.cropperFileData = {name:'',uid:''}
                this.isUpload = false
                this.closeCropper('error')
                hide()
            });
        },

        recollection(){
			this.isUseGenerate = false
			this.useGenerate = {
				imgId : '',
				imgUrl:1,
				checked:false,
				level2Type:'',
				designType:'',
			}
            let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
			let setboard = {
				generate:[] as any,
				material:[] as any,
				moodboard:[] as any,
			}
			arr.forEach((v:any)=>{
				if(v.type_.type1 == 'generate'){
					setboard.generate.push(v)
				}else if(v.type_.type1 == 'material'){
					setboard.material.push(v)
				}else{
					setboard.moodboard.push(v)
				}
			})
			this.store.commit("setPrintboardGenerateFiles", setboard.generate);
			this.store.commit("setPrintboardMaterialFiles", setboard.material);
			this.store.commit("setPrintboardFile", setboard.moodboard);
			this.fileList = setboard.moodboard
            // this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
            this.store.commit('setPrintboardFile',this.fileList)
            // this.store.commit('setGeneratePrintFile',this.printImgList)

        },

        confirmSelect(event:any){
            for(let item of event){
                let data = {
                    imgUrl:item.url,
                    resData:item,
                    pin:false,
                    id:item.id,
                    status:'done',
                }
                if(this.fileList.length == 15){
                    message.warning(this.t('PrintboardUpload.jsContent3'))
                    break
                }
                this.fileList.push(data)
            }
            this.store.commit('setPrintboardFile',this.fileList)
            
        },
		getgenerateCheckbox(value:any){
			this.generateCheckbox = value
		},
		ifMaximumLength(){
			clearTimeout(this.inputTime)
			this.inputTime = setTimeout(()=>{
				if(this.captionGeneration?.split(/\s+/).length > 75){
					this.inputShow = true
				}else{
					this.inputShow = false
				}
			},500)
		},
		getgenerate(){
			clearInterval(this.remGenerateTime)
			this.remGenerate = false
			// if(this.isTest){//试用用户禁止使用
			// 	message.warning(
			// 		this.t('isTest.available')
			// 		);
			// 	return
			// }
			if(this.loadingShow){
				return
			}
			let generage:any = this.$refs.Generate

			if(generage.printModel.num == 'Generate'){
				this.generatePrint()
				return
			}
			//如果是通过moodboard随即图片生成
			let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
			
			let data = {
				generateType:generateType,
				designType:this.useGenerate.designType,
				collectionElementId:this.useGenerate.imgId,
				// collectionElementId:generage?.collectionElementid,
				level1Type:this.upload.level1Type,
				level2Type:'',
				text:`${generage.printModel.value},${this.captionGeneration}`,
				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
				userId:this?.userInfo?.userId,
				isTestUser:this.driver__.driver?false:this.isTest,
				version:1,//为1就是Print
				gender:'',
			}
			if(generateType == 'image'){
				if(generage?.collectionElementid){
					data.text = ''
					
				}else{
					message.info(
						this.t('PrintboardUpload.jsContent4')
					);
					return
				}
			}else if(generateType == 'text'){
				data.collectionElementId = ''
				data.level2Type = ''
				// this.beforeUpload(false)
				if(this.captionGeneration){
					let arr = this.captionGeneration.split(/\s+/).length
					if(arr > 75){
						message.info(
							this.t('PrintboardUpload.jsContent5')
						);
					return

					}
				}else{
					message.info(
						this.t('PrintboardUpload.jsContent6')
					);
					return
				}
			}else if(generateType == 'text-image'){
				if(this.useGenerate.imgId){
					if(this.captionGeneration){
						let arr = this.captionGeneration.split(/\s+/).length
						if(arr > 75){
							message.info(
								this.t('PrintboardUpload.jsContent5')
							);
						return
						}
					}else{
						message.info(
							this.t('PrintboardUpload.jsContent6')
						);
						return
					}
				}else{
					message.info(
						this.t('PrintboardUpload.jsContent4')
					);
					return
				}
			}
			this.loadingShow = true
			//取消请求
			// Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data,{cancelToken: this.source?.token}).then(
			Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
                (rv) => {
					if(data.isTestUser){
						if(rv.leftUsageCount >= 1){
							message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:this.t('collectionModal.Printboard')}));
						}else if(rv.leftUsageCount == 0){
							message.warning(this.t('Generate.jsContent9',{str:this.t('collectionModal.Printboard')}));
							this.loadingShow = false
							return
						}
					}
					rv.uniqueId.forEach((item:any) => {
						let arr:any = {}
						arr.taskId = item
						arr.status = 'execution'
						this.generateList.unshift(arr)
					});
					this.setGenerate()
					this.remGenerateTime = setTimeout(()=>{
						this.remGenerate = true
					},10000)
                }
            ).catch(res=>{
				this.loadingShow = false
            });
		},
		setGenerate(){
			this.generateTime = setInterval(()=>{
				let data = this.generateList.filter((item:any)=>item.status != 'Success').map((obj:any) => obj.taskId);
				Https.axiosPost(Https.httpUrls.generateResult, data).then(
					(rv) => {
						if(this.loadingShow){//防止取消后有正在执行的获取状态
							let arr:any = []
							arr = rv.filter((item:any)=>item.status != 'Success')
							rv.forEach((element:any) => {
								element.imgUrl = element.url
								element.id_ = GO.id++
								this.generateList.forEach((item:any,index:any) => {
									if(item.taskId == element.taskId && element.status == 'Success'){
										this.generateList[index] = element
									}
								});
							});
							// this.generateList = rv;
							if(arr.length == 0){
								nextTick().then(()=>{
									if(this.driver__.driver){
										driverObj__.moveNext()
									}
								})
								clearInterval(this.generateTime)
								clearInterval(this.remGenerateTime)
								this.loadingShow = false
								this.remGenerate = false
							}
						}
						
					}
				).catch(res=>{
					this.fileList = this.fileList.filter((item:any)=>item.status == 'Success')
					clearInterval(this.generateTime)
					clearInterval(this.remGenerateTime)
					this.loadingShow = false
				});
			},1000)
		},
		removeGenerate(){
			let arr = this.generateList.filter((item:any)=>item.status != 'Success')
			//取消操作
			this.generateList = this.generateList.filter((item:any)=>item.status == 'Success')
			this.loadingShow = false
			clearInterval(this.generateTime)
			if(arr){
				let str = arr.map((obj:any) => obj.taskId).join(',');
				let data = {uniqueId:str,userId:this?.userInfo?.userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
					(rv) => {
						
					}
				).catch(res=>{
				});
			}
		},
		randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值
            let index = Math.floor(Math.random() * (max - min)) + min;
            while(index === num){
                index = Math.floor(Math.random() * (max - min)) + min;
            }
            return index
            
        },
		
		generatePrint(){
            let data:any = {}
            //随机获取图片id
			let generage:any = this.$refs.Generate
			let generateList = generage.sketchboardList
			let isGenerateListChecked = generateList.filter((item:any) => item.checked)
            if(!this.moodBoards.length){ //mood没有图片
                let index1 = -1
                let index2 = -2
                if(isGenerateListChecked.length == 0){ //没pin住
                    index1 = this.randomRange(0, generateList.length, -1)
                    index2 = this.randomRange(0, generateList.length, index1)
                }else if(isGenerateListChecked.lengthh === 1){ //pin住1个
                    generateList.forEach((element:any,index:number) => {
                        if(element.checked){
                            index1 = index
                        }
                    });
                    index2 = this.randomRange(0, generateList.length, index1)
                }else{      //pin住多个
                    let selectIndexList:any = []
                    generateList.forEach((element:any,index:number) => {
                        if(element.pin){
                            selectIndexList.push(index)
                        }
                    });
                    index1 = this.randomRange(0, selectIndexList.length, -1) //pin住的中随机选一个
                    index2 = this.randomRange(0, generateList.length, selectIndexList[index1]) //除了选中的外再来一个
                }
                data = {
                    select1Id:generateList[index1].id,
                    select2Id:generateList[index2].id
                }
            }else{
                let index1 = this.randomRange(0, this.moodBoards.length, -1)
                let index2 = -2
                if(isGenerateListChecked.length == 0){ //没pin住
                    index2 = this.randomRange(0, generateList.length, -1)
                }else if(isGenerateListChecked.lengthh === 1){ //pin住1个
                    generateList.forEach((element:any,index:number) => {
                        if(element.pin){
                            index2 = index
                        }
                    });
                }else{      //pin住多个
                    let selectIndexList:any = []
                    generateList.forEach((element:any,index:number) => {
                        if(element.pin){
                            selectIndexList.push(index)
                        }
                    });
                    index2 = this.randomRange(0, selectIndexList.length, -1) //pin住的中随机选一个
                }
                data = {
                    select1Id:this.moodBoards[index1].resData.id,
                    select2Id:generateList[index2].id
                }
            }
            data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone,
            this.loadingShow = true
            Https.axiosPost(Https.httpUrls.elementGeneratePrint, data).then((rv) =>{
                if(rv){
					this.generateList = []
					let value = {
						id:rv.generateItemId,
						imgUrl:rv.generateItemUrl,
						id_:GO.id++,
						like:rv.isLiked
					}
					this.generateList.push(value)
					this.loadingShow = false
                    
                }
            }).catch(res=>{
                this.loadingShow = false
            })

        },
		scaleImage(index:any){
			let scaleImage:any = this.$refs.scaleImage
			scaleImage.init(this.generateList,index)
		},
		generageAdd(item:any){
			// if(this.isUseGenerate){
			// 	let data = {
			// 		imgId:item.id,
			// 		imgUrl:item.imgUrl,
			// 		designType:'generate',
			// 		level2Type:'',
			// 	}
			// 	this.setSetchboardGenerate(data)
			// }else{
				item.type_ = {
					type1: "generate",
					type2: 'Printboard',
				},
				item.resData = JSON.parse(JSON.stringify(item))
				item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
				this.store.commit("addGenerateMaterialFils", item);
				if(this.driver__.driver){
					driverObj__.moveNext()
				}
			// }
			
		}
     }

})
</script>
<style lang="less" scoped>
.printboard_upload_modal{
    // padding: calc(1rem*1.2) calc(1rem*1.2) calc(1.8rem*1.2) calc(1rem*1.2);
	height: 100%;
    display: flex;
    .printboard_left_upload{
		display: flex;
		flex-direction: column;
        padding-top: calc(4rem*1.2);
        width: 47%;
        .switch_type_list {
            display: flex;
            align-items: center;
            position: relative;

            .switch_type_item {
                display: flex;
                align-items: center;
                // padding: 0 2rem*1.2);
                height: calc(4rem*1.2);
                background: #fff;
                border-radius: calc(0.8rem*1.2);
                line-height: calc(4rem*1.2);
                font-size: var(--aida-fsize1-8);
                // margin-right: 2.2rem*1.2);
                margin-right: calc(8rem*1.2);
                color: #000;
                cursor: pointer;
                position: relative;
                text-align: center;
                transform-origin: left;
                transform: scale(1);
                transition: 0.3s all;
                &.switch_type_item::before {
                    position: absolute;
                    content: "";
                    display: block;
                    background: #000;
                    height: calc(.3rem*1.2);
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: calc(.6rem*1.2);
                    width: 0px;
                    transition: 0.3s all;
                }
                &.select_swtich {
                    color: #000;
                    // font-weight: 900;
                    transform: scale(1.15);
                }
                &.select_swtich::before {
                    width: 100%;
                }

                .switch_icon {
                    font-size: calc(1.8rem*1.2);
                    margin-right: calc(0.8rem*1.2);
                }
            }
        }

        .printboard_body{
			display: flex;
			flex-direction: column;
            // height: calc(100% - 5rem*1.2));
			flex: 1;
			padding-top: calc(2.5rem*1.2);
			height: calc(30rem*1.2);
			overflow-x: hidden;
			border-right: 1px solid #e5e5e5;
			&.printboard_body::-webkit-scrollbar {
            display: none;
        }
            .upload_img_body{
                height: calc(100% - 3rem*1.2);
                overflow-y: auto;
                margin-bottom: calc(1rem*1.2);
				&.upload_img_body::-webkit-scrollbar {
					display: none;
				}
            }
		
            .upload_file_item{
                margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
				// margin: 0 2rem*1.2) 2rem*1.2) 0;
				display: inline-block;
				width: calc(10rem*1.2);
				height: calc(10rem*1.2);
				border: 1px solid #f5f5f5;
				vertical-align: top;
				position: relative;
				text-align: center;
				img{
					width: auto;
					object-fit: cover;
					height: 100%;
					max-width: 100%;
				}

              .upload_file_img_block{
				height: 100%;
			  }

                &.upload_component{
                    border: none;
					:deep(.ant-upload-picture-card-wrapper) {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
					:deep(.ant-upload-select-picture-card) {
						width: calc(6rem*1.2);
						height: calc(6rem*1.2);
						border: calc(0.3rem*1.2) solid #ededed;
						border-radius: calc(1rem*1.2);
						margin: 0;
					}
                }
				.checked{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					cursor: pointer;
					display: none;
					justify-content: center;
					align-items: center;
				}
				&.modal_img_item:hover .checked{
				display: flex;
				}
				.upload_file_item_content{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					position: relative;
					cursor: pointer;
					.upload_img{
						display: block;
						max-height: 100%;
						width: auto;
						max-width: 100%;
						object-fit: cover;
					}
					&:hover .delete_like_file_block{
						display: block;
					}
				}
			}
			.upload_max_tip {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: calc(1.4rem*1.2);
                color: #030303;

                .icon-zhuyi {
                    font-size: calc(1.6rem*1.2);
                    margin-right: calc(0.7rem*1.2);
                }
            }
        }
    }
	.delete_like_file_block{
		display: none;
		width: calc(3.2rem*1.2);
		height: calc(3.2rem*1.2);
		background: rgba(0,0,0,0.6);
		border-radius: calc(0.4rem*1.2);
		position: absolute;
		top: calc(0.9rem*1.2);
		right: calc(0.9rem*1.2);
		text-align: center;
		line-height: calc(3.2rem*1.2);
		left: auto;
		&.left{
			left: calc(.9rem*1.2);
		}
		.icon-shanchu{
			font-size: calc(1.6rem*1.2);
			color: #fff;
		}
		i{
			font-size: calc(1.6rem*1.2);
			color: #fff;
			&.fi-rr-heart{

			}
			&.fi-sr-heart{
				color: red;
			}
		}
	}
	
	.modal_right{
		flex: 1;
		margin-left: calc(3rem*1.2);
		display: flex;
		flex-direction: column;
		.modal_layout,.modal_accomplish{
			.modal_text{
				font-size: var(--aida-fsize1-4);
				font-weight: 400;
				color: rgba(0, 0, 0, 0.45);
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
		.modal_layout{
			.modal_img{
				width: calc(40rem*1.2);
				height: calc(5rem*1.2);
				overflow-x: hidden;
				display: flex;
				flex-direction: row;
				&.modal_img::-webkit-scrollbar {
					display: none;
				}
				.modal_img_item{
					width: calc(4rem*1.2);
					height: calc(4rem*1.2);
					margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
					position: relative;
					cursor: pointer;
					text-align: center;
					overflow: hidden;
					img{
						width: auto;
						height: 100%;
						object-fit: cover;
						max-width: 100%;
					}
					.checked{
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						cursor: pointer;
						display: none;
						justify-content: center;
						align-items: center;
					}
					&.modal_img_item:hover .checked{
						display: flex;
					}
				}
				
			}
		}
		.modal_accomplish{
			// margin-top: 2rem*1.2);
			overflow-x: hidden;
			height: calc(30rem*1.2);
			display: flex;
			flex-direction: column;
			flex: 1;
			position: relative;
			.mark_loading{
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 99;
			}
            // overflow-x: hidden;
			&.modal_accomplish::-webkit-scrollbar {
                display: none;
            }
			.modal_text{
				padding-top: calc(2rem*1.2);
				padding-block: calc(2rem*1.2);
			}
			.input_box{
				input{
					&.forbidden{ 
					}
				}
			}
			.modal_img{
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				position: relative;
				align-content: flex-start;
				.modal_imgItem{
					margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
					display: inline-block;
					width: calc(10rem*1.2);
					height: calc(10rem*1.2);
					border: 1px solid #f5f5f5;
					position: relative;
					cursor: pointer;
					img{
						object-fit: cover;
						height: 100%;
						max-width: 100%;
						width: auto;
					}
					&:hover .delete_like_file_block{
						display: block;
					}
					&.active{
						opacity: 0.5;
					// border: 2px solid;
						border-radius: calc(1rem*1.2);
						transform: scale(0.9);
						img {
						}
						.pin_block{
							pointer-events:none;
						}
						.delete_like_file_block{
							pointer-events:none
						}
					}
				}
			}
		}
	}
}


</style>