<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')">
                                    <a-upload
										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 v-show="uploadGenerate != 'Upload'">{{ $t('LibraryPage.Upload') }}</div>
                                </div>
							   <div v-show="selectCode != 'Models'" 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 == 'MarketingSketch'">
									<a-select
                                        ref="select"
                                        v-model:value="sex"
                                        :options="sexList"
                                        @change="sexChange"
                                    >
                                        <template #suffixIcon
                                            ><span
                                                class="icon iconfont icon-xiala"
                                                style="color: #343579"
                                            ></span
                                        ></template>
                                    </a-select>
                                    <a-select
                                        ref="select"
                                        v-model:value="designType"
                                        :options="disignTypeList"
                                        @change="handleChange"
                                    >
                                        <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">
									<div class="content_body_header_left">
										<div class="content_body_header_right">
											<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('','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_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)">
                                        <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">
                                                <div class="img_operate_content">
                                                    <div class="img_operate_block" @click.stop="editPlacementClick(img)" v-show="selectCode === 'Models'">
                                                        <span class="icon iconfont icon-tianxie operate_icon"></span>
                                                    </div>
                                                    <div class="img_operate_block" @click.stop="showRenameModal(img,'single')">
                                                        <span class="icon iconfont icon-zhongmingming operate_icon"></span>
                                                    </div>
                                                    <div class="img_operate_block" @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 class="checkboxItem">
											<label>
												<input
													type="checkbox"
													v-model="checkbox[0].type"
													@click="setKeyword(0)"
												/>
												<span>{{ $t('LibraryPage.ImageOnly') }}</span>
											</label>
										</div>
										<div class="checkboxItem">
											<label>
												<input
													type="checkbox"
													v-model="checkbox[1].type"
													@click="setKeyword(1)"
												/>
												<span>{{ $t('LibraryPage.TextOnly') }}</span>
											</label>
										</div>
										<div class="checkboxItem">
											<label>
												<input
													type="checkbox"
													v-model="checkbox[2].type"
													@click="setKeyword(2)"
												/>
												<span>{{ $t('LibraryPage.TextImage') }}</span>
											</label>
										</div>
									</div>
									
									<div class="input_box" :class="{active:inputShow}">
										<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{active:checkbox[0].type}" :readonly="checkbox[0].type" :placeholder="$t('LibraryPage.inputContent2')" v-model="captionGeneration">
										<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('LibraryPage.Generate') }}</div>
										<span>{{ $t('LibraryPage.maximumLength') }}</span>
									</div>
									<div v-show="selectCode == 'Printboard'" 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>
										</ul>
									</div>
									<div class="upload_item">
										<div
											class="upload_file_item"
											v-for="(file, index) in selectGenerateList"
											:key="file"
											:class="[file?.checked?'active':'']"
										>
											<div
												class="upload_file_item_content"
												v-show="file?.status === 'uploading'"
											>
												<a-spin :indicator="indicator" tip="Uploading..." />
											</div>
											<div class="upload_file_item_content" @click.stop="setSketchboardItem(file)" v-show="file?.status === 'done'">
												<img :src="file?.imgUrl" class="upload_img" />
												<div class="delete_file_block rightTop" @click="deleteFile(index)" >
													<span class="icon iconfont icon-shanchu"></span>
												</div>
											</div>
										</div>
										
										<div
											class="upload_component upload_file_item"
											v-show="selectGenerateList.length <= 3"
										>
											<a-upload
												:action="uploadUrl + '/api/element/upload'"
												list-type="picture-card"
												:before-upload="beforeUpload"
												:disabled="checkbox[1].type"
												:data="{
													...upload
												}"
												:headers="{Authorization:token}"
												v-model:file-list="selectGenerateList"
												multiple
												accept=".jpg,.png,.jpeg,.bmp"
												@change="generateFileUploadChange"
												>
												<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 class="content_body_table scroll_style">
                                    <div class="content_img_item" v-for="(img,index) in generateList" :key="img.id" @click="selectImgItem(img)">
                                        <div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']">
                                            <img v-lazy="img.imgUrl" :key="img.imgUrl" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']"/>
                                            <!-- <div class="img_item_hover">
                                                <div class="img_operate_content">
                                                    <div class="img_operate_block" @click.stop="editPlacementClick(img)" v-show="selectCode === 'Models'">
                                                        <span class="icon iconfont icon-tianxie operate_icon"></span>
                                                    </div>
                                                    <div class="img_operate_block" @click.stop="showRenameModal(img,'single')">
                                                        <span class="icon iconfont icon-zhongmingming operate_icon"></span>
                                                    </div>
                                                    <div class="img_operate_block" @click.stop="deleteSinglePic(img,index)">
                                                        <span class="icon iconfont icon-shanchu operate_icon"></span>
                                                    </div>
                                                </div>
                                            </div> -->
                                        </div>
                                        <div class="content_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="generateList.length">
                                  
                                </div>
							</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <a-modal class="library_rename_modal_component" 
            v-model:visible="renameVisivle" 
            :footer="null" 
            title="Rename Pic"
            width="56rem"
            :maskClosable="false"
            :centered="true"
            @onCancel="closeRenameModal"
        >
            <div class="collection_rename_content">
                <div class="rename_form_content">
                    <input class="rename_form_input" :placeholder="$t('LibraryPage.inputContent3')" v-model="newPicName" @keydown.enter="confrimRename()">
                </div>
                <div class="rename_button_list">
                    <div class="rename_button_item rename_cancel_button"  @click="closeRenameModal()">{{ $t('LibraryPage.Cancel') }}</div>
                    <div class="rename_button_item rename_submit_button"  @click="confrimRename()">{{ $t('LibraryPage.Sure') }}</div>
                </div>
            </div>
        </a-modal>

        <ModelPlacement ref="ModelPlacement" @submitModelPlacement="getLibraryList"></ModelPlacement>
        <ModelPlacementMobile ref="ModelPlacementMobile"></ModelPlacementMobile>

        <!-- 蒙层 start-->
        <div class="mark_loading" v-show="isShowMark">
            <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} from 'vue'
import HeaderComponent from "@/component/HomePage/Header.vue";
import ModelPlacement from '@/component/LibraryPage/ModelPlacement.vue';
import ModelPlacementMobile from '@/component/LibraryPage/ModelPlacementMobile.vue';
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
import { Modal,message,Upload} 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 { useI18n } from "vue-i18n";
export default defineComponent({
    components: {
        HeaderComponent,
        ModelPlacement,
        ModelPlacementMobile,
		RobotAssist
    },
    setup() {
        let menuList = ref([
            {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:'MarketingSketch',icon:'icon-fuwushichang',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 designType:any = ref('Outwear')
        let sex:any = ref('Meal')
		let sexList:any = [
               
            ]
        let disignTypeList:any = [
              
            ]
        let imgList = ref([])
        let currentPage:any = ref(1)
        let pageSize:any = ref(18)
        let total:any = ref(20)
        let renameVisivle:any = ref(false)
        let renameType:any = ref('single')//修改名字的方式single-单个 batch-批量
        let newPicName:any = ref('')
        let uploadUrl:any = ref('')
        let currentUploadFileNum:any = ref(0) //当次上传文件数量
        let isShowMark:any = ref(false) //蒙层
        let selectSingleImg:any = ref({}) //保存单个图片数据
        let store = useStore();
		let uploadGenerate:any = ref('Upload')
		let checkbox = ref([
            {
                name: "image",
                type: false,
            },
            {
                name: "text",
                type: true,
            },
            {
                name: "text-image",
                type: false,
            },
        ]);
		let inputShow = ref(false)
		let generateCheckbox:any = ref()
		let captionGeneration:any = ref()
		let inputTime = ref()
		let generateList:any = ref([
    {
        "id": 266,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735547_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065908Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=910634477c4188db039cfddfa69147c02d354200989a6515ee80dc9b939e6b83"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    },
    {
        "id": 267,
        "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
    }
])
		let selectGenerateList:any = ref([])
		let printModel = ref({
			num:1,
			optype:false,
			name:useI18n().t('LibraryPage.model')+'1'
		})
		let {t} = useI18n()

        return {
            menuList,
            selectImgList,
            selectCode,
            searchPictureName,
			sexList,
			sex,
            disignTypeList,
            designType,
            imgList,
            currentPage,
            pageSize,
            total,
            renameVisivle,
            renameType,
            newPicName,
            uploadUrl,
            currentUploadFileNum,
            isShowMark,
            selectSingleImg,
			store,
			uploadGenerate,
			checkbox,
			inputShow,
			generateCheckbox,
			captionGeneration,
			inputTime,
			generateList,
			selectGenerateList,
			printModel,
			t,
        }
    },
	data(this_) {
		console.log(this_);

        return {
			indicator: h(LoadingOutlined, {
                style: {
                    fontSize: "2.4rem",
                },
                spin: true,
            }),
            upload: {
                isPin: 0,
                level1Type: this_.selectCode,
                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            },
            token: "",
        };
    },
    async mounted(){
        this.uploadUrl = getUploadUrl()
        this.getLibraryList()
		this.getSex()
        this.token = getCookie("token") || "";
    },
    methods:{

		getSex(){
			Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
				if (rv) {
					let arr:any = []
					rv.forEach((item:any) => {
						let obj = {
							value:item.name,
							label:item.name,
						}
						arr.push(obj)						
					});
					this.sex = arr[0].value
					this.sexList = arr
					this.getPosition()
				}
			})
		},
		async getPosition(){
			let params
			if(this.sex == 'Female'){
				params = 'FemalePosition'
			}else{
				params = 'MalePosition'
			}
			await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
				if (rv) {
					let arr:any = []
					rv.forEach((item:any) => {
						let obj = {
							value:item.name,
							label:item.name,
						}
						arr.push(obj)						
					});
					this.designType = arr[0].value
					this.disignTypeList = arr
					// this.workspaceItem.position = this.singleTypeList[0].label
				}
			})
		},
        selectMenuItem(menu:any,index:any){
            if(menu.children?.length){ //证明是有子菜单
                menu.showChildren = !menu.showChildren
            }else{
                this.selectCode = menu.code
				this.upload.level1Type = menu.code
                this.currentPage = 1,
                this.total = 0,
                this.searchPictureName = ''
                this.imgList = [],
                this.sex = 'Female',
                this.designType = 'Outwear',
                this.selectImgList = []
                this.selectSingleImg = {}
                this.getLibraryList()
				this.uploadGenerate = 'Upload'
				this.captionGeneration = ''
				this.selectGenerateList = []
            }
        },

		async sexChange(){
			await this.getPosition()
            this.getLibraryList()
		},
        handleChange(){
            this.getLibraryList()
        },

         fileUploadChange(data:any){
            let file = data.file
            // let Cropper:any = this.$refs.Cropper
            if(this.selectCode == 'Models'){
                let reader = new FileReader();
                reader.onload = (e:any) => {
                    let data_new;
                    if (typeof e.target.result === 'object') {
                    // 把Array Buffer转化为blob 如果是base64不需要
                    data_new = window.URL.createObjectURL(new Blob([e.target.result]));
                    } else {
                    data_new = e.target.result;
                    }
                    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()
        },

        //选择图片
        selectImgItem(imgData:any){
            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)
            }
        },

        closeRenameModal(){
            this.renameVisivle= false;
            this.newPicName = ''
        },

        //确定修改名称
        confrimRename(){
            let data = {
                libraryIds:this.renameType === 'single' ? [this.selectSingleImg.id] : this.selectImgList,
                libraryName:this.newPicName,
                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,  
            }
             Https.axiosPost(Https.httpUrls.batchUpdateLibraryName, data).then(
                (rv: any) => {
                    if(this.renameType ==='batch'){
                        this.selectImgList = []
                    }
                    this.getLibraryList()
                    this.closeRenameModal() 
                }
            ).catch((res)=>{
                this.closeRenameModal()
            });
        },

        //打开修改名称弹窗
        showRenameModal(data:any,type:any){
            if(type =='batch' && !this.selectImgList.length){ //批量但未选中
                return
            }
            if(type === 'single'){
                this.selectSingleImg = data
            }
            this.renameType = type
            this.renameVisivle = true
        },
		upLoad(){

		},
		uploadGenerateOpen(str:any){
			if(this.uploadGenerate == str){
				this.uploadGenerate = str
			}else{
				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)
                }
            });
        },

        //批量删除图片
        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){
            let libraryIds = data ? [data.id] : this.selectImgList
            let newData = {
                libraryIds:libraryIds
            }
             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)=>{
            });
        },

        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.warning(this.t('LibraryPage.jsContent3'));
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                message.warning(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
			}
            let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType : ''
            let new_data = {
                file:event.file,
                level1Type:this.selectCode,
                level2Type:designType,
				sex:this.selectCode == 'Models' ? 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()
					}
				}
            });
		},
        getLibraryList(){
            let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType : ''
            let data = {
                level1Type:this.selectCode,
                level2Type:designType,
                page:this.currentPage,
				modelSex:this.sex?this.sex:'',
                pictureName:this.searchPictureName,
                size:this.pageSize,
            }
            this.isShowMark = true
            Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
                (rv: any) => {
                    this.imgList = rv.content
                    this.total = rv.total
                    this.isShowMark = false
                }
            ).catch((res)=>{
                this.isShowMark = false
            });
        },

        //编辑模特打点
        editPlacementClick(data:any){
            let newData = {
                ...data.libraryModelPoint,
                url:data.url,
            }
            this.placementClick(newData)
        },

        //给模特打点编辑
        placementClick(data:any){
            let placementModal:any = isMoible() ? this.$refs.ModelPlacementMobile : this.$refs.ModelPlacement
            placementModal.showPlacementModal(data)
        },
		//generate
		setKeyword(num: any) {
            this.checkbox.forEach((v: any) => {
                v.type = false;
            });
			nextTick().then(()=>{
				this.checkbox[num].type = true
				if(this.checkbox[1].type){
					this.selectGenerateList.forEach((v:any)=>{
						v.checked = false
					})
				}
			})
        },
		ifMaximumLength(){
			clearTimeout(this.inputTime)
			this.inputTime = setTimeout(()=>{
				if(this.captionGeneration.split(/\s+/).length > 75){
					this.inputShow = true
				}else{
					this.inputShow = false
				}
			},500)
		},
		generateFileUploadChange(data:any){
			let file = data.file;
            if (file.status === "done") {
                let res = JSON.parse(file.xhr.response);
                file.id = res.data.id;
                file.imgUrl = res.data.url;
                file.resData = res.data;
                file.type_ = "upload";
            } else if (file.status === "error") {
                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.error(file.name + "upload failed");
            }
		},
		deleteFile(index: any) {
		   this.selectGenerateList.splice(index, 1);

        },
		setSketchboardItem(item:any){
			if(this.checkbox[1].type){
				return
			}
			if(item.checked){
				item.checked = false
			}else{
				this.selectGenerateList.forEach((v:any)=>{
					if(v.checked){
						v.checked = false
					}
				})
				item.checked = true
			}
		},
		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(num:any){
			this.printModel = {
				num : num,
				optype:false,
				name:this.t('LibraryPage.model')+num
			}
		},
		getgenerate(){
			let generateType = this.checkbox.filter((v:any)=>v.type)[0].name
			let generageImg = this.selectGenerateList.filter((v:any)=>v.checked)[0]
			let data = {
				generateType:generateType,
				designType:'',
				collectionElementId:generageImg?.id,
				level1Type:this.selectCode,
				level2Type:this.selectCode == 'Sketchboard'?this.designType:'',
				text:this.captionGeneration,
				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
				version:this.selectCode == 'Printboard'?this.printModel.num:0,//为1就是Print
				gender:this.selectCode == 'Sketchboard'?this.sex:'',
			}
			if(generateType == 'image'||generateType == 'text-image'){
				if(generageImg?.id){
					
				}else{
					message.warning(
						"Please select a picture"
					);
					return
				}
			}else if(generateType == 'text'){
				data.collectionElementId = ''
				data.level2Type = ''
				// this.beforeUpload(false)
				if(this.captionGeneration){
					let arr = this.captionGeneration.split(/\s+/).length
					if(arr > 75){
						message.warning(
							this.t('LibraryPage.jsContent6')
						);
					return

					}
				}else{
					message.warning(
						this.t('LibraryPage.jsContent7')
					);
					return
				}
			}
			// this.isShowMark = true
			// Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
            //     (rv) => {
			// 		if(rv){
			// 			let arr
			// 			rv.generatedCollectionItems.forEach((v:any,index:number)=>{
			// 				arr = {
			// 					id:v.generateItemId,
			// 					imgUrl:v.generateItemUrl,
			// 				}
			// 			this.generateList.push(arr)
			// 			console.log(this.generateList);
						
			// 			})
			// 			this.isShowMark = false
			// 		}
            //     }
            // ).catch(res=>{
			// 	this.isShowMark = false
            // });
		},
    }
})
</script>
<style lang="less">
.library_page {
    width: 100%;
	overflow: hidden;
    height: 100%;
	padding: 0 9rem;
	min-width: 1024px;
	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: calc(100% - 7rem);
				flex: 1;
                box-sizing: border-box;
                display: flex;
				padding-top: 2rem;
                .library_body_left{
                    width: 23.5rem;
                    height: 100%;
                    background: rgba(255,255,255,0.4);
					margin-right: 8rem;
					>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;
                            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: 1.6rem;
						.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;
						.search_input{
							// width: 20.8rem;
							// padding-left: 1.5rem;
							// height: 2.8rem;
							// line-height: 3.6rem;
							// background: #FFFFFF;
							// border: 0.1rem solid #F1F1F1;
							// font-size: 1.6rem;
							// font-weight: 400;
							height: 3rem;
							border-radius: 0.5rem;
							width: 30rem;
							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;
							&::placeholder {
								color: #C2C2C2;
							}
						}

						.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;
							}
						}
					}

                    .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;
								}
								.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;
											}
										}
									}
									.input_box{
										background:initial;
										padding: 1.5rem 0;
										input{
											width: 30rem;
											height: 3rem;
											&.active{
												cursor: no-drop;
											}
										}
										.generage_btn{
											margin: 0 3rem;
										}
									}
									.printModel{
											font-size: 1.4rem;
											font-weight: 500;
											>div{
												width: 7rem;
												display: flex;
												justify-content: center;
												border-radius: 1rem;
												margin: 0;
												border: 2px solid;
												cursor: pointer;
											
											}
											ul{
												position: absolute;
												width: 7rem;
												text-align: center;
												margin-top: .3rem;
												border-radius: 1rem;
												overflow: hidden;
												z-index: 3;
												li{
													background: #c5c4c8;
													line-height: 2;
													cursor: pointer;
													&.printModel_item:hover{
														background: #949396;
													}
												}
											}
										}
									.upload_item{
										margin-left: 4rem;
										.upload_file_item{
											width: 8rem;
											height: 8rem;
											margin: 0;
											margin-right: 2rem;
										}
										.upload_component{
											margin: 0;
										}
										
									}
									
								}
								
                            }

                            .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;
                                    .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;
                                        }

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

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

                                        &:hover .img_item_hover{
                                            display: block;
                                        }

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

                                            .img_operate_content{
                                                position: absolute;
                                                right: 0.6rem;
                                                top: 0.6rem;
                                            }

                                            .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{
                                                    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;


        .rename_form_content{

            .rename_form_input{
                width: 100%;
                height: 4.6rem;
                margin-top: 1rem;
                border: 0.1rem solid #B4BED7;
                padding-left: 2.1rem;
                line-height: 4.6rem;
                font-size: 1.8rem;
                box-sizing: border-box;

                &::placeholder {
                    color:#A5B0C2,
                }
            }
        }

        .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;
            }
        }

        
    }
}
</style>