aida_front/src/component/HomePage/SketchboardUpload.vue

<template>
    <div class="sketchboard_upload_modal">
        <div class="modal_left">
            <div class="switch_type_list" :class="[driver__.driver?'showEvents':'']">
                <div
                    @click.stop="open(1)"
                    class="switch_type_item"
                    :class="[openClick == 1 ? 'select_swtich' : '']"
                >
                    <span>{{ $t('SketchboardUpload.Upload') }}</span>
                </div>
                <div
                    @click.stop="open(2)"
                    class="switch_type_item"
                    :class="[openClick == 2 ? 'select_swtich' : '']"
                >
                    <span>{{ $t('SketchboardUpload.Library') }}</span>
                </div>
                <div
                    @click.stop="open(3)"
                    class="switch_type_item Guide_1_9"
                    :class="[openClick == 3 ? 'select_swtich' : '', driver__.driver?'showEvents':'']"
                >
                    <span>{{ $t('SketchboardUpload.Generate') }}</span>
                </div>
            </div>
            <div v-show="openClick == 1" class="sketchboard_body">
                <div class="upload_img_body scroll_style">
                    <div class="upload_item">
                        <div 
                            class="upload_file_item"
                            v-for="(file, index) in fileList"
                            :key="file"
                        >
						<div
                                class="upload_file_item_content"
                                v-show="file?.status === 'uploading'"
                            >
                                <a-spin
                                    :indicator="indicator"
                                    tip="Uploading..."
                                />
                            </div>
                            <div
                                class="upload_file_item_content"
                                v-show="file?.status === 'done'"
                            >
                                <img :src="file?.imgUrl" class="upload_img" />
								<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="file" :driver__="driver__.driver"></sketchCategory>
                                <div
                                    class="delete_like_file_block"
                                    @click.stop="deleteFile(file)"
                                >
                                    <span
                                        class="icon iconfont icon-shanchu"
                                    ></span>
                                </div>
                            </div>
                            <div
                                class="pin_block"
                                v-show="file?.status === 'done'"
                            >
                                <a-checkbox v-model:checked="file.pin"
                                    >{{ $t('SketchboardUpload.PIN') }}</a-checkbox
                                >
                            </div>
                        </div>
                        <div
                            class="upload_file_item upload_component"
                            v-show="sketchboardList.length < 20"
                        >
                            <a-upload
                                :action="uploadUrl + '/api/element/upload'"
								:capture="null"
                                list-type="picture-card"
                                :data="{
                                    ...upload,
                                }"
								:multiple="!driver__.driver"
                                :before-upload="beforeUpload"
                                :headers="{ Authorization: token }"
                                v-model:file-list="fileList"
                                :maxCount="20 - sketchboardList.length+fileList.length"
                                accept=".jpg,.png,.jpeg,.bmp"
                                @change="(file) => fileUploadChange(file)"
                            >
								<div
                                    class="upload_tip_block"
									v-show="sketchboardList.length < 20"
                                >
                                    <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('SketchboardUpload.Maximum',{maxImg:20}) }}</span>
				</div>
            </div>

            <Material
                v-show="openClick == 2"
                ref="Material"
                msg="Sketchboard"
                @confirmSelect="confirmSelect"
				:disignTypeList="sketchCatecoryList"
				@setLibrary = setSetchboardGenerate
            ></Material>
            <Generate
                v-show="openClick == 3"
                ref="Generate"
                msg="Sketchboard"
				:sketchCatecoryList="sketchCatecoryList"
                @generateCheckbox="getgenerateCheckbox"
				@setGenerate = setSetchboardGenerate
            ></Generate>
        </div>
		<div class="modal_right">
			<div class="modal_layout">
				<div class="modal_text">
					<div>{{ $t('SketchboardUpload.Thumbnail') }}</div>
					<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
				</div>
				<div class="modal_img modal_img_x" v-mousewheel>
					<div class="mousewheel">
						<div class="modal_img_item" v-for="item,index in sketchboardList" :key="item" @click="deleteFile(item)">
							<img v-lazy="item.imgUrl">
							<div class="checked" >
								<i class="fi fi-rr-trash"></i>
							</div>
						</div>
					</div>
					
				</div>
			</div>
			<div v-show="openClick == 3" class="modal_accomplish">
				<div class="input_border">
					<div class="Guide_1_9_2 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
						<div class="input_box_btnBox">
							<input class="search_input" 
								@click="inputFocus()"
								@input="ifMaximumLength" 
								@keydown.enter="getgenerate" 
								:maxlength='inputShow?0:9999' 
								:class="{forbidden:generateCheckbox}" 
								:readonly="generateCheckbox" 
								:placeholder="$t('PrintboardUpload.inputContent1')" 
								v-model="captionGeneration">
							<i class="icon iconfont icon-xiala" :class="{active:isTextarea,forbidden:generateCheckbox}" @click.stop="setTextareaShow"></i>
						</div>
						<textarea class="search_textarea" v-show="isTextarea && !generateCheckbox" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" v-model="captionGeneration">
						</textarea>
						<!-- <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div> -->
						<div v-show="!isGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
							{{ $t('LibraryPage.Generate') }}
						</div>
						<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
							<i class="fi fi-br-loading"></i>
						</div>
						<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
							{{$t('Generate.Close')}}
						</div>
						<span ref="inputShowText"></span>
					</div>
					<div class="search_keyword" v-show="isInputFocus" @click.stop="">
						<div class="search_keyword_center">
							<div class="search_keyword_center_left">
								<div v-for="item in workspace?.keyWord?.[upload.level1Type]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
							</div>
						</div>
					</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_13_2" :class="[item.status != 'Success'?'hideEvents':'',driver__.driver?'showEvents':'',item?.checked?'active':'']" :key="item">
						<!-- <img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt=""> -->
						<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
						<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="generateList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
						<div
							class="delete_like_file_block left1"
						>
							<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
							<i v-else class="fi fi-sr-heart" :adminLike="!!item.like"  @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="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
							<span class="icon iconfont icon-shanchu operate_icon"></span>
						</div>
						<div class="pin_block">
							<a-checkbox v-model:checked="item.pin">{{ $t('SketchboardUpload.PIN') }}</a-checkbox>
						</div>
					</div>
					
				</div>
				<div class="mark_loading" v-show="loadingShow">
						<a-spin size="large" />
						
						<div v-show="remGenerate" class="mark_loading_btn" :class="[driver__.driver?'hideEvents':'']" @click="removeGenerate">{{$t('Generate.Close')}}</div>
					</div>
			</div>
			
		</div>
		<scaleImage ref="scaleImage"></scaleImage>
		
		<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
       	
		
    </div>
</template>
<script lang="ts">
import { defineComponent, h, ref, createVNode,computed,inject, nextTick } from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
import GO from "@/tool/GO";
import { useStore } from "vuex";
import { message, Upload, Modal } from "ant-design-vue";
import Material from "@/component/HomePage/Material.vue";
import Generate from "@/component/HomePage/Generate.vue";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import { Https } from "@/tool/https";
import { openGuide,driverObj__ } from "@/tool/guide";
import { useI18n } from "vue-i18n";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import sketchCategory from "@/component/HomePage/sketchCategory.vue";

export default defineComponent({
    components: { Material, Generate,scaleImage,sketchCategory },
    setup() {
        let fileList: any = ref([
		]);
        let openClick: any = ref(1);
		let generateList:any = ref([
		])
        let store:any =useStore()

		let generateCheckbox:any = ref()
		let loadingShow = ref(false)
		let isGenerate = ref(false)
			
		let sketchCatecoryList:any = computed(()=>{
			return store.state.Workspace.workspacePosition
		})
		let workspace:any = ref({})
		let inputShow = ref(false)
		let inputTime = ref()
		let sketchboardList:any = computed(()=>{
			return store.state.UploadFilesModule.sketchboard
		})
		let {t} = useI18n()
		let driver__:any = inject('driver__')
		let isTest = ref()
		let userInfo:any = {}
		let generateTime:any = ref()
		let generateProceedList = 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,
            openClick,
			generateList,
			store,
			generateCheckbox,
			loadingShow,
			isGenerate,
			sketchCatecoryList,
			workspace,
			inputShow,
			inputTime,
			sketchboardList,
			t,
			driver__,
			isTest,
			userInfo,
			generateTime,
			remGenerate,
			generateProceedList,
			remGenerateTime,
			useGenerate,
			isUseGenerate,
        };
    },
    data() {
        return {
            swtich_type: "upload",
            indicator: h(LoadingOutlined, {
                style: {
                    fontSize: "2.4rem",
                },
                spin: true,
            }),
            upload: {
                isPin: 0,
                level1Type: "Sketchboard",
				gender:'',
                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            },
            token: "",
            uploadUrl: "",
			captionGeneration:'',
			isTextarea:false,
			isInputFocus:false,
        };
    },
    computed: {
        getSketchLabel(value) {
            return (value: any) => {
                let lable = "";
                for (let item of this.sketchCatecoryList) {
                    if (item.value === value) {
                        lable = item.label;
                        break;
                    }
                }
                return lable;
            };
        },
    },
	directives:{
		mousewheel:{
			mounted (el) {
				// let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
				let dom:any = document.getElementsByClassName('modal_img_x')
				let mouseover = ()=>{
					// bodyDom.classList.add('active')
				}
				let mouseleave = ()=>{
					// bodyDom.classList.remove('active')
				}
				dom.forEach((item:any) => {
					item.addEventListener('mouseover',mouseover)
					item.addEventListener('mouseleave',mouseleave)
				});
				
			
				el.addEventListener('wheel',(e:WheelEvent)=>{
					let num = 0
					if(e.deltaY > 0){
						num = 25
					}else{
						num = -25
					}
					el.scrollBy(num, 0);
				},true)
			}
		}
	},
	watch:{
		workspace(newVal,oldVal){
			this.upload.gender = newVal?.sexEnum?.name
		},
		sketchboardList:{
			handler(newVal:any,oldVal:any){
				if(newVal.length>=2 && this.driver__.driver&& newVal.length!=oldVal.length){
					if(this.driver__.driver){
						// driverObj__.moveTo(22)
					}
				}
			}
		},
		driver__:{
			handler(newVal,oldVal){
				if(newVal.index >= 15 && newVal.index <= 16){
					if(this.driver__.driver){
						// driverObj__.moveTo(15)
					}
				}else{
				}
			}
		}
	},
    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();
		this.workspace = computed(()=>{
			return  this.store?.state?.Workspace?.workspace
		})
		if(this.driver__.driver){
			this.captionGeneration = 'A detailed sketch of an elegant blouse with a high neck, flowing sleeves, and lace trim, highlighting texture and style.'
		}else{
			this.captionGeneration = ''
		}
    },
    methods: {
		setUseGenerate(){
			this.isUseGenerate = !this.isUseGenerate
			let sketchMaterialFiles:any = computed(()=>{
				return this.store.state.UploadFilesModule.sketchMaterialFiles
			})
			let Material:any = this.$refs.Material
			Material.setUseGenerate(sketchMaterialFiles.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
				});
			}
		},
        open(num: Number) {
            this.openClick = num;
            if (num == 2) {
                let material: any = this.$refs.Material;
                material.init("Sketchboard");
            } else if (num == 3) {
                // let Generate:any = this.$refs.Generate
                // Generate.init('generate')
				nextTick().then(()=>{
					if(this.driver__.driver){
						driverObj__.moveNext()
					}
				})
            }
        },
		scaleImage(index:any){
			let scaleImage:any = this.$refs.scaleImage
			scaleImage.init(this.generateList,index)
		},
		getgenerateCheckbox(value:any){
			this.generateCheckbox = value
		},
        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){
					let category:any={
						value:'',
						name:'',
					}
					this.sketchCatecoryList.forEach((item:any) => {
						if(item.value == res.data.level2Type){
							category.value = item?.value
							category.name = item?.name
						}
					});
					file.imgUrl = res.data.url;
					file.resData = res.data;
					// file.pin = false;
					//category用来数据处理
					file.categoryValue = category?.name;
					file.category = category?.value;
					file.categoryShow = false;
					file.id_ = GO.id++
					file.id = res.data.id
					file.type_ = {
						type1:'upload',
						type2:'Sketchboard'
					};
					let fileList = this.fileList.filter(
						(v: any) => v.status === "done"
					);
					this.store.commit("setSketchboardFile", fileList);
				}else{
					bor = false
				}
            } else if (file.status === "error") {
				bor = false
            }
			if(!bor){
				let index = -1;
                let res:any = JSON.parse(file.xhr.response);
                this.fileList.forEach((ele: any, index1: any) => {
                    if (file.uid === ele.uid) {
                        index = index1;
                    }
                });
                if (index > -1) {
                    this.fileList.splice(index, 1);
                }
                // message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
                message.warning(res.errMsg);
			}
        },

        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(this.t('SketchboardUpload.jsContent2'));
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                message.info(this.t('SketchboardUpload.jsContent3'));
            }
            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
        },
		setTextareaShow(){
			if(this.generateCheckbox) return
			this.isTextarea = !this.isTextarea
		},
		cliSetKeyword(value:any){
			let str = ''
			if(this.captionGeneration[this.captionGeneration.length-1] != ',' && this.captionGeneration.length != 0){
				str = ','
			}
			this.captionGeneration += str + value
		},
		ifMaximumLength(){
			clearTimeout(this.inputTime)
			let inputBox = document.getElementsByClassName('sketchboard_upload_modal')[0].getElementsByClassName('input_box')[0]
			let input = inputBox.getElementsByClassName('search_input')[0]
			this.inputTime = setTimeout(()=>{
				// let num1 = ((input as HTMLInputElement).value.match(/ /g) || []).length
				// let num2 = (input as HTMLInputElement).value.split(' ').length
				
				if(this.captionGeneration?.split(/\s+/).length > 250){
					(this.$refs.inputShowText as any).innerHTML = this.t('SketchboardUpload.maximumLength')
					this.inputShow = true
				}else{
					this.inputShow = false
				}
			},500)
		},
		inputFocus(){
			if(this.isInputFocus) return
			if(this.generateCheckbox) return
		    this.isInputFocus = true
			let setDomCli = ()=>{
				this.isInputFocus = false
				document.removeEventListener('click',setDomCli)
			}
			setTimeout(()=>{
				document.addEventListener('click',setDomCli)
			},200)
		},
        deleteFile(item: any) {
			if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
				item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
				this.store.commit("addGenerateMaterialFils", item);
			}else{
				this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
				let moodboard 
				this.store.state.UploadFilesModule.sketchboardFiles.forEach((items:any,index:Number)=>{
					if(items.id_ == item.id_){
						moodboard = index
						
					}
				})
				this.fileList.splice(moodboard,1)
				this.store.commit("setSketchboardFile", this.fileList);
			}
        },
		likeFile(item:any,str:string){
			if(str == 'like'){
				let data = {
					generateDetailId:item.id,
					level1Type:"Sketchboard",
					level2Type: item.category,
					gender:this.workspace.sex,
					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=>{
				});
			}
		},
		deleteGenerate(index:any){
			if(this.isGenerate)return
			let _this = this
            Modal.confirm({
                title: this.t('LibraryPage.jsContent1'),
                icon: createVNode(ExclamationCircleOutlined),
                okText: 'Yes',
                cancelText: 'No',
				mask:false,
                centered:true,
                onOk() {
					_this.generateList.splice(index,1)
                }
            });
		},
        recollection() {
			this.isUseGenerate = false
			this.useGenerate = {
				imgId : '',
				imgUrl:1,
				checked:false,
				level2Type:'',
				designType:''
			}
            let arr = JSON.parse(
                JSON.stringify(
                    this.store.state.UploadFilesModule.allBoardData
                        .sketchboardFiles
                )
            );
			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("setSketchboardGenerateFiles", setboard.generate);
			this.store.commit("setSketchboardMaterialFiles", setboard.material);
			this.store.commit("setSketchboardFile", setboard.moodboard);
			this.fileList = setboard.moodboard
        },
        confirmSelect(event: any) {
            for (let item of event) {
                let data = {
                    imgUrl: item.url,
                    resData: item,
                    pin: false,
                    status: "done",
                    category: item.level2Type || "Outwear",
                    categoryShow: false,
                };
                if (this.fileList.length == 15) {
                    message.warning(
                        this.t('SketchboardUpload.jsContent4')
                    );
                    break;
                }
                this.fileList.push(data);
            }
            this.store.commit("setSketchboardFile", this.fileList);
        },
		//发送请求生成图片
		getgenerate(){
			clearInterval(this.remGenerateTime)
			this.remGenerate = false
			// this.sketchCatecoryList = this.store.state.Workspace.workspacePosition
			let sketchCatecoryList = this.sketchCatecoryList
			// if(this.isTest){//试用用户禁止使用
			// 	message.warning(
			// 		this.t('isTest.available')
			// 		);
			// 	return
			// }
			if(this.isGenerate){
				return
			}
			let generage:any = this.$refs.Generate
			let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
			let data = {
				generateType:generateType,
				// designType:this.useGenerate.designType,
				designType:'collection',
				collectionElementId:this.useGenerate.imgId,
				level1Type:this.upload.level1Type,
				level2Type:this.useGenerate.level2Type,
				text:this.captionGeneration,
				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
				userId:this?.userInfo?.userId,
				isTestUser:this.driver__.driver?false:this.isTest,
				version:1,//为1就是Print
				gender:this.workspace.sex,
			}
			if(generateType == 'image'){
				if(this.useGenerate.imgId){
					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 > 250){
						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 > 250){
							message.info(
								this.t('PrintboardUpload.jsContent5')
							);
						return
						}
					}else{
						message.info(
							this.t('PrintboardUpload.jsContent6')
						);
						return
					}
				}else{
					message.info(
						this.t('PrintboardUpload.jsContent4')
					);
					return
				}
			}

			this.isGenerate = true
			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.isGenerate = false
							return
						}
					}
					// rv.uniqueId.forEach((item:any) => {
					// 	let arr:any = {}
					// 	arr.taskId = item
					// 	arr.status = 'execution'
					// 	this.generateList.unshift(arr)
					// });
					this.setGenerate(rv.uniqueId)
					
                }
            ).catch(res=>{
				this.isGenerate = false
            });
		},
		setGenerate(dataList:any){
			let generage:any = this.$refs.Generate
			let sketchCatecoryList = this.sketchCatecoryList
			let categoryValue:any
			let data = dataList
			let dataNum = dataList.length
			this.remGenerateTime = setTimeout(()=>{
				this.remGenerate = true
			},10000)
			generage.sketchboardList.forEach((item:any) => {
				if(item.checked){
					categoryValue = item.categoryValue
				}
			});
			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.isGenerate){//防止取消后有正在执行的获取状态
							this.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
									element.id_ = GO.id++
									this.sketchCatecoryList.forEach((itemCategory:any) => {
										if(itemCategory.value == element.category){
											element.categoryValue = itemCategory?.name
											element.category = itemCategory?.value
										}
									});
									this.generateList.unshift(element)
									data = data.filter((item:any) => item !== element.taskId);
								}
							});
							if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length == data.length)){
								if(rv.filter((item:any)=>item.status == 'Invalid').length == dataNum){
									message.info(this.t('Generate.effectPoor'));
								}
								nextTick().then(()=>{
									if(this.driver__.driver){
										driverObj__.moveNext()
									}
								})
								clearInterval(this.generateTime)
								clearInterval(this.remGenerateTime)
								this.remGenerate = false
								this.isGenerate = false
							}
						}
					}
				).catch(res=>{
					clearInterval(this.generateTime)
					clearInterval(this.remGenerateTime)
					this.remGenerate = false
					this.isGenerate = false
				});
			},1000)
		},
		removeGenerate(){
			//取消操作
			this.isGenerate = false
			this.remGenerate = false
			clearInterval(this.generateTime)
			if(this.generateProceedList){
				let str = this.generateProceedList.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) => {
						this.generateProceedList = []
					}
				).catch(res=>{
				});
			}
		},
		generageAdd(item:any){
			item.type_ = {
                type1: "generate",
                type2: 'Sketchboard',
            },
			item.resData = JSON.parse(JSON.stringify(item))
			item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
            this.store.commit("addGenerateMaterialFils", item);
			nextTick().then(()=>{
				if(this.driver__.driver){
					driverObj__.moveNext()
				}
			})
		}
    },
});
</script>
<style lang="less" scoped>
.sketchboard_upload_modal {
	height: 100%;
    display: flex;
	.modal_left {
        padding-top: calc(4rem*1.2);
        width: 47%;
		display: flex;
		flex-direction: column;
		.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);
                }
            }
        }
		.sketchboard_body {
			// 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;
			display: flex;
			flex-direction: column;
        &.moodboard_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(4rem*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;
			img{
				width: 100%;
				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%;
                    max-width: 100%;
                }
				&:hover .delete_like_file_block{
						// display: block;
						opacity: 1;
					}
               

               
            }
			
		}
		.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);
			}
		}
    }
	}
	
	.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;
				overflow-y: hidden;
				&.modal_img::-webkit-scrollbar {
					display: none;
				}
				.mousewheel{
					display: flex;
				}
				.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;
					text-align: center;
					cursor: pointer;
					overflow: hidden;
					flex-shrink: 0;
					img{
						// width: 100%;
						width: auto;
						height: 100%;
						object-fit: contain;
					}
					.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;
				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{
				z-index: 1;
				input{
					&.forbidden{
						cursor:not-allowed;
					}
				}
			}
			.modal_img{
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-content: flex-start;
				position: relative;
				.modal_imgItem{
					margin: 0 calc(2rem*1.2) calc(4rem*1.2) 0;
					display: inline-block;
					width: calc(10rem*1.2);
					height: calc(10rem*1.2);
					border: 1px solid #f5f5f5;
					position: relative;
					cursor: pointer;
					&:hover .delete_like_file_block{
						display: block;
						opacity: 1;
					}
					img{
						object-fit: cover;
						width: 100%;
						height: 100%;
					}
					&.active{
						opacity: 0.5;
					// border: 2px solid;
						border-radius: calc(1rem*1.2);
						transform: scale(0.9);
						// img {
						// }
						.operate_file_block{
							pointer-events:none
						}
						.pin_block{
							pointer-events:none
						}
						.delete_like_file_block{
							pointer-events:none
						}
					}
					
				}
			}
		}
	}
}
</style>