aida_front/src/views/HomeView/library.vue

<template>
    <div class="library_page">
        <div class="page_content">
            <!-- <img
                class="page_content_bg"
                src="@/assets/images/homePage/bg.png"
            /> -->
            <div class="page_content_body">
                <!-- <HeaderComponent></HeaderComponent> -->
                <div class="library_page_body">
                    <div class="library_body_left">
						<div>
							<div class="library_menu_list" v-for="(menu,index) in menuList" :key="menu.title">
								<div :class="['menu_item', selectCode==menu.code ? 'select_menu_item' :'']"  @click="selectMenuItem(menu,index)">
									<div class="menu_item_left">
										<i :class="[menu.icon]"></i>
										<div>{{menu.title}}</div>
									</div>
									<!-- <div v-show="menu.children.length" :class="['icon','iconfont', 'icon-xiala', menu.showChildren?'icon_rotate':'']"></div> -->
								</div>
								<div v-show="menu.showChildren && menu.children.length">
									<div :class="['menu_item','child_menu_item', selectCode==child.code ? 'select_menu_item' :'']" v-for="child in menu.children" :key="child.title" @click="selectMenuItem(child,index)">
										{{child.title}}
									</div>
								</div>
							</div>
						</div>
                      
                    </div>
                    <div class="library_body_right">
                        <div class="library_right_header">
                            <div class="library_header_left">
                                <div class="header_operate_item pointer" :class="{operate_select:uploadGenerate == 'Upload'}" @click="uploadGenerateOpen('Upload')">
									<div>{{ $t('LibraryPage.Organize') }}</div>
                                </div>
							   <div v-show="selectCode != 'Models' &&  selectCode != 'DesignElements'" class='header_operate_item pointer'  :class="{operate_select:uploadGenerate == 'Generate'}" @click="uploadGenerateOpen('Generate')">{{ $t('LibraryPage.Generate') }}</div>
                            </div>

                            <div class="librart_headr_right">
                                <div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'Models'|| selectCode == 'DesignElements'|| selectCode == 'Printboard'" >
									<a-select
                                        ref="select"
										v-show="selectCode != 'DesignElements' && selectCode != 'Printboard'"
                                        v-model:value="sex"
                                        :options="sexList"
										:fieldNames="{ label: 'name', value: 'value' }"
                                        @change="sexChange"
                                    >
                                        <template #suffixIcon
                                            ><span
                                                class="icon iconfont icon-xiala"
                                                style="color: #343579"
                                            ></span
                                        ></template>
                                    </a-select>
                                    <a-select
                                        ref="select"
										v-show="designTypeList[selectCode]?.[0]?.value && selectCode != 'Sketchboard'"
                                        v-model:value="designType"
                                        :options="designTypeList[selectCode]"
                                        @change="handleChange"
										:fieldNames="{ label: 'name', value: 'value' }"
                                    >
                                        <template #suffixIcon
                                            ><span
                                                class="icon iconfont icon-xiala"
                                                style="color: #343579"
                                            ></span
                                        ></template>
                                    </a-select>
									<a-select
                                        ref="select"
										v-show="designTypeList[selectCode]?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate != 'Generate'"
                                        v-model:value="designType"
                                        :options="designTypeList[selectCode]"
                                        @change="handleChange"
										:fieldNames="{ label: 'name', value: 'value' }"
                                    >
                                        <template #suffixIcon
                                            ><span
                                                class="icon iconfont icon-xiala"
                                                style="color: #343579"
                                            ></span
                                        ></template>
                                    </a-select>
									<a-select
                                        ref="select"
										v-show="SketchGenerateTypeList?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate == 'Generate'"
                                        v-model:value="SketchGenerateType"
                                        :options="SketchGenerateTypeList"
                                        @change="setSketchGenerateType"
										:fieldNames="{ label: 'name', value: 'value' }"
                                    >
                                        <template #suffixIcon
                                            ><span
                                                class="icon iconfont icon-xiala"
                                                style="color: #343579"
                                            ></span
                                        ></template>
                                    </a-select>
                                </div>
                            </div>
                        </div>

                        <div class="libray_right_content">
                            <div class="right_content_body" v-show="uploadGenerate =='Upload'">
								<div class="content_body_header" v-show="selectCode == 'DesignElements'">
									<div style="font-size:1.5rem;">{{ $t('LibraryPage.generated') }}</div>
								</div>
                                <!-- <div class="content_body_header"> -->
                                <div class="content_body_header" v-show="selectCode != 'DesignElements'">
									<div class="content_body_header_left">
										<div class="content_body_header_right">
											<div :class="['header_operate_item' , 'fontSize','active']">
												<a-upload
													:capture="null"
													v-show="uploadGenerate == 'Upload'"
													:before-upload="beforeUpload"
													:customRequest="customRequest "
													:multiple="selectCode != 'Models'"
													:maxCount="15"
													accept=".jpg,.png,.jpeg,.bmp"
													@change="fileUploadChange"
													>
													<div>{{ $t('LibraryPage.Upload') }}</div>
												</a-upload>
											</div>
											<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="deleteBatchPic()">{{ $t('LibraryPage.Delete') }}</div>
											<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="showRenameModal(selectImgList,'batch')">{{ $t('LibraryPage.Rename') }}</div>
										</div>
										<div class="content_search_block">
											<input 
											class="search_input" 
											:placeholder="$t('LibraryPage.inputContent1')" 
											v-model="searchPictureName"  
											@keydown.enter="getLibraryList('')">
											<div class="search_cascader">
												<el-cascader 
													:options="options" 
													filterable
													v-model="value.labelValue"
													:collapse-tags="true" 
													:show-all-levels="false" 
													:clearable="true"
													:placeholder="$t('LibraryPage.Select')"
													:max-collapse-tags=3
													:props="prop" 
													:collapse-tags-tooltip="true"
													ref="cascader"
													popper-class="libraryPageCascader"
													@visible-change="dropdownVisibleChange"
												>
													<template #empty>
														<div>
															{{$t('LibraryPage.Select')}}
														</div>
													</template>
												</el-cascader>
											</div>
											<div class="intersection">
												<div :title="$t('LibraryPage.unionSet')" @click="()=>intersection = 1" v-show="intersection == 0" :class="['icon', 'iconfont','icon-bingji',]"></div>
												<div :title="$t('LibraryPage.intersection')" @click="()=>intersection = 0" v-show="intersection == 1" :class="['icon', 'iconfont','icon-bingji1',]"></div>
											</div>
											<!-- <div class="search_icon_block" @click="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div> -->
											<div class="generage_btn search_icon_block" @click="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div>
										</div>
									</div>
                                    <div v-show="imgList.length" :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()">
                                        <div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
                                        <div>{{ $t('LibraryPage.all') }}</div>
                                    </div>
                                </div>

                                <div class="content_body_table scroll_style">
                                    <div class="content_img_item" v-for="(img,index) in imgList" :key="img.id" @click="selectImgItem(img)" :draggable="true">
                                        <div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']">
                                            <img v-lazy="img.url" :key="img.url" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']"/>
                                            <div class="img_item_hover" v-show="selectCode != 'DesignElements'">
                                                <div class="img_operate_content">
                                                    <div class="img_operate_block" :title="t('LibraryPage.Point')" @click.stop="editPlacementClick(img)" v-show="selectCode === 'Models'">
                                                        <span class="icon iconfont icon-dianwei operate_icon"></span>
                                                    </div>
                                                    <div class="img_operate_block" :title="t('LibraryPage.Rename')" @click.stop="showRenameModal(img,'total')">
                                                        <span class="icon iconfont icon-tianxie operate_icon"></span>
                                                    </div>
                                                    <div class="img_operate_block" :title="t('LibraryPage.Delete')" @click.stop="deleteSinglePic(img,index)">
                                                        <span class="icon iconfont icon-shanchu operate_icon"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="content_img_name">{{img.name}}</div>
                                    </div>
                                    <div class="no_data_block" v-show="!imgList.length && !isShowMark">
                                        <img src="@/assets/images/homePage/null_img.png">
                                    </div>
                                </div>

                                <div class="table_pagination" v-show="imgList.length">
                                    <a-pagination
                                        
                                        v-model:current="currentPage"
                                        v-model:pageSize="pageSize"
                                        :total="total"
                                        :showQuickJumper="true"
                                        :showSizeChanger="false"
                                        @change="changePage"
                                    />
                                </div>
                            </div>
							<div class="right_content_body" v-show="uploadGenerate !='Upload'">
								<div class="content_body_header content_body_header_generate">
									<div class="content_body_header_right"></div>
									<!-- <div v-show="selectCode == 'Printboard' && scene?.value == 'Pattern'" class="printModel">
										<div @click.stop="PrintModel">{{ printModel.name }}</div>
										<ul v-show="printModel.optype">
											<li class="printModel_item" @click="setprintModel(1)">{{ $t('LibraryPage.Model1') }}</li>
											<li class="printModel_item" @click="setprintModel(2)">{{ $t('LibraryPage.Model2') }}</li>
											<li class="printModel_item" @click="setprintModel(3)">{{ $t('LibraryPage.Model3') }}</li>
										</ul>
									</div> -->
									<generalMenu v-if="printModelList" class="printModel" v-show="selectCode == 'Printboard' && scene?.value == 'Pattern'" :dataList="printModelList" :isCanvas="selectCode == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
									<div class="input_border">
										<div class="input_box" :class="{active:inputShow}">
											<div class="input_box_btnBox"  v-if="scene?.value != 'extract'">
												<div class="upload_item" v-show="selectCode !== 'Moodboard' && ((selectCode == 'Printboard' && scene?.value == 'Pattern') || (selectCode == 'Printboard' && scene?.value == 'Slogan') || selectCode == 'Sketchboard')">
													<div
														class="upload_file_item"
														v-for="(file, index) in selectGenerateList"
														: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' || file?.base64"
														>
															<img :src="file?.imgUrl" class="upload_img" />
															<div class="delete_like_file_block"  :class="[driver__.driver?'hideEvents':'']">
																<span class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></span>
															</div>
														</div>
													</div>
												</div>
												<!-- <a-popover>
													<template #content>
														<p>Seed</p>
													</template>
													<input class="search_seed" max="9999" v-show="selectCode == 'Printboard' && scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
												</a-popover> -->
												<input 
													class="search_input " 
													@input="ifMaximumLength" 
													:maxlength='inputShow?0:9999' 
													@keydown.enter="getgenerate"  
													@click="inputFocus()"
													:placeholder="(scene?.value == 'Slogan' && selectCode == 'Printboard')?isSloganHint:$t('LibraryPage.inputContent2')"
													@paste="onPaste"
													v-model="captionGeneration">
												<i class="fi fi-br-upload" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
													<a-upload
														class="search_upImg"
														:capture="null"
														:action="uploadUrl + '/api/element/upload'"
														list-type="picture-card"
														:before-upload="beforeUpload"
														:data="{
															...upload,
															gender:sex,
														}"
														:headers="{Authorization:token}"
														v-model:file-list="selectGenerateList"
														multiple
														:maxCount="1"
														accept=".jpg,.png,.jpeg,.bmp"
														@change="generateFileUploadChange"
													>
													</a-upload>
												</i>
												<i v-show="selectCode == 'Printboard' && scene?.value == 'Slogan'" :title="$t('Generate.sloganTitle')" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
												<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
												<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
											</div>
											<div class="input_box_btnBox" v-else>
												<div class="upload_item">
													<div
														class="upload_file_item"
														v-for="(file, index) in selectGenerateList"
														: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' || file?.base64"
														>
															<img :src="file?.imgUrl" class="upload_img" />
															<div class="delete_like_file_block"  :class="[driver__.driver?'hideEvents':'']">
																<span class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></span>
															</div>
														</div>
													</div>
												</div>
												<i class="fi fi-br-upload" style="margin-left: 2rem;"  v-show="selectGenerateList.length == 0" :title="$t('Generate.uploadproduct')">
													<a-upload
														class="search_upImg"
														:capture="null"
														:action="uploadUrl + '/api/element/upload'"
														list-type="picture-card"
														:data="{
															...upload,
															gender:sex,
														}"
														:maxCount='1'
														:headers="{ Authorization: token }"
														v-model:file-list="selectGenerateList"
														:before-upload="beforeUpload"
														accept=".jpg,.png,.jpeg,.bmp"
														@change="generateFileUploadChange"
													>
													</a-upload>
												</i>
												<div :title="$t('Generate.style')">
													<generalMenu v-if="printModelList" class="printModel" :dataList="printModelList" :isCanvas="selectCode == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
												</div>
											</div>

											<textarea 
												v-show="isTextarea "
												class="search_textarea "  
												@input="ifMaximumLength" 
												:maxlength='inputShow?0:9999' 
												@keydown.enter="getgenerate" 
												@click.stop=""
												v-model="captionGeneration"
											></textarea>
											<div class="generage_btn_box" v-show="!isGenerate[selectCode]">
												<div class="generage_btn started_btn">
													
													<div @click.stop="getgenerate">
														<span v-if="
														selectCode == 'Moodboard' || 
														(selectCode == 'Printboard' && scene?.value == 'Pattern') || 
														(selectCode == 'Sketchboard' && scene?.value == 'generate')">{{ speedData.label }}</span>
														<span v-else>{{ $t('LibraryPage.Generate') }}</span>
													</div>
													<div class="icon iconfont icon-xiala" v-show="
														selectCode == 'Moodboard' || 
														(selectCode == 'Printboard' && scene?.value == 'Pattern') || 
														(selectCode == 'Sketchboard' && scene?.value == 'generate')" :class="{active:speedState}" @click.stop="openSpeed"></div>
												</div>
												<div class="content" v-show="speedState">
													<div v-for="item in speedList" :key="item.value" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
												</div>
											</div>
											<div v-show="isGenerate[selectCode] && !remGenerate[selectCode]" class="generage_btn started_btn" @click.stop="getgenerate">
												<i class="fi fi-br-loading"></i>
											</div>
											<div v-show="remGenerate[selectCode]" @click="removeGenerate" class="generage_btn started_btn">
												{{$t('Generate.Close')}}
											</div>
											<span class="inputShowText" ref="inputShowText"></span>
										</div>
										<div class="search_keyword" v-if="workspace?.allKeywordsByStyle" v-show="isInputFocus" @click.stop="">
											<div class="search_keyword_center">
												<div class="search_keyword_center_left">
													<div v-for="item in workspace?.allKeywordsByStyle?.[selectCode]" @click.stop="cliSetKeyword(item)" class="search_keyword_center_item"> {{item}} </div>
												</div>
											</div>
										</div>
									</div>
                                </div>

                                <div class="content_body_table scroll_style">
                                    <div class="content_img_item" v-for="(img,index) in generateList[selectCode]" :key="img.id"  :class="[img.status != 'Success'?'hideEvents':'']"  v-show="img.status == 'Success'"
									:draggable="!isGenerate[selectCode]" @dragstart="startDrag($event,index)"  @dragover.prevent  @drop="drop($event,index)">
                                        <div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']">
											<!-- <img v-show="img.status != 'Success'"  :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" src="@/assets/images/homePage/loading.gif" alt=""> -->
											<img  :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" v-lazy="img.imgUrl">
											
											<div class="img_item_hover">
                                                <div class="img_operate_content">
													<div class="img_operate_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
                                                        <span class="icon iconfont icon-shanchu operate_icon"></span>
                                                    </div>
                                                </div>
												<div class="img_operate_content left"  :class="[driver__.driver?'hideEvents':'']">
													<div class="img_operate_block">
														<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
                                                    </div>
													<div class="img_operate_block">
														<i v-if="!img.like" class="fi fi-rr-heart operate_icon" @click.stop="likeFile(img,'like')"></i>
														<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!img.like" @click.stop="likeFile(img,'noLike')"></i>
                                                    </div>
												</div>
                                            </div>
											<sketchCategory  v-show="selectCode == 'Sketchboard'" :disignTypeList="designTypeList[selectCode]" :generateList="generateList['Sketchboard']" :item="img"></sketchCategory>
                                        </div>
                                        <div class="content_img_name"></div>
                                    </div>
                                    <div class="no_data_block" v-show="!generateList[selectCode].length && !isShowMark">
                                        <img src="@/assets/images/homePage/null_img.png">
                                    </div>
                                </div>
							</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		<searchLabel ref="searchLabel"></searchLabel>
		<scaleImage ref="scaleImage" :isCanvas="selectCode == 'Sketchboard'" :workspace="{sexEnum:{value:sex}}"></scaleImage>
        <ModelPlacement ref="ModelPlacement" @submitModelPlacement="getLibraryList"></ModelPlacement>
        <ModelPlacementMobile ref="ModelPlacementMobile" @submitModelPlacement="getLibraryList"></ModelPlacementMobile>
		<setLabel ref="setLabel"></setLabel>
		<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>

        <!-- 蒙层 start-->
        <div class="mark_loading" v-show="isShowMark || getLangIsShowMark">
			<a-spin size="large" />
		</div>
        <!-- 蒙层 end-->
		<!-- <RobotAssist></RobotAssist> -->

    </div>
</template>
<script lang="ts">
import { LoadingOutlined } from "@ant-design/icons-vue";
import { defineComponent,h ,ref,createVNode,nextTick,watch,provide,computed,reactive,toRefs} from 'vue'
// import HeaderComponent from "@/component/HomePage/Header.vue";
import ModelPlacement from '@/component/LibraryPage/ModelPlacement.vue';
// import ModelPlacement from '@/component/LibraryPage/ModelPlacementUpdata.vue';
import setLabel from '@/component/LibraryPage/setLabel.vue';
import ModelPlacementMobile from '@/component/LibraryPage/ModelPlacementMobile.vue';
import searchLabel from '@/component/LibraryPage/searchLabel.vue';
// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import {getUploadUrl,isMoible} from '@/tool/util'
import { useStore } from "vuex";
import { Https } from "@/tool/https";
import { getCookie } from "@/tool/cookie";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import { useI18n } from "vue-i18n";
import { ElCascader } from 'element-plus'
import { remove } from "jszip";
import createSlogan from "@/component/HomePage/createSlogan.vue";
import generalMenu from "@/component/HomePage/generalMenu.vue";
import { id } from "element-plus/es/locale";
export default defineComponent({
    components: {
        // HeaderComponent,
        ModelPlacement,
		setLabel,
        ModelPlacementMobile,
		searchLabel,
		// RobotAssist,
		ElCascader,
		scaleImage,
		sketchCategory,
		createSlogan,
		generalMenu,
    },
	props:{
		getLangIsShowMark:{
			type:Boolean,
			default:true,
		}
	},
	
    setup(props) {
        const store = useStore();
        let menuList = computed(()=>{
			return [
				{title:useI18n().t('LibraryPage.Moodboard'),code:'Moodboard',icon:'fi fi-rr-grid',showChildren:false,children:[]},
				{title:useI18n().t('LibraryPage.Prints'),code:'Printboard',icon:'fi fi-rs-objects-column',showChildren:false,children:[]},
				// {title:'Sketches',code:'SketchboardFirst',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[{title:'Apparel',code:'Sketchboard'}]},
				{title:useI18n().t('LibraryPage.Sketches'),code:'Sketchboard',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[]},
				// {title:'Market Sketch',code:'Elements',icon:'icon-fuwushichang',showChildren:false,children:[]},
				{title:useI18n().t('LibraryPage.DesignElements'),code:'DesignElements',icon:'fi fi-ss-puzzle-piece',showChildren:false,children:[]},
				{title:useI18n().t('LibraryPage.Mannequins'),code:'Models',icon:'fi fi-rs-people',showChildren:false,children:[]},

			]
		})
        let selectImgList:any = ref([])
        let selectCode:any = ref('Moodboard')
        let searchPictureName = ref('')
        let searchPictureSeed:any = ref(0);
        let designType:any = ref({
			name:'',
			value:''
		})
        let sex:any = ref('')
		// const sexList:any = []
		let sexList:any = computed(()=>store.state.UserHabit.sex.value)
		const printType = computed(() => {
			return store.state.UserHabit.printType;
		});
		const designElementsType = computed(() => {
			return store.state.UserHabit.designElementsType;
		});
		const positionType = computed(() => {
			return store.state.UserHabit.Position;
		});
		
		let designTypeList:any = ref({
			Sketchboard:positionType,
			Moodboard:[],
			Printboard:printType,
			Models:[],
			DesignElements:designElementsType,
		})
		let SketchGenerateTypeList = computed(()=>{
			return store.state.UserHabit.SketchGenerateType
		})
		let SketchGenerateType = ref({})
        let imgList = ref([])
        let currentPage:any = ref(1)
        let pageSize:any = ref(18)
        let total:any = ref(20)
        let uploadUrl:any = ref('')
        let currentUploadFileNum:any = ref(0) //当次上传文件数量
        let isShowMark:any = ref(false) //蒙层
		let uploadGenerate:any = ref('Upload')
		let inputShow = ref(false)
		let generateCheckbox:any = ref()
		let captionGeneration:any = ref('')
		let inputTime = ref()
		let generateList:any = ref({
			Sketchboard:[],
			Moodboard:[],
			Printboard:[],
			Models:[],
			DesignElements:[],
		})
		let selectGenerateList:any = ref([])
		let printModel = ref({
			id:'',
			num:1,
			optype:false,
			value:'',
			name:useI18n().t('LibraryPage.Model1')
		})
		let {t} = useI18n()
		let type:any = {
			selectCode:selectCode,
		}
		provide('type',type)
		let value = ref({
			labelValue:[],
			editLabelValue:[],
		})
		
		let intersection = ref(1)
		let isTest = ref()
		let driver__:any = computed(()=>{
			return store.state.Guide.guide
		})
		let userDetail:any= computed(()=>{
			return store.state.UserHabit.userDetail
		})
		let generateTime:any = ref({
			Sketchboard:'',
			Moodboard:'',
			Printboard:'',
			Models:'',
			DesignElements:'',
		})
		let generateProceedList = ref([])
		let isGenerate:any = ref({
			Sketchboard:false,
			Moodboard:false,
			Printboard:false,
			Models:false,
			DesignElements:false,
		})
		let remGenerate:any = ref({
			Sketchboard:false,
			Moodboard:false,
			Printboard:false,
			Models:false,
			DesignElements:false,
		})
		let remGenerateTime:any = ref({
			Sketchboard:'',
			Moodboard:'',
			Printboard:'',
			Models:'',
			DesignElements:'',
		})
		let scene:any = ref({})
		let dragIdx:any=ref(0)
		let getLibraryListInputTime:any = ref()
		const options:any = ref([
		]);
		let prop = {
			multiple: true,
			checkStrictly: true,
			emitPath:true,
			children:'childList',
			value:'id',
			label:'classificationName',
		}
		let isTextarea = ref(false)
		let workspace:any = computed(()=>{
			return  store?.state?.Workspace?.workspace
		})
		let generateLevel2:any = {}
		let isSloganHint:any = ref('')
		let printModelList:any = ref([])
		let speed = reactive({
			speedList:[
			{
					title:'Picture quality is average, speed is fast',
					label:'Low Quality',
					value:'fast',

				},{
					title:'Picture quality is high, speed is slow',
					label:'High Quality',
					value:'high',
				},
			],
			speedState:false,
			speedData:{
				title:'Picture quality is average, speed is fast',
				label:'Low Quality',
				value:'fast',
			},
		})
		const openSpeed = ()=>{
			speed.speedState = !speed.speedState
			if(speed.speedState){
				document.addEventListener('click',openSpeed)
			}else{
				document.removeEventListener('click',openSpeed)
			}
		}
		const setSpeed = (item:any)=>{
			speed.speedData = item
		}
		let getSex = () =>{
			sex.value = store.state.UserHabit.sex.value[0].value
			getPosition()
		}
		let getPosition = ()=>{
			store.commit('setPosition',sex.value)
			designType.value = designTypeList.value.Sketchboard?.[0].value
		}
		let getLibraryList = (str:any)=>{
			let labelArr:any = []
			value.value.labelValue.forEach((item:any)=>{
				labelArr.push(item[item.length-1])
			})
            let design = ''
			if(selectCode.value == 'Sketchboard' || selectCode.value == 'DesignElements' || selectCode.value == 'Printboard'){
				design = designType.value
			}
            let data = {
				classificationIdList:labelArr,
                level1Type:selectCode.value,
                level2Type:design,
                page:1,
				modelSex:sex.value?sex.value:'',
                pictureName:searchPictureName.value,
                size:pageSize.value,
				intersection:intersection.value,
            }
			if(str == 'page'){
				data.page = currentPage.value
			}else{
				currentPage.value = 1
			}
            isShowMark.value = true
            Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
                (rv: any) => {
					if(rv.content?.length == 0 && currentPage.value != 1){
						currentPage.value = 1
						getLibraryList('')
					}else{
						imgList.value = rv.content
						total.value = rv.total
						isShowMark.value = false
					}
                }
            ).catch((res)=>{
                isShowMark.value = false
            });
        }
		let getClass = ()=>{
			let data = {
				"classificationIdList": [],
				"classificationName": "",
				"createTime": "",
				"deleteConfirm": '',
				"id": '',
				"libraryId": '',
				"parentId": '',
				"type": selectCode.value,
				"updateTime": "",
				"userId": ''
			}
			Https.axiosPost(Https.httpUrls.queryClassification, data).then(
                (rv: any) => {
					options.value = rv
					rv.forEach((rvItem:any,rvIndex:number) => {
						options.value[rvIndex].value = rvItem.id
						options.value[rvIndex].label = rvItem.classificationName
						rvItem.childList.forEach((childItem:any,index:number) => {
							options.value[rvIndex].childList[index].value = childItem.id
							options.value[rvIndex].childList[index].label = childItem.classificationName
						});
					});
                }
            ).catch((res)=>{
            });
		}
		watch(
			() => props.getLangIsShowMark,  // 这里使用了一个 getter 函数
			(newValue, oldValue) => {
				if(!newValue){
					getLibraryList('')
					getClass()
					getSex()
				}
			},
			{immediate: true,}
		)
        return {
            menuList,
            selectImgList,
            selectCode,
            searchPictureName,
			searchPictureSeed,
			sexList,
			sex,
			positionType,
			SketchGenerateType,
			SketchGenerateTypeList,
			designTypeList,
            designType,
            imgList,
            currentPage,
            pageSize,
            total,
            uploadUrl,
            currentUploadFileNum,
            isShowMark,
			store,
			uploadGenerate,
			inputShow,
			generateCheckbox,
			captionGeneration,
			inputTime,
			generateList,
			selectGenerateList,
			printModel,
			value,
			t,
			intersection,
			isTest,
			driver__,
			userDetail,
			generateTime,
			generateProceedList,
			isGenerate,
			remGenerate,
			remGenerateTime,
			scene,
			dragIdx,
			getLibraryListInputTime,
			prop,
			options,
			isTextarea,
			workspace,
			generateLevel2,
			isSloganHint,
			getSex,
			getPosition,
			getLibraryList,
			getClass,
			printModelList,
			...toRefs(speed),
			openSpeed,
			setSpeed,
        }
    },
	data(this_) {
        return {
			indicator: h(LoadingOutlined, {
                style: {
                    fontSize: "2.4rem",
                },
                spin: true,
            }),
            upload: {
                isPin: 0,
				gender:this_.sex,
                level1Type: this_.selectCode,
                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            },
            token: "",
			isInputFocus:false,
        };
    },
	watch:{
		searchPictureName(newVal,oldVal){
			// clearTimeout(this.getLibraryListInputTime)
			// this.getLibraryListInputTime = setTimeout(() => {
			// 	if(newVal != oldVal){
			// 		this.currentPage = 1
			// 	}
			// }, 500);
		},
		scene:{
			handler(newVal,oldVal){
				if(this.selectCode == 'Printboard' && newVal.value == 'Slogan'){
					let sloganType = ['Blue and Yellow Starry Night','Green Cthulhu','Red and yellow fire style','Cyberpunk style','City skyline buildings','Red maple leaves','Golden Sunflower','Emerald Jungle Canopy','Pink Sakura Blossom']
					var randomNumber = Math.floor(Math.random() * sloganType.length);
					this.isSloganHint = sloganType[randomNumber]
				}else{
					this.isSloganHint = ''
				}
			}
		}
	},
    async mounted(){
        this.upload.gender = this.sex
		let isTest:any = getCookie('isTest')
        this.isTest =JSON.parse(isTest)
        this.uploadUrl = getUploadUrl()
		this.token = getCookie("token") || "";
    },
    methods:{

		
		
		likeFile(item:any,str:string){
			let designType = ''
			if(this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
				designType = this.designType
			}else if(this.selectCode == 'Sketchboard'){
				designType = item.categoryValue
			}
			if(str == 'like'){
				let data = {
					generateDetailId:item.id,
					level1Type:this.selectCode,
					level2Type: designType,
					gender:this.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=>{
				});
			}
		},
        selectMenuItem(menu:any,index:any){
            if(menu.children?.length){ //证明是有子菜单
                menu.showChildren = !menu.showChildren
            }else{
				if(menu.code != this.upload.level1Type){
					this.selectCode = menu.code
					this.currentPage = 1,
					this.total = 0,
					this.searchPictureName = ''
					this.imgList = [],
					this.selectImgList = []
					this.isTextarea = false
					this.value.labelValue = []
					if(this.designTypeList[this.selectCode].length >= 1){
						this.designType = this.designTypeList[this.selectCode][0].value
					}else{
						this.designType = ''
					}
					if(this.selectCode != 'DesignElements'){
						this.getClass()
					}
					if(this.selectCode == 'Sketchboard' || this.selectCode == 'Models')this.getSex()
					if(this.selectCode == 'Sketchboard'){
						this.positionType = computed(() => {
							return this.store.state.UserHabit.Position;
						});
						this.printModelList = JSON.parse(JSON.stringify(this.store.state.UserHabit.SketchStyle))
						let imgList = ['/image/sketch/sketch-fine.jpg','/image/sketch/sketch-medium.jpg','/image/sketch/sketch-thick.jpg']
						this.printModelList.forEach((item:any,index:number)=>{
							item.img = imgList[index]
						})
					}
					if(this.selectCode == 'Printboard'){
						this.printModelList = [
							{
								num:1,
								optype:false,
								value:'Painting Style',
								label:this.t('Generate.Model1')
							},{
								num:2,
								optype:false,
								value:'Illustration Style',
								label:this.t('Generate.Model2')
							},{
								num:3,
								optype:false,
								value:'Real Style',
								label:this.t('Generate.Model3')
							},
						]
					}
					if(this.printModelList[0])this.printModel = this.printModelList[0]
					this.captionGeneration = ''
					this.selectGenerateList = []
					this.inputShow = false
					this.uploadGenerateOpen('Upload')
				}
				this.upload.level1Type = menu.code
            }
        },

		async sexChange(){
			// if(this.uploadGenerate == 'Generate' && this.selectCode == 'Sketchboard'){
			// }else{
			// 	// this.scene = this.designTypeList[this.selectCode].filter((item:any)=>item.value == this.designType)[0]
			// 	await this.getPosition()
			// }
			await this.getPosition()

			if(this.uploadGenerate == 'Generate')return
            this.currentPage = 1
            this.getLibraryList('')
		},
        handleChange(){
			this.scene = this.designTypeList[this.selectCode].filter((item:any)=>item.value == this.designType)[0]
			this.selectGenerateList = []
			if(this.uploadGenerate == 'Generate'){
				if(this.selectCode == 'Printboard'){
					this.captionGeneration = ''
				}
				return
			}
            this.currentPage = 1
            this.getLibraryList('')
        },
		setSketchGenerateType (){
			this.selectGenerateList = []
			this.scene = this.SketchGenerateTypeList.filter((item:any)=>item.value == this.SketchGenerateType)[0]
		},
         fileUploadChange(data:any){
            let file = data.file
            // let Cropper:any = this.$refs.Cropper
			
            if(this.selectCode == 'Models'){
                let reader = new FileReader();
				//试用用户上传限制
				// if(this.imgList.length+this.currentUploadFileNum > 10 && this.isTest){
				// 	message.info(this.t('isTest.image'));
				// 	return
				// }
                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;
                    }
                    this.placementClick({url:data_new,file:file.originFileObj})
                    
                };
                // 转化为base64
                // reader.readAsDataURL(file)
                // 转化为blob
                reader.readAsArrayBuffer(file.originFileObj);
            }
            
        },

        //改变页码
        changePage(current: number, pageSize: number){
            this.currentPage = current
            this.pageSize = pageSize
            this.getLibraryList('page')
        },

        //选择图片
        selectImgItem(imgData:any){
			if(imgData.level2Type == "DesignElements")return
            if(this.selectImgList.indexOf(imgData.id) === -1){
                this.selectImgList.push(imgData.id)
            }else{
                let index = this.selectImgList.indexOf(imgData.id)
                this.selectImgList.splice(index,1)
            }
        },

        //选择所有的图片
        selectAllImg(){
            if(this.selectImgList.length == this.imgList.length){
                this.selectImgList = []
            }else{
                this.selectImgList = this.imgList.map((v:any) => v.id)
            }
        },
        //打开修改名称弹窗
        showRenameModal(data:any,type:any){
			let searchLabel:any = this.$refs.searchLabel
			searchLabel.init(data,type)
			return
        },
		uploadGenerateOpen(str:any){
			// if(str == 'Generate'){
			// 	if(this.selectCode == 'Printboard'){
			// 		this.scene = this.designTypeList[this.selectCode][0]
			// 	}
			// }
			// if(this.selectCode == 'Sketchboard' && str == 'Generate'){
			// 	this.designTypeList.Sketchboard = computed(()=>{
			// 		return this.store.state.UserHabit.SketchGenerateType
			// 	})
			// }else if(this.selectCode == 'Sketchboard'){
			// 	this.designTypeList.Sketchboard = computed(() => {
			// 		return this.store.state.UserHabit.Position;
			// 	});
			// }
			if(this.designTypeList[this.selectCode][0]){
				this.scene = this.designTypeList[this.selectCode][0]
				this.designType = this.designTypeList[this.selectCode][0].value
			}
			if(str == 'Generate' && this.selectCode == 'Sketchboard'){
				this.scene = this.SketchGenerateTypeList[0]
				this.SketchGenerateType = this.SketchGenerateTypeList[0].value
			}
			if(str != 'Generate'){
				this.getLibraryList('')
			}
			this.uploadGenerate = str
		},
        //删除单个图片
        deleteSinglePic(data:any,index:any){
            let _this = this
            Modal.confirm({
                title: this.t('LibraryPage.jsContent1'),
                icon: createVNode(ExclamationCircleOutlined),
                okText: 'Yes',
                cancelText: 'No',
				mask:false,
                centered:true,
                onOk() {
                    _this.confirmDeletePic(data,index,'')
                }
            });
        },
		deleteGenerate(index:any){
			// if(this.isGenerate[this.selectCode])return
			let num = this.generateList[this.selectCode].length

			let _this = this
            Modal.confirm({
                title: this.t('LibraryPage.jsContent1'),
                icon: createVNode(ExclamationCircleOutlined),
                okText: 'Yes',
                cancelText: 'No',
				mask:false,
                centered:true,
                onOk() {
					let a = _this.generateList[_this.selectCode].length - num
					_this.generateList[_this.selectCode].splice(index-a,1)
                }
            });
		},
		startDrag(event:any, index:any) {
			this.dragIdx = index
		},
		drop(event:any, index:any) {
			let _teams = this.generateList[this.selectCode]  //将hotteams存起来
			let _dragitem = _teams[this.dragIdx]  //将被拖拽的那条数据存起来
			_teams.splice(this.dragIdx, 1)      //删除被拖拽的那条数据
			_teams.splice(index, 0, _dragitem)
		},
        //批量删除图片
        deleteBatchPic(){
            if(!this.selectImgList.length){
                return
            }
            let _this = this
            Modal.confirm({
                title: this.t('LibraryPage.jsContent2'),
                icon: createVNode(ExclamationCircleOutlined),
                okText: 'Yes',
                cancelText: 'No',
                centered:true,
                onOk() {
                    _this.confirmDeletePic('',0,'')
                }
            });
        },

        //确定删除图片 有data则是单个
        confirmDeletePic(data:any,index:any,nData:any){
            let libraryIds = data ? [data.id] : this.selectImgList
            let newData = {
                libraryIds:libraryIds,
				deleteModelConfirm:this.selectCode == 'Models' ? data.deleteModelConfirm?data.deleteModelConfirm : 0:'',
				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,  
            }
			if(nData)newData = nData
             Https.axiosPost(Https.httpUrls.batchDeleteLibrary, newData).then(
                (rv: any) => {
                    if(data && data.id){
                        this.imgList.splice(index, 1)
                    }else{
                        this.selectImgList = []
                        this.getLibraryList('')
                    }
                }
            ).catch((res)=>{
				if(this.selectCode == "Models" && res.errCode === 2){
					let _this = this
					Modal.confirm({
						title: res.errMsg,
						icon: createVNode(ExclamationCircleOutlined),
						okText: 'Yes',
						cancelText: 'No',
						mask:false,
						zIndex:99999,
						centered:true,
						onOk() {
							newData.deleteModelConfirm = 1
							let id = _this.store.state.Workspace.workspace.id
							Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
								if (rv) {
									if(rv.position == "Overall"){
										rv.overallSingle = false
									}else{
										rv.overallSingle = true
									}
									if(rv.sexEnum.name == 'Female'){
										rv.mannequinUrl = rv.femalePresignedUrl
										rv.mannequinType = rv.mannequinFemaleType
										rv.mannequinId = rv.mannequinFemaleId
									}else if(rv.sexEnum.name == 'Male'){
										rv.mannequinUrl = rv.malePresignedUrl
										rv.mannequinType = rv.mannequinMaleType
										rv.mannequinId = rv.mannequinMaleId
									}
									
									_this.store.commit("setWorkspace", rv);
								}
							})
							_this.confirmDeletePic('',index,newData)
						},
						onCancel(){
							
						}
					});
				}
            });
        },

        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('LibraryPage.jsContent3'));
            }
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) {
                message.info(this.t('LibraryPage.jsContent4'));
            }
			if(isJpgOrPng && isLt2M){
				this.currentUploadFileNum = fileList.length
            }else{
                return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
            }
        },



        customRequest(event:any){
			if(this.selectCode == "Models"){
				return
			}
			//试用用户上传限制
			// if(this.imgList.length+this.currentUploadFileNum > 10 && this.isTest){
			// 	message.info(this.t('isTest.image'));
			// 	return
			// }
			let designType = ''
			if(this.selectCode == 'Sketchboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
				designType = this.designType
			}
            let new_data = {
                file:event.file,
                level1Type:this.selectCode,
                level2Type:designType,
				sex:this.selectCode == 'Sketchboard' ? this.sex:'',
				modelType:'',
				checkMd5:1,
                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
            }
            this.isShowMark = true
            Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
                (rv: any) => {
					if(!rv.checkMd5){
						this.affirmCstomRequest(new_data)
					}else{
						this.currentUploadFileNum -- 
						if(!this.currentUploadFileNum){
							this.getLibraryList('')
						}
					}
                }
            ).catch((res)=>{
                this.currentUploadFileNum -- 
                if(!this.currentUploadFileNum){
                    this.getLibraryList('')
                }
            });
        },
		affirmCstomRequest(data:any){
			let _this = this
            Modal.confirm({
                title: this.t('LibraryPage.jsContent5'),
                icon: createVNode(ExclamationCircleOutlined),
                okText: 'Yes',
                cancelText: 'No',
				mask:false,
				zIndex:99999,
                centered:true,
                onOk() {
					data.checkMd5 = 0
					Https.axiosPost(Https.httpUrls.libraryUpload, data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
						(rv: any) => {
							_this.currentUploadFileNum -- 
							if(!_this.currentUploadFileNum){
								_this.getLibraryList('')
							}
						}
					).catch((res)=>{
						_this.currentUploadFileNum -- 
						if(!_this.currentUploadFileNum){
							_this.getLibraryList('')
						}
					});
                },
				onCancel(){
					_this.currentUploadFileNum -- 
					if(!_this.currentUploadFileNum){
						_this.getLibraryList('')
					}
				}
            });
		},
        

        //编辑模特打点
        editPlacementClick(data:any){
			let name = data.name + '.'+data.url.split("?")[0].split(".").pop()
            let newData = {
                ...data.libraryModelPoint,
                url:data.url,
				name:name,
            }
            this.placementClick(newData)
        },

        //给模特打点编辑
        placementClick(data:any){
            // let placementModal:any = isMoible() ? this.$refs.ModelPlacementMobile : this.$refs.ModelPlacement
            let placementModal:any = this.$refs.ModelPlacement
            placementModal.showPlacementModal(data,this.sex)
        },
		setTextareaShow(){
			this.isTextarea = !this.isTextarea
			this.isTextarea = !this.isTextarea
			if(this.isTextarea){
				document.addEventListener('click',this.setTextareaShow)
			}else{
				document.removeEventListener('click',this.setTextareaShow)
			}
		},
		cliSetKeyword(value:any){
			let str = ''
			if(this.captionGeneration[this.captionGeneration.length-1] != ',' && this.captionGeneration.length != 0){
				str = ','
			}
			this.captionGeneration += str + value
		},
		ifSeedValue(e:any){
			if(this.searchPictureSeed == ''){
				this.searchPictureSeed = 0
			}
		},
		ifMaximumLength(){
			clearTimeout(this.inputTime)
			this.inputTime = setTimeout(()=>{
				if(this.captionGeneration?.split(/\s+/).length > 250){
					(this.$refs.inputShowText as any).innerHTML = this.t('LibraryPage.maximumLength')
					this.inputShow = true
				}else{
					this.inputShow = false
				}
			},500)
		},
		setSlogan(){
			let createSlogan:any = this.$refs.createSlogan
			createSlogan.init()
		},
		setSloganData(data:any){
			this.selectGenerateList = data
		},
		inputFocus(){
			if(this.isInputFocus) return
		    this.isInputFocus = true
			let setDomCli = ()=>{
				this.isInputFocus = false
				document.removeEventListener('click',setDomCli)
			}
			setTimeout(()=>{
				document.addEventListener('click',setDomCli)
			},200)
		},
		generateFileUploadChange(data:any){
			let file = data.file;
			let bor = true
            if (file.status === "done") {
                let res:any = JSON.parse(file.xhr.response);
				if(res.errCode == 0){
					let category:any={
						value:'',
						name:'',
					}
					file.id = res.data.id;
					file.imgUrl = res.data.url;
					file.resData = res.data;
					file.type_ = "upload";
					if(this.designTypeList[this.selectCode] && this.selectCode == 'Sketchboard'){
						this.designTypeList[this.selectCode].forEach((item:any) => {
							if(item.name == res.data.level2Type){
								category.value = item?.value
								category.name = item?.name
							}
						});
					}
					file.categoryValue = category?.value;
					file.category = category?.name;
					let paste = this.selectGenerateList.filter((v: any) => v.id === file.id);
					if(paste.length == 0)this.selectGenerateList.push(file);
					this.selectGenerateList = this.selectGenerateList.filter((v: any) => v.status === "done");
				}else{
					bor = false
				}
            } else if (file.status === "error") {
				bor = false
            }
			if(!bor){
                let res:any = JSON.parse(file.xhr.response);
                let index = -1;
                this.selectGenerateList.forEach((ele: any, index1: any) => {
                    if (file.uid === ele.uid) {
                        index = index1;
                    }
                });
                if (index > -1) {
                    this.selectGenerateList.splice(index, 1);
                }
                // message.warning(file.name + this.t('LibraryPage.jsContent8'));
                message.warning(res.errMsg);
			}
		},
		deleteFile(index: any) {
			if(this.scene?.value == 'Slogan' && this.selectCode == 'Printboard'){
				let createSlogan:any = this.$refs.createSlogan
				createSlogan.isDeleteSlogan = true
			}
		   this.selectGenerateList.splice(index, 1);

        },
		PrintModel(){
			if(!this.printModel.optype){
				document.addEventListener('click',this.removePrintModel)
			}
			this.printModel.optype = !this.printModel.optype
		},
		removePrintModel(){
			this.printModel.optype = false
			document.removeEventListener('click',this.removePrintModel)
		},
		setprintModel(item:any){
			this.printModel = item
			// this.printModel = {
			// 	num : num,
			// 	optype:false,
			// 	name:this.t('LibraryPage.Model'+num)
			// }
		},
		imageToSketch(){
			if((!this.printModel?.id && !this.printModel?.value) || !this.selectGenerateList?.[0]?.id)return message.info(this.t('Generate.jsContent4'));
			this.isShowMark = true
			let data = {
				"elementId": this.selectGenerateList[0].id,
				gender:this.sex,
				"style": this.printModel.value,
				"styleImageId": this.printModel.id?this.printModel.id:''
			}
			Https.axiosPost(Https.httpUrls.imageToSketch, data).then((rv)=>{
				if(rv){
					this.designTypeList[this.selectCode].forEach((itemCategory:any) => {
						if(itemCategory.value == rv.category){
							rv.categoryValue = itemCategory?.value
							rv.category = itemCategory?.name
						}
					});
					this.generateList[this.selectCode].push({
						imgUrl:rv.url,
						categoryValue:rv.categoryValue,
						category:rv.category,
						id:rv.id,
						status:'Success',
					})
					this.isShowMark = false
				}
			}).catch(()=>{
				this.isShowMark = false
			})
		},
		getgenerate(){
			if(this.scene?.value == 'extract'){
				this.imageToSketch()
				return
			}
			this.isInputFocus = false
			this.isTextarea = false
			let selectCodeStr = JSON.parse(JSON.stringify(this.selectCode))
			if(this.isGenerate[selectCodeStr]){
				return
			}
			clearInterval(this.remGenerateTime[selectCodeStr])
			this.remGenerate[selectCodeStr] = false
			
			let level2Type = ''
			let collectionElementId = ''
			let base64 = ''
			if(this.selectGenerateList?.[0]){
				collectionElementId = this.selectGenerateList[0].id
				if(this.selectGenerateList[0].base64){
					base64 = this.selectGenerateList[0].imgUrl
				}
			}
			
			let sloganText = ''
			let arr = ["Painting Style","Illustration Style","Real Style"]
			sloganText = this.captionGeneration
			if(this.selectCode == "Sketchboard"){
				level2Type = this.selectGenerateList?.[0]?.categoryValue?this.selectGenerateList[0].categoryValue:''
				if(this.workspace.styleName){
					sloganText = `${this.workspace.styleName},${sloganText}`
				}
			}else if(this.selectCode == "Printboard"){
				level2Type = this.scene?.value
				if(level2Type == 'Slogan' && this.captionGeneration == ''){
					sloganText = this.isSloganHint
				}else if(level2Type == 'Pattern'){
					sloganText = `${arr[this.printModel.num-1]},${sloganText}`
				}
				if(!base64 && level2Type == 'Slogan'){
					message.info(this.t('Generate.jsContent10'));
					return
				}
			}
			let data = {
				generateType:'text',
				designType:'collection',
				collectionElementId:collectionElementId,
				level1Type:selectCodeStr,
				level2Type:level2Type,
				userId:(this?.userDetail as any).userId,
				isTestUser:this.driver__.driver?false:this.isTest,
				text:sloganText,
				seed:this.searchPictureSeed,
				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
				version:this.speedData.value,//为1就是Print
				gender:selectCodeStr == 'Sketchboard'?this.sex:'',
				sloganBase64:base64,
			}
			this.generateLevel2[selectCodeStr] = data.level2Type
			this.isGenerate[selectCodeStr] = true
			this.isTextarea = false
			this.remGenerateTime[selectCodeStr] = setTimeout(()=>{
				this.remGenerate[selectCodeStr] = true
			},10000)
			Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
                (rv) => {
					if(data.isTestUser){
						let str:any
						if(selectCodeStr == 'Moodboard'){
							str = this.t('collectionModal.Moodboard')
						}else if(selectCodeStr == 'Printboard'){
							str = this.t('collectionModal.Printboard')
						}else if(selectCodeStr == 'Sketchboard'){
							str = this.t('collectionModal.Sketchboard')
						}
						if(rv.leftUsageCount >= 1){
							message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:str}));
						}else if(rv.leftUsageCount == 0){
							message.warning(this.t('Generate.jsContent9',{str:str}));
							this.isGenerate[selectCodeStr] = false
							// this.isShowMark = false
							return
						}
					}
					this.setGenerate(selectCodeStr,rv.uniqueId)
					
                }
            ).catch(res=>{
				// this.isShowMark = false
				this.generateLevel2[selectCodeStr] = ''
				this.isGenerate[selectCodeStr] = false
				clearInterval(this.remGenerateTime[selectCodeStr])
				this.remGenerate[selectCodeStr] = false
            });
		},
		setGenerate(str:any,dataList:any){
			
			let data = dataList
			let dataNum = dataList.length
			let state = true
			this.generateTime[str] = setInterval(()=>{
				// let data = this.generateList[str].filter((item:any)=>item.status != 'Success').map((obj:any) => obj.taskId);
				if(!state)return
				state = false
				Https.axiosPost(Https.httpUrls.generateResult, data).then(
					(rv) => {
						state = true
						if(this.isGenerate[str]){//防止取消后有正在执行的获取状态
							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
									this.designTypeList[this.selectCode].forEach((itemCategory:any) => {
										if(itemCategory.value == element.category){
											element.categoryValue = itemCategory?.value
											element.category = itemCategory?.name
										}
									});
									// element.categoryValue = this.scene?.name
									// element.category = this.scene?.value
									this.generateList[str].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'));
								}
								this.store.dispatch('getCredits')
								clearInterval(this.generateTime[str])
								clearInterval(this.remGenerateTime[str])
								this.remGenerate[str] = false
								this.isGenerate[str] = false
								this.generateLevel2[str] = ''
							}
						}
					}
				).catch(res=>{
					clearInterval(this.generateTime[str])
					clearInterval(this.remGenerateTime[str])
					// this.isShowMark = false
					this.isGenerate[str] = false
					this.remGenerate[str] = false
					this.generateLevel2[str] = ''
				});
			},1000)
		},
		removeGenerate(){
			// this.isShowMark = false
			this.isGenerate[this.selectCode] = false
			this.remGenerate[this.selectCode] = false
			clearInterval(this.generateTime[this.selectCode])
			if(this.generateProceedList){
				let str = this.generateProceedList.map((obj:any) => obj.taskId).join(',');
				let type = 'Generate'
				if(this.generateLevel2[str] == 'Logo'){
					type = 'Logo'
				}
				let data = {
					uniqueId:str,
					userId:(this?.userDetail as any)?.userId,
					timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
					type: type
				}
				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
					(rv) => {
						this.generateProceedList = []
					}
				).catch(res=>{
				});
			}
		},
		dropdownVisibleChange(){
			let element:any = this.$refs.cascader
			nextTick().then(()=>{
				let cascader = document.getElementsByClassName('libraryPageCascader')[0]
				let cascaderChild = cascader
				let element:any = this.$refs.cascader
				if(cascader.children.length > 3 ){
				}else{
					let button1:any = document.createElement("span")
					button1.classList.add('started_btn','cascader_btn1')
					let button2:any = document.createElement("span")
					button2.classList.add('started_btn','cascader_btn2')
					let divMax:any = document.createElement("div")
					divMax.classList.add('cascader_btn_max')
					button1.textContent = 'Edit'
					// button2.textContent = '删除'
					button1.addEventListener('click',this.removeLabel,false)
					divMax.appendChild(button1)
					// divMax.appendChild(button2)
					cascaderChild?.insertAdjacentElement("afterbegin", divMax);
					
					// cascader.addEventListener('click',this.cascaderClick)
				}
			})
			let el = element.contentRef?.getElementsByClassName('el-cascader-menu__empty-text')?.[0]
			if(el){
				el.innerHTML = this.t('LibraryPage.NoLabel')
			}
		},
		// cascaderClick(e:Event){
		// 	console.log(e.target)
		// },
		
		removeLabel(){
			let setLabel:any = this.$refs.setLabel
			let cascader:any = this.$refs.cascader
			cascader.togglePopperVisible()
			let event = new Event('click', {"bubbles":true, "cancelable":true});
			document.dispatchEvent(event);
			setLabel.init('add',this.options)
		},
		labelSearch(){
			nextTick().then(()=>{
				let cascader = document.getElementsByClassName('editLabel')[0]
				cascader.addEventListener('click',(event)=>{
					event.stopPropagation()
				})
			})
			

		},
		scaleImage(index:any){
			let scaleImage:any = this.$refs.scaleImage
			scaleImage.scaleImageMask = true
			scaleImage.init(this.generateList[this.selectCode],index)
		},
		onPaste(e:any){
			if(e.clipboardData.items[0] && !this.isTextarea && this.selectCode !== 'Moodboard' && this.scene?.value != 'Slogan' && this.scene?.value != 'Logo'){
				let param = new FormData(); 
				param.append('inPin','0')
				param.append('gender',this.sex)
				param.append('level1Type',this.selectCode)
				param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
				param.append('file',e.clipboardData.files[0]);
				let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
				Https.axiosPost(Https.httpUrls.elementUpload, param, config).then((v)=>{
					let value = {data:v,errCode : 0}
					v.status = 'done'
					let data = {
						file:{
							status: 'done',
							xhr:{
								response:JSON.stringify(value)
							}
						}
					}
					this.generateFileUploadChange(data)
					
				})
			}
			
		}
    }
})
</script>
<style lang="less">
.el-icon{
	font-size: 14px;
}
.library_page {
    width: 100%;
	overflow: hidden;
    height: 100%;
	padding: 0 6rem;
	// min-width: 1440px;
	position: relative;
    .page_content {
        position: relative;

        .page_content_bg {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .page_content_body {
            position: absolute;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
			display: flex;
			flex-direction: column;
            
            .library_page_body{
				overflow: hidden;
                width: 100%;
                // height: 100%;
				flex: 1;
                box-sizing: border-box;
                display: flex;
				padding-top: 2rem;
				.printModel{
					font-size: 1.4rem;
					font-weight: 500;
					margin-right: 2rem;
				}
                .library_body_left{
                    // width: 27.5rem;
					width: 36.5rem;
                    height: 100%;
                    background: rgba(255,255,255,0.4);
					margin-right: 5rem;
					>div{
						background: #f7f8fa;
						border-radius: 2rem;
						overflow: hidden;
						padding: 2rem 0;
					}
                    .library_menu_list{
						padding-left: 2rem;
                        .menu_item{
                            width: 100%;
                            height: 6.8rem;
                            display: flex;
							font-weight: 900;
                            align-items: center;
                            justify-content: space-between;
                            padding: 0 1rem 0 2.5rem;
                            border-left: 0.5rem solid transparent;
                            // font-size: 1.6rem;
							font-size: var(--aida-fsize2);
                            color: #030303;
                            cursor: pointer;
							transition: all .3s;
                            
                            &.child_menu_item{
                                padding-left: 6.5rem;
                            }

                            &.select_menu_item{
                                background: #fff;
								border-radius: 2rem;
								transform: translateX(2rem);
                                // background: #E6E6F6;
                                // border-color: #343579;;
                            }

                            .menu_item_left{
                                display: flex;
                                align-items: center;
                                user-select: none;

                                .fi{
                                    font-size: 2.2rem;
									display: flex;
                                    color: #030303;
                                    margin-right: 1.8rem;
                                }
                            }

                            .icon_rotate{
                                -moz-transform:rotate(180deg);
                                -webkit-transform:rotate(180deg);
                                transform: rotate(180deg);
                                animation-direction: 0.5s;
                            }
                        }

                    }
                }
                .library_body_right{
                    width: calc(100% - 23.5rem);
                    height: 100%;

					.header_operate_item{
						margin-right: 5rem;
						color: #C2C2C2;
						font-size: var(--aida-fsize1-8);
						.ant-upload{
							// font-size: 1.6rem;
							// font-weight: 900;
						}
						.ant-upload-list-text{
							display: none;
						}

						&.operate_select{
							color:#333333;
							cursor: pointer;
							font-weight: 900;
						}
						&.fontSize{
							font-size: 1.4rem;
						}
						&.active{
							color:#333333;
							cursor: pointer;
						}
						&.pointer{
							cursor: pointer;
						}
						&:last-child{
							margin-right: 11rem;
						}
					}

					.content_search_block{
						display: flex;
						align-items: center;
						width: 75rem; 
						.search_input{
							height: 3rem;
							border-radius: 0.5rem;
							width: 20rem;
							border: 1px solid rgba(0, 0, 0, 0.15);
							padding-left: 1.5rem;
							border: 0.1rem solid #F1F1F1;
							font-size: 1.2rem;
							font-weight: 400;
							margin-right: 2rem;
							&::placeholder {
								color: #C2C2C2;
							}
						}
					
						.search_cascader{
							// width: 53%;
							width: 38rem;
							display: flex;
							position: relative;
							
							
						}
						.search_icon_block{
							width: 5.2rem;
							height: 2.8rem;
							line-height: 2.8rem;
							text-align: center;
							background: #343579;
							background-color: #39215b;
							cursor: pointer;
							border-radius: 2rem;
							margin-left: 3rem;
							.icon-sousuo{
								font-size: 1.6rem;
								color: #FFFFFF;
							}
						}
						.intersection{
							margin-left: 3rem;
							cursor: pointer;
						}
						
					}

                    .library_right_header{
                        display: flex;
                        padding: 0 3.5rem 0 2.8rem;
                        align-items: center;
                        justify-content: space-between;
                        background: rgba(255,255,255,0.4);
                        box-shadow: 0 0.2rem 0.8rem 0 rgba(238,238,244,0.25);

                        .library_header_left{
                            height: 4rem;
                            display: flex;
                            align-items: center;

                           
                        }

						 

                        .librart_headr_right{
                            display: flex;
                            align-items: center;
                            .select_block{
                                // background: #FFFFFF;
                                color: #1A1A1A !important;
								.ant-select-selector{
									border: 2px solid !important;
								}
								.ant-select{
									.ant-select-arrow{
										.icon-xiala{
											margin-left: -2rem;
											zoom: .7;
										}
									}
								}
                                .icon-xiala{
                                    color: #1A1A1A !important;
                                }
                            }
                        }
                    }

                    .libray_right_content{
                        width:100%;
                        height:calc(100% - 8rem);
                        padding: 0.1rem 0 0 0.3rem;
                        box-sizing: border-box;

                        .right_content_body{
                            width: 100%;
                            height: 100%;
                            background: #f6f5fa;
                            padding: 0 2rem 5rem 1rem;
							border-radius: 2rem;
							overflow: hidden;
							display: flex;
							flex-direction: column;
                            .content_body_header{
                                height: 10rem;
                                display: flex;
                                justify-content: flex-end;
                                align-items: center;
								// padding: 2rem 0 2rem 3rem;
								padding-left: 3rem;
								box-sizing: content-box;
								justify-content: space-between;
								.content_body_header_left{
									display: flex;
									align-items: center;
								}
								.content_body_header_right{
									display: flex;
									width: 43rem;
								}
                                .check_all_block{
                                    display: flex;
                                    align-items: center;
                                    font-size: 1.6rem;
                                    color: #64686D;
                                    cursor: pointer;

                                    &.check_all{
                                        color: #1A1A1A;
                                    }

                                    .check_block{
                                        width: 2.4rem;
                                        height: 2.4rem;
                                        background: #EBECF4;
                                        border: 0.1rem solid #64686D;
                                        padding: 0.3rem;
                                        margin-right: 0.7rem;

                                        .check_block_body{
                                            width: 100%;
                                            height: 100%;
                                            background: #343579;
                                        }
                                    }
                                }
								&.content_body_header_generate{
									justify-content: flex-start;
									.checkboxItem {
										margin-right: 4rem;
										label {
											display: flex;
											cursor: pointer;
											input {
												margin-right: 0.5rem;
												padding-left: 1.5rem;
											}
											span {
												font-size: 1.4rem;
												font-weight: 500;
												bottom: -.5rem;
											}
										}
									}
									.input_border{
										padding-bottom: 0;
										background: rgba(0, 0, 0, 0);
										width: 55rem;
										.input_box_btnBox{
											background: #fff;
											align-items: center;
											width:65%;
											.search_input{
												height: 3rem;
											}
										}
									}
									
									
								}
								
                            }

                            .content_body_table{
                                width: 100%;
                                height: calc(100% - 12rem);
                                overflow-y:auto;
								display: flex;
								flex-wrap: wrap;
								justify-content: flex-start;
								align-content: flex-start;
								&.content_body_table::-webkit-scrollbar {
									display: none;
								}
                                .content_img_item{
                                    display: inline-block;
                                    vertical-align: top;
                                    padding: 0 1.4rem;
                                    margin-bottom: 2.8rem;
									width: 16.6%;
									display: flex;
									flex-direction: column;
									align-items: center;
									position: relative;
                                    .content_img_item_block{
                                        border: 0.1rem solid transparent;
                                        // width: 16.5rem;
                                        // height: 16.5rem;
										width: 17rem;
										height: 17rem;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        position: relative;
                                        cursor: pointer;
										background: #fff;
                                        &.select_item_img{
                                            // border-color: #343579;
											opacity: 0.5;
											border-radius: 1rem;
											transform: scale(0.9);
                                        }

                                        .content_img{
                                            max-width: 100%;
                                            max-height: 100%;
                                        }

                                        .board_content_img{
                                            // width: 100%;
                                            // height: 100%;
                                        }

                                        &:hover .img_item_hover{
                                            // display: block;
											opacity: 1;
                                        }

                                        .img_item_hover{
                                            position: absolute;
                                            width: 100%;
                                            height: 100%;
                                            left: 0;
                                            top:0;
                                            background: rgba(0,0,0,0.2);
                                            // display: none;
											opacity: 0;

                                            .img_operate_content{
                                                position: absolute;
                                                right: 0.6rem;
                                                top: 0.6rem;
												&.left{
													left: 0.6rem;
													right: auto;
													
												}
                                            }
                                            .img_operate_block{
                                                width: 3.6rem;
                                                height: 3.6rem;
                                                background: rgba(0,0,0,0.6);
                                                border-radius: 50%;
                                                text-align: center;
                                                line-height: 3.6rem;
                                                cursor: pointer;
                                                margin-bottom: 0.4rem;
												.operate_icon,i{
													display: flex;
													justify-content: center;
													align-items: center;
													width: 100%;
													height: 100%;
												}
                                                .operate_icon{
                                                    font-size: 1.8rem;
                                                    color: #fff;
													&.fi-sr-heart{
														color: red;
													}
                                                }
												i{
													font-size: 1.8rem;
													color: #fff;
													
												}
                                            }
											
                                        }
                                    }
                                    .content_img_name{
                                        width: 16.5rem;
                                        height: 3.5rem;
                                        line-height: 3.5rem;
                                        white-space: nowrap;
                                        text-align: center;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        font-size: 1.4rem;
                                        color: #030303;
                                    }
                                }

                                .no_data_block{
                                    width: 100%;
                                    height: 100%;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                }
                            }

                            .table_pagination{
                                text-align: center;
								// height: 5.2rem;
								flex: 1;
                                margin-top: 2rem;
                            }
                        }
                    }
                }

            }
        }
        
    }
}

.library_rename_modal_component{

    .collection_rename_content{
        padding:0 6.8rem 1.8rem;

		.collection_rename_title{
			margin: 2rem 0rem 1rem 0;
			font-size: var(--aida-fsize1-8);
		}
        .rename_form_content{

            .rename_form_input{
                width: 100%;
                height: 4.6rem;
                border: 0.1rem solid #d9d9d9;
                padding-left: 2.1rem;
                line-height: 4.6rem;
                font-size: 1.8rem;
                box-sizing: border-box;
				border-radius: 4px;

                &::placeholder {
                    color:#adabb9
                }
            }
			.select_block{
				display: flex;
				justify-content: space-between;
                font-size: 1.8rem;
				color:#adabb9;
				font-weight: 300;
				.ant-select{
					border-radius: 4px;
					width: 48%;
					border: 0.1rem solid #d9d9d9 !important;
					.ant-select-arrow{
						.icon-xiala{
							margin-left: -0rem;
						}
					}
				}
				.ant-select-selection-item{
					color:#262626;
					font-weight: 300;
				}
				.ant-select-selector{
					margin-left: 0rem;
					color:#adabb9;
					width: 100%;
					padding-left: 2.1rem;
				}
				.icon-xiala{
					color: #adabb9 !important;
					font-weight: 400;
				}
			}
        }

        .rename_button_list{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-top: 3rem;

            .rename_button_item{
                width: 8.6rem;
                height: 3.2rem;
                line-height: 3.2rem;
                text-align: center;
                font-size: 1.4rem;
                cursor: pointer;
            }

            .rename_cancel_button{
                background: #E4E5EB;
                color: #030303;
                margin-right: 1.8rem;
            }

            .rename_submit_button{
                background: #343579;
                color: #FFFFFF;
            }
        }
		.el-cascader{
			.el-input--suffix{
			--el-input-hover-border-color: #d9d9d9;
				// border: .1rem solid #d9d9d9;
			}
			height: 4.6rem;
			.el-tag__content{
				line-height: 2.5;
				.el-cascader__tags{
					
				}
			}
			.el-input__wrapper{
				padding-left: 0;
			}
			.el-cascader__search-input,.el-input__inner{
				margin: 0;
				width: 100%;
				height: 4.6rem;
				padding-left: 2.1rem;
				line-height: 4.6rem;
				font-size: 1.8rem;
				box-sizing: border-box;
			}
		}

        
    }
}
</style>