<template>
    <div class="libraryList">
		<div class="generalModel_state">
			<div class="generalModel_state_item" v-if="level1Type != 'Models' && catecoryList.length > 0" :style="{'width':(level1Type == 'DesignElements'?'100%':'40%')}">
				<a-select
					v-model:value="designType"
					:options="(designTypeList)"
					@change="handleChange"
					style="width:100%; font-size: 1.4rem;"
					size="large"
					:fieldNames="{ label: 'name', value: 'value' }"
				>
					<template #suffixIcon
						><span
							class="icon iconfont icon-xiala"
							style="color: #000"
						></span
					></template>
				</a-select>
			</div>
			<div class="generalModel_state_item" v-if="level1Type == 'Models'" style="margin-bottom: 1rem;" :style="{'width':mannequinData.system == 'system'?'48%':'100%'}">
				<a-select
					v-model:value="mannequinData.system"
					:options="systemList"
					@change="handleChange"
					style="width:100%; font-size: 1.4rem;"
					size="large"
					:fieldNames="{ label: 'name', value: 'value' }"
				>
					<template #suffixIcon
						><span
							class="icon iconfont icon-xiala"
							style="color: #000"
						></span
					></template>
				</a-select>
			</div>
			<div class="generalModel_state_item" v-if="level1Type == 'Models'" v-show="mannequinData.system == 'system'" style="width: 48%; margin-bottom: 1rem;">
				<!-- {{ mannequinStyle }} -->
				<a-select
					v-model:value="mannequinData.style"
					:options="mannequinStyle"
					@change="handleChange"
					style="width:100%; font-size: 1.4rem;"
					size="large"
					:fieldNames="{ label: 'name', value: 'value' }"
				>
					<template #suffixIcon
						><span
							class="icon iconfont icon-xiala"
							style="color: #000"
						></span
					></template>
				</a-select>
			</div>
			<div class="generalModel_state_item" v-if="level1Type == 'Models'" style="width: 39%;">
				<a-select
					v-model:value="mannequinData.ageGroup"
					:options="ageGroupList"
					@change="handleChange"
					style="width:100%; font-size: 1.4rem;"
					size="large"
					:fieldNames="{ label: 'name', value: 'value' }"
				>
					<template #suffixIcon
						><span
							class="icon iconfont icon-xiala"
							style="color: #000"
						></span
					></template>
				</a-select>
			</div>
			<div class="generalModel_state_item" v-if="level1Type == 'Models'" style="width: 39%;">
				<a-select
					v-model:value="mannequinData.sex"
					:options="sexList"
					@change="handleChange"
					style="width:100%; font-size: 1.4rem;"
					size="large"
					:fieldNames="{ label: 'name', value: 'value' }"
				>
					<template #suffixIcon
						><span
							class="icon iconfont icon-xiala"
							style="color: #000"
						></span
					></template>
				</a-select>
			</div>
			<div class="generalModel_state_item" style="width: 35%; flex: 1;margin-right: 2%;" v-if="level1Type != 'Models' && level1Type != 'DesignElements'">
				<input class="search_input" style="width: 100%;" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName"  @keydown.enter="getLibraryList()">
			</div>
			<div  class="generalModel_state_item" style="width: auto;" v-show="level1Type != 'DesignElements'">
				<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
			</div>
			<!-- clothesPrint -->
		</div>
		<div class="libraryList_box">
			<div class="content_img_item" v-for="(file) in libraryList" :key="file.id">
				<div class="content_img_item_block" :class="{active:file?.checked}">
					<img :src="level1Type != 'Models'?file.url:file.presignedUrl" :key="level1Type != 'Models'?file.url:file.presignedUrl" :alt="file?.name" @click.stop="selectImgItem(file)"/>
					<sketchCategory v-if="level1Type != 'Models' && level1Type != 'DesignElements'" :isSpread="catecoryList.length == 0" :disignTypeList="designTypeList" :generateList="libraryList" :item="file" :isSetSketchCategory="true"></sketchCategory>
				</div>
			</div>
			<div v-show="total > libraryList.length" class="material_content_list_loding" v-observe>
				<img src="@/assets/images/homePage/loading.gif" alt="">
			</div>
		</div>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted, watch} from 'vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import { useI18n } from 'vue-i18n'
export default defineComponent({
    components:{
		sketchCategory
    },
	props:{
		catecoryList:{
		    type:Object,
			default:()=>[] as any,
			required:true
		},
		type:{
		    type:String,
			default:'' as any,
			required:true
		},
		randomId:{
			type:Boolean,
			default:true
		},
		level1Type:{
		    type:String,
			default:'' as any,
			required:true
		},
	},
	emits:['selectImgItem'],
    setup(props,{emit}) {
        const store = useStore();
		const {t} = useI18n()
		const detailData = reactive({
			isShowLoading:false,//懒加载，加载中
			libraryList:[],
			designTypeList:computed(()=>props.catecoryList) as any,
			designType:'',
			searchPictureName:'',
			mannequinData:{
				sex:'Female',
				style:'',
				system:'system',
				ageGroup:'Adult',
				systemList:[],
				libraryList:[],
			},
			systemList:[{name:t('libraryList.System'),value:'system',},{name:t('libraryList.Library'),value:'library',}],//系统
			mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//风格列表
			sexList:computed(()=>store.state.UserHabit.sex.value),//风格列表
			ageGroupList:computed(()=>store.state.UserHabit.ageGroup),//风格列表
			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
			
		})
		watch(()=>detailData.selectObject,(newValue,oldValue)=>{
			detailData.mannequinData.sex = newValue.sex?newValue.sex:'Female'
			detailData.mannequinData.style = newValue.style?newValue.style:''
			detailData.mannequinData.ageGroup = newValue.ageGroup?newValue.ageGroup:''
		},{immediate:true})
		watch(()=>detailData.designTypeList.length,(newValue,oldValue)=>{
			detailData.designType = detailData.designTypeList[0]?.value?detailData.designTypeList[0]?.value:''
			getLibraryList()
		})
		const getDetailListData = reactive({
			total:0,
			pageSize:10,
			currentPage:1,
		})
		const init = ()=>{
			detailData.designType = detailData.designTypeList[0]?.value?detailData.designTypeList[0]?.value:''
			getLibraryList()
		}
		const selectImgItem = (file:any)=>{
			let data = JSON.parse(JSON.stringify(file))
			data.type = detailData.mannequinData.system == 'system'?'System':'Library'
			emit('selectImgItem',data)
		}
		const getLibraryList = ()=>{
           if(props.type == 'models'){
				getModelList()
		   }else{
				getList()
			}
        } 
		const getModelList = ()=>{
			detailData.isShowLoading = true
			let value = {
				sex:detailData.mannequinData.sex,
				style:detailData.mannequinData?.style,
				ageGroup:store.state.Workspace.probjects.ageGroup,
			}
			Https.axiosGet(Https.httpUrls.getMannequins,{params:value}).then((rv: any) => {
				if (rv) {
					rv.forEach((item:any) => {
						if(item.type == 'System'){
							detailData.mannequinData.systemList = item.modelList
						}else{
							detailData.mannequinData.libraryList = item.modelList
						}
					});
					setMannequinList()
				}
                detailData.isShowLoading = false
			}).catch((res)=>{
                detailData.isShowLoading = false
            });
		}
		const setMannequinList = ()=>{
			if(detailData.mannequinData.system == 'system'){
				detailData.libraryList = detailData.mannequinData.systemList
			}else{
				detailData.libraryList = detailData.mannequinData.libraryList
			}
		}
		const getList = ()=>{
			detailData.isShowLoading = true
			let level2Type = ''
			let workspace = store.state.Workspace.probjects
            let data = {
                level1Type:props.level1Type,
                // level2Type:'Pattern',
                level2Type:detailData.designType,
				modelSex:workspace?.sex,
                page:getDetailListData.currentPage,
                pictureName:detailData.searchPictureName,
                size:getDetailListData.pageSize+detailData.libraryList.length,
            }
            Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
                (rv) => {
					rv.content.forEach((vItem:any)=>{
						if(props.catecoryList){
							props.catecoryList.forEach((item:any) => {
								if(item.value == vItem.level2Type){
									vItem.categoryValue = item.value
									vItem.category = item.name
								}
							});
						}
						
					})
					detailData.libraryList = rv.content
                    detailData.isShowLoading = false
                    getDetailListData.total = rv.total
                }
            ).catch((res)=>{
                detailData.isShowLoading = false
            });
		}
		const handleChange = ()=>{
			getDetailListData.currentPage = 1
			detailData.libraryList = []
            getLibraryList()
		}
		onMounted(()=>{
		})
        return{
			...toRefs(detailData),
			...toRefs(getDetailListData),
			init,
			selectImgItem,
			getLibraryList,
			handleChange,
        }
    },
	directives:{
		observe:{
			mounted (el,binding) {
				// console.log(binding.instance);
				let callback = (entries:any, observer:any)=> {
					entries.forEach((entry:any) => {
						if (entry.isIntersecting && !this_.isShowLoading) {
							this_.getLibraryList()
						} else {
						}
					});
				}
				const ob = new IntersectionObserver(callback,{
					root:null,
					threshold:[.5]
				})
				ob.observe(el)
				// this.currentPage = +=1
				// this.pageSize = 12
				// currentPage
				let this_:any = binding.instance
				
			},
		},
	},
	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .libraryList{
		height: 100%;
		display: flex;
		flex-direction: column;
		> .generalModel_state{
			width: 100%;
			display: flex;
			justify-content: space-between;
			> .generalModel_state_item{
				width: 100%;
				margin: 0;
				position: relative;
				> .search_icon_block{
					// position: absolute;
					// right: 5px;
					width: calc(6rem - 4px);
					height: calc(6rem - 4px);
					color: #fff;
					background: #000;
					border-radius: 50%;
					display: flex;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
				}
				> .search_input{
					font-size: 1.4rem;
				}
			}
			> .generalModel_state_item:last-child{
				// margin-top: 2rem;
			}
		}
		> .libraryList_box{
			width: 100%;
			flex: 1;
			overflow-y: auto;
			display: flex;
			flex-wrap: wrap;
			margin-top: 1rem;
			justify-content: space-between;
			align-content: flex-start;
			padding-bottom: 2rem;
			// &::-webkit-scrollbar{display: none;}
			> .content_img_item{
				width: calc((50% - 1rem));
				> .content_img_item_block{
					aspect-ratio: 1/1;
					position: relative;
					margin-bottom: 2rem;
					cursor: pointer;
					> img{
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
			}
			> .material_content_list_loding{
				width: 100%;
				aspect-ratio: 1/1;
				height: 4rem;
				overflow: hidden;
				> img{
					width: 100%;
					height: 100%;
					object-fit: contain;
				}
			}
		}
	}
</style>