aida_front/src/component/HomePage/Generate.vue

<template>
    <div class="generate">
        <div v-if="type_.type2 == 'Sketchboard'|| type_.type2 == 'Printboard'"  class="generate_checkbox Guide_1_2_2" :class="[driver__.driver?'hideEvents':'']">
            <div v-show="type_.type2 != 'Sketchboard'">
                <label>
                    <input
                        type="checkbox"
                        v-model="checkbox[0].type"
                        @click="setKeyword(0)"
                    />
                    <span>{{ $t('Generate.ImageOnly') }}</span>
                </label>
            </div>
            <div>
                <label
				:class="[driver__.driver ? driver__.index == 29?'showEvents':'':'',type_.type2 == 'Sketchboard'?'Guide_1_9_1':'']"
				>
                    <input
                        type="checkbox"
                        v-model="checkbox[1].type"
                        @click="setKeyword(1)"
                    />
                    <span>{{ $t('Generate.TextOnly') }}</span>
                </label>
            </div>
            <div>
                <label class="Guide_1_2_3" :class="[driver__.driver?'showEvents':'']">
                    <input
                        type="checkbox"
                        v-model="checkbox[2].type"
                        @click="setKeyword(2)"
                    />
                    <span>{{ $t('Generate.TextImage') }}</span>
                </label>
            </div>
			<div v-if="type_.type2 == 'Printboard'" class="printModel">
				<div @click.stop="PrintModel" class="Guide_1_2_4" :class="[driver__.driver?'showEvents':'']">{{ printModel.name }}</div>
				<ul v-show="printModel.optype" class="Guide_1_2_5" :class="[driver__.driver?'showEvents':'']">
					<li class="printModel_item" @click="setprintModel(1)">{{ $t('Generate.Model1') }}</li>
					<li class="printModel_item" @click="setprintModel(2)">{{ $t('Generate.Model2') }}</li>
					<li class="printModel_item" @click="setprintModel(3)">{{ $t('Generate.Model3') }}</li>
					<!-- <li v-show="(sketchboardList.length>=1 && moodboarList.length>=1&& checkbox[0].type) || (sketchboardList.length>=2 && checkbox[0].type) " class="printModel_item" @click="setprintModel(4)">{{ $t('Generate.Merge') }}</li> -->
				</ul>
			</div>
        </div>
        <div v-else class="input_border" >
			<div class="input_box  Guide_1_5" :class="[inputShow?'active':'',]">
				<input
					class="search_input"
					@input="ifMaximumLength"
					:placeholder="$t('Generate.inputContent1')"
					:maxlength='inputShow?0:9999'
					v-model="searchPictureName"
					@keydown.enter="getgenerate()"
				/>
				<!-- <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('Generate.Generate') }}</div> -->
				<div v-show="!isGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
					{{ $t('Generate.Generate') }}
					<!-- <div v-show="isGenerate"><a-spin size="large" /></div> -->
				</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>
        <div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img Guide_1_6">
            <div class="upload_item">
                <div
                    class="upload_file_item Guide_1_2_7"
                    v-for="(file, index) in sketchboardList"
                    :key="file"
					@click.stop="setSketchboardItem(file)"
					:class="[file?.checked?'active':'',checkboxImage? 'forbidden':'',driver__.driver?'showEvents':'']"
                >
                    <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" />
                        <div
                            class="delete_file_block"
							:class="[driver__.driver?'hideEvents':'']"
                            @click.stop="deleteFile(index)"
                        >
                            <span class="icon iconfont icon-shanchu"></span>
                        </div>
                    </div>
                </div>
                <div
                    class="upload_file_item upload_component Guide_1_2_6"
					:class="[driver__.driver?'showEvents':'']"
                >
                    <a-upload
						:capture="null"
                        :action="uploadUrl + '/api/element/upload'"
                        list-type="picture-card"
                        :data="{
                            ...upload,
                        }"
						:disabled="checkbox[1].type"
                        :headers="{ Authorization: token }"
                        v-model:file-list="sketchboardList"
                        :before-upload="beforeUpload"
                        multiple
                        accept=".jpg,.png,.jpeg,.bmp"
                        @change="(file) => fileUploadChange(file)"
                    >
                        <div
                            class="upload_tip_block"
                        >
                            <i class="fi fi-br-upload"></i>
                            <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
                        </div>
                    </a-upload>
                </div>
            </div>
        </div>
        <div v-else class="generage_img Guide_1_6"  :style="[loadingShow?'overflow:hidden':'']">
            <div
                class="generage_img_item"
                v-for="(item, index) in fileList"
                :key="item.imgUrl"
                @click="generageAdd(item)"
                :class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'']"
            >
				<!-- <img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt=""> -->
				<img v-lazy="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>
			
        </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>
		<scaleImage ref="scaleImage"></scaleImage>
		
    </div>
</template>
<script lang="ts">
import { LoadingOutlined } from "@ant-design/icons-vue";
import { message, Upload } from "ant-design-vue";
import { defineComponent, computed, h, ref, nextTick, inject } from "vue";
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import GO from "@/tool/GO";
import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
// import { forEach } from "jszip";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
import { useI18n } from "vue-i18n";
export default defineComponent({
	components: {
		scaleImage,	
	},
    props: ["msg",'sketchCatecoryList'],
    setup() {
        // console.log(prop.msg);
        let checkbox = ref([
            {
                name: "image",
                type: true,
            },
            {
                name: "text",
                type: false,
            },
            {
                name: "text-image",
                type: false,
            },
        ]);
		let checkboxImage = ref()
        let imgList = ref([]);
        let selectImgList: any = ref([]);
        let selectImgListIds: any = ref([]);
        let isShowLoading: any = ref(false);
        let selectCode: any = ref("");
        let currentPage: any = ref(1);
        let searchPictureName = ref("");
        let pageSize = ref(20);
        let total = ref(0);
        let searcMaterialhName: any = ref(""); //搜索名字
        let designType: any = ref(null);
        let store = useStore();
        let fileList: any = ref([
          
        ]);
		let sketchboardList:any = ref([])
		let collectionElementid = ref()
		let level2Type = ref('')
		let printModel = ref({
			num:'',
			optype:false,
			value:'Painting Style',
			name:useI18n().t('Generate.Model'+1)
		})
		// let printBoards:any = computed(()=>{return store.state.UploadFilesModule.printboard})
		let moodboarList:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
		// let sketchCatecoryList:any = ref([])
		let workspace:any = ref({})

		let loadingShow = ref(false)
		let isGenerate = ref(false)//判断是否正在进行generate
		let inputShow = ref(false)//表示是否出现红框
		let inputTime = ref()
		let driver__:any = inject('driver__')
		let {t} = useI18n()
		let isMmerge = ref(false)

		let isTest = ref()
		let userInfo:any = {}
		let generateId:any = ref([])
		let generateTime:any = ref()
		let generateProceedList = ref([])
		let remGenerate:any = ref(false)
		let remGenerateTime:any = ref()
        return {
            imgList,
            selectImgList,
            selectImgListIds,
            isShowLoading,
            selectCode,
            currentPage,
            searchPictureName,
            pageSize,
            total,
            searcMaterialhName,
            designType,
            checkbox,
            store,
            fileList,
			sketchboardList,
			collectionElementid,
			level2Type,
			checkboxImage,
			printModel,
			loadingShow,
			isGenerate,
			// printBoards,
			moodboarList,
			// sketchCatecoryList,
			workspace,
			inputShow,
			inputTime,
			driver__,
			t,
			isMmerge,
			isTest,
			userInfo,
			generateId,
			generateTime,
			generateProceedList,
			remGenerate,
			remGenerateTime,
        };
    },
    data(prop) {
        return {
            indicator: h(LoadingOutlined, {
                style: {
                    fontSize: "2.4rem",
                },
                spin: true,
            }),
            upload: {
                isPin: 0,
				gender:'',
                level1Type: prop.msg,
                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            },
            token: "",
            uploadUrl: "",
           
            type_: {
                type1: "generate",
                type2: prop.msg,
            },
			workspaceCom:{},
        };
    },
	
    mounted() {
        // this.fileList.forEach((item,index)=>{
        // 	item.checked = true
        // 	item.type_ = 'generate'
        // 	item.id_ = GO.id++
        // })
        // this.store.commit("addGenerateFils", this.fileList);
		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.workspaceCom = computed(()=>{
			return  this.store?.state?.Workspace?.workspace
		})
		this.workspace = this.store.state.Workspace.workspace
		if(this.type_.type2 == 'Sketchboard'){
			this.checkbox=[
            {
                name: "image",
                type: false,
            },
            {
                name: "text",
                type: true,
            },
            {
                name: "text-image",
                type: false,
            },
        ]
		}
		this.$emit('generateCheckbox',this.checkbox[0].type)
    },
	watch:{
		driver__:{
			handler(newVal,oldVal){
				if(this.type_.type2 == 'Printboard'){
					if(newVal.index >= 14 && newVal.index < 15){
						this.setKeyword(newVal.index-14)
					}else{
					}
				}else if(this.type_.type2 == 'Sketchboard'){
					
				}
				
			}
		},
		workspaceCom(newVal,oldVal){
			this.workspace = newVal
			this.upload.gender = newVal?.sexEnum?.name
		},
		moodboarList(newVal,oldVal){
			if(newVal.length>=1 || this.sketchboardList.length >= 2){
			}else{
				this.printModel = {
					num:'',
					optype:false,
					value:'Painting Style',
					name:this.t('Generate.Model'+1)
				}
			}
		},
	},
    computed: {
        getSketchLabel(value: any) {
            return (value: any) => {
                let lable = "";
                for (let item of this.sketchCatecoryList) {
                    if (item.value === value) {
                        lable = item.label;
                        break;
                    }
                }
                return lable;
            };
        },
    },
    methods: {
        generageAdd(data: any) {
            data.type_ = this.type_;
			data.resData = JSON.parse(JSON.stringify(data))
			let maxImg = 8
			if(this.type_.type2 == 'Sketchboard'){
				maxImg = 20
			}
			data.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:maxImg})
            this.store.commit("addGenerateMaterialFils", data);
			// console.log(this.fileList);
			let moodboard = this.store.state.UploadFilesModule.moodboardGenerateFiles
			if(moodboard.length >= 2 && this.driver__.driver){
				driverObj__.moveNext()
			}
        },
		
        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('Generate.jsContent1'));
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                message.info(this.t('Generate.jsContent2'));
            }
            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
        },
        setKeyword(num: any) {
            this.checkbox.forEach((v: any) => {
                v.type = false;
            });
			
			nextTick().then(()=>{
				this.checkbox[num].type = true
				this.$emit('generateCheckbox',this.checkbox[0].type)
				this.checkboxImage = this.checkbox[1].type
				// if(this.checkboxImage){
				// 	this.sketchboardList.forEach((v:any)=>{
				// 		v.checked = false
				// 	})
				// }
			})
			if(num == 1){
				this.level2Type = ''//点击文字生成就把衣服类型清空
			}
			if(num == 2 || num == 1){
				if(this.driver__.driver){
					driverObj__.moveNext()
				}
				this.printModel = {
					num:'',
					optype:false,
					value:'Painting Style',
					name:this.t('Generate.Model'+1)
				}
			}
        },
		PrintModel(){
			if(!this.printModel.optype){
				document.addEventListener('click',this.removePrintModel)
			}
			this.printModel.optype = !this.printModel.optype
			nextTick().then(()=>{
				if(this.driver__.driver){
					driverObj__.moveNext()
				}
			})
		},
		removePrintModel(){
			this.printModel.optype = false
			document.removeEventListener('click',this.removePrintModel)
		},
		setprintModel(num:any){
			let arr = ["Painting Style","Illustration Style","Real Style"]
			if(num == 4){
				this.printModel = {
					num : 'Generate',
					optype:false,
					value:'',
					name:this.t('Generate.Merge')
				}
			}else{
				this.printModel = {
					num : num,
					value:arr[num-1],
					optype:false,
					name:this.t('Generate.Model'+num)
				}
			}
			nextTick().then(()=>{
				if(this.driver__.driver){
					driverObj__.moveNext()
				}
			})
		},
		getgenerate(){
			clearInterval(this.remGenerateTime)
			this.remGenerate = false
			// if(this.isTest){//试用用户禁止使用
			// 	message.info(
			// 		this.t('isTest.available')
			// 		);
			// 	return
			// }
			if(this.isGenerate){
				return
			}
			// if(!this.searchPictureName){
			// 	message.info(
			// 		this.t('Generate.jsContent3')
			// 		);
			// 	return
			// }
			if(this.searchPictureName){
				let arr = this.searchPictureName.split(/\s+/).length
				if(arr > 75){
					message.info(
					this.t('Generate.jsContent4')
					);
					return
				}
			}else{
				message.info(
					this.t('Generate.jsContent5')
				);
				return
			}
			let data = {
				generateType:'text',
				designType:'',
				collectionElementId:'',
				level1Type:this.upload.level1Type,
				level2Type:'',
				text:this.searchPictureName,
				userId:this?.userInfo?.userId,
				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
				version:1,//为1就是Print
				isTestUser:this.driver__.driver?false:this.isTest,
				gender:'',
			}
			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.Moodboard')}));
						}else if(rv.leftUsageCount == 0){
							message.warning(this.t('Generate.jsContent9',{str:this.t('collectionModal.Moodboard')}));
							this.isGenerate = false
							return
						}
					}
					// rv.uniqueId.forEach((item:any) => {
					// 	let arr:any = {}
					// 	arr.taskId = item
					// 	arr.status = 'execution'
					// 	this.fileList.unshift(arr)
					// });
					this.setGenerate(rv.uniqueId)
					
                }
            ).catch(res=>{
				this.isGenerate = false
            });
			// Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
            //     (rv) => {
			// 		console.log(rv)
			// 		if(rv){
			// 			this.fileList = []
			// 			let arr
			// 			rv.generatedCollectionItems.forEach((v:any,index:number)=>{
			// 				arr = {
			// 					id:rv.generatedCollectionItems[index].generateItemId,
			// 					imgUrl:rv.generatedCollectionItems[index].generateItemUrl,
			// 					like:rv.generatedCollectionItems[index].isLiked
			// 				}
			// 			this.fileList.push(arr)
			// 			this.loadingShow = false
			// 			})
			// 			nextTick().then(()=>{
			// 				if(this.driver__.driver){
			// 					driverObj__.moveNext()
			// 				}
			// 			})
			// 		}
            //     }
            // ).catch(res=>{
			// 	this.loadingShow = false
            // });
		},
		setGenerate(dataList:any){
			this.remGenerateTime = setTimeout(()=>{
				this.remGenerate = true
			},10000)
			let data = dataList
			this.generateTime = setInterval(()=>{
				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.fileList.unshift(element)
									data = data.filter((item:any) => item !== element.taskId);
								}
							});
							if(rv.length == 4 && rv.filter((item:any)=>item.status == 'Invalid').length == 4) {
								message.info(this.t('Generate.effectPoor'));
							}
							if(rv.filter((item:any)=>item.status == 'Waiting').length == 0 && rv.filter((item:any)=>item.status == 'Executing').length == 0){
								nextTick().then(()=>{
									if(this.driver__.driver){
										driverObj__.moveNext()
									}
								})
								this.fileList = this.fileList.filter((item:any)=>item.status == 'Success')
								clearInterval(this.generateTime)
								clearInterval(this.remGenerateTime)
								this.isGenerate = false
								this.remGenerate = false
							}
						}
					}
				).catch(res=>{
					clearInterval(this.generateTime)
					clearInterval(this.remGenerateTime)
					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=>{
				});
			}
		},
		ifMaximumLength(){
			clearTimeout(this.inputTime)
			let inputBox = document.getElementsByClassName('generate')[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.searchPictureName?.split(/\s+/).length > 75){
					(this.$refs.inputShowText as any).innerHTML = this.t('Generate.maximumLength')
					this.inputShow = true
				}else{
					this.inputShow = false
				}
			},500)
		},
		
        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:'',
					}
					if(this.sketchCatecoryList && this.type_.type2 == 'Sketchboard'){
						this.sketchCatecoryList.forEach((item:any) => {
							if(item.name == res.data.level2Type){
								category.value = item?.value
								category.name = item?.name
							}
						});
					}
					file.id = res.data.id;
					file.imgUrl = res.data.url;
					file.resData = res.data;
					file.type_ = "upload";
					file.id_ = GO.id++;
					file.categoryValue = category?.value;
					file.category = category?.name;
					let fileList = this.sketchboardList.filter(
						(v: any) => v.status === "done"
					);
					let arr = this.store.state.UploadFilesModule.sketchboard;
					if (arr.length >= 8) {
						message.info(this.t('Generate.jsContent6'));
					} else {
						this.sketchboardList = fileList
					}
					nextTick().then(()=>{
						if(this.driver__.driver){
							driverObj__.moveNext()
						}
					})
				}else{
					bor = false
				}
                
            } else if (file.status === "error") {
					bor = false
            }
			if(!bor){
				let index = -1;
                let res:any = JSON.parse(file.xhr.response);
                this.sketchboardList.forEach((ele: any, index1: any) => {
                    if (file.uid === ele.uid) {
                        index = index1;
                    }
                });
                if (index > -1) {
                    this.sketchboardList.splice(index, 1);
                }
                // message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
                message.warning(res.errMsg);
			}
        },
       
		setSketchboardItem(item:any){
			if(this.checkboxImage){
				return
			}
			let parent:any = this.$parent
			
			if(item.checked){
				item.checked = false
				this.collectionElementid = ''
			}else{
				let obj = {
					imgId : item.id,
					imgUr: item.imgUrl,
					level2Type:item.category,
					designType:'collection'
				}
				// parent.useGenerate.designType = 'collection'
				this.$emit('setGenerate',obj)
				this.sketchboardList.forEach((v:any)=>{
					if(v.checked){
						v.checked = false
					}
				})
				item.checked = true
				this.collectionElementid = item.id
			}
			this.level2Type = item.category
			if(this.driver__.driver){
				driverObj__.moveNext()
			}
		},
        deleteFile(item: any) {
			// this.sketchboardList
			this.collectionElementid = ''
			this.sketchboardList.splice(item, 1);
			if((this.sketchboardList.length<2 && this.moodboarList.length == 0) || this.sketchboardList.length == 0){
				this.printModel = {
					num:'',
					optype:false,
					value:'Painting Style',
					name:this.t('Generate.Model'+1)
				}
			}
        },
		likeFile(item:any,str:string){
			if(str == 'like'){
				let data = {
					generateDetailId:item.id,
					level1Type:"Moodboard",
					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=>{
				});
			}
			
		},
		scaleImage(index:any){
			let scaleImage:any = this.$refs.scaleImage
			scaleImage.init(this.fileList,index)
		},
        closeModal() {
            // this.myMaterialModalShow = false
            this.searchPictureName = "";
            this.designType = null;
            this.selectImgList = [];
            this.selectImgListIds = [];
            this.imgList = [];
            this.currentPage = 1;
            // this.pageSize = 10;
            this.total = 0;
        },
    },
});
</script>
<style lang="less">
.generate {
	flex: 1;
    // height: 30rem;
    // overflow-x: hidden;
	overflow-x: hidden;
	display: flex;
    flex-direction: column;
    border-right: 1px solid #e5e5e5;
	position: relative;
    &.generate::-webkit-scrollbar {
        display: none;
    }
	.mark_loading{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 99;
	}
    .generate_checkbox,
    .generage_input {
        display: flex;
        align-items: center;
        position: sticky;
        top: 0;
        background: #fff;
        padding-top: calc(2.5rem*1.2);
        padding-bottom: calc(2rem*1.2);
        z-index: 2;
    }
    .generate_checkbox {
        div {
            margin-right: calc(4rem*1.2);
            label {
                display: flex;
                cursor: pointer;
                input {
                    margin-right: calc(0.5rem*1.2);
                    padding-left: calc(1.5rem*1.2);
                }
                span {
                    font-size: calc(1.2rem*1.2);
                    font-weight: 500;
                }
            }
        }
    }
	.printModel{
		>div{
			width: calc(13rem*1.2);
			// display: flex;
			display: block;
			border-radius: calc(1rem*1.2);
			margin: 0;
			border: 2px solid;
            cursor: pointer;
			white-space: nowrap; 
			overflow: hidden;
			text-overflow: ellipsis;
			padding: 0 calc(1rem*1.2);
			text-align: center;
		}
		ul{
			position: absolute;
			width: calc(13rem*1.2);
			text-align: center;
			margin-top: calc(.3rem*1.2);
			border-radius: calc(1rem*1.2);
			overflow: hidden;
			li{
				background: rgba(0,0,0,.2);
				line-height: 2;
				cursor: pointer;
				white-space: nowrap; 
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 0 calc(1rem*1.2);
				&.printModel_item:hover{
					background: rgba(0,0,0,.4);
				}
			}
		}
	}
    .generage_input {
    }
    .generage_img {
        display: flex;
		position: relative;
        flex-wrap: wrap;
		align-content: flex-start;
		flex: 1;
        .generage_img_item {
            cursor: pointer;
            margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
			position: relative;
            &.active {
					opacity: 0.5;
					// border: 2px solid;
					border-radius: calc(1rem*1.2);
					img {
						transform: scale(0.9);
					}
					.delete_like_file_block{
						pointer-events:none;
					}
				}
            img {
                width: calc(10rem*1.2);
                height: calc(10rem*1.2);
            }
			.delete_like_file_block{
				top: calc(0.9rem*1.2);
				right: calc(0.9rem*1.2);
				&.left{
					left: calc(.9rem*1.2);
				}
				i{
					font-size: calc(1.6rem*1.2);
					color: #fff;
					&.fi-rr-heart{

					}
					&.fi-sr-heart{
						color: red;
					}
				}
				
			}
			&:hover .delete_like_file_block{
				display: block;
			}
			
        }
        .upload_item {
            .upload_file_item {
				// &.active {
				// 	opacity: 0.5;
				// 	// border: 2px solid;
				// 	border-radius: 1rem;
				// 	transform: scale(0.9);
				// 	.delete_file_block{
				// 		pointer-events:none;
				// 	}
				// 	.operate_file_block{
				// 		pointer-events:none;
				// 	}
				// 	img {
				// 	}
				// }
				&.forbidden{
					cursor:not-allowed;
					img{
						cursor:not-allowed;
					}
				}
				
                .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%;
                    }

                    .delete_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;
                        .icon-shanchu {
                            font-size: calc(1.6rem*1.2);
                            color: #fff;
                        }
                    }

                    &:hover .delete_file_block {
                        display: block;
                    }
                }
            }
        }
    }
}

</style>