<template>
    <div class="libraryList">
		<div class="generalModel_state" v-if="type != 'element'">
			<div class="generalModel_state_item" style="width: 40%;">
				<a-select
					v-model:value="designType"
					:options="designTypeList"
					@change="handleChange"
					style="width:100%"
					size="large"
					:fieldNames="{ label: 'name', value: 'value' }"
				>
					<template #suffixIcon
						><span
							class="icon iconfont icon-xiala"
							style="color: #343579"
						></span
					></template>
				</a-select>
			</div>
			<div class="generalModel_state_item" style="width: 35%;">
				<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;">
				<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 v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
					<sketchCategory :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} from 'vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
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 detailData = reactive({
			isShowLoading:false,//懒加载，加载中
			libraryList:[],
			designTypeList:[] as any,
			designType:'',
			searchPictureName:'',
			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
		})
		const getDetailListData = reactive({
			total:0,
			pageSize:10,
			currentPage:1,
		})
		const init = ()=>{
			console.log(123)
			detailData.designTypeList = props.catecoryList
			detailData.designType = detailData.designTypeList[0].value
			getLibraryList()
		}
		const hasDuplicateId = (id:any)=>{
			let arr = detailData.designDetail.clothes
			for (let i = 0; i < arr.length; i++) {
				if (arr[i].id === id) {
				return true;
				}
			}
			return false;
		}
		const selectImgItem = (file:any)=>{
			let randomNum = Math.floor(100 + Math.random() * 900);
			let type = props.type
			// let type = store.state.DesignDetailCopy.currentDetailType
			let id = file.id
			if(type == 'sketch'){
				id = Number(file.id + (randomNum + ''))
				if(props.randomId){
					if(hasDuplicateId(id)){
						selectImgItem(file)
						return
					}
				}
			}
			let data = JSON.parse(JSON.stringify(file))
			data.id = id
			emit('selectImgItem',data)
			// store.commit('DesignDetailCopy/setNewDetail',data)
		}
		const getLibraryList = ()=>{
            detailData.isShowLoading = true
			let level2Type = ''
			let workspace = store.state.Workspace.probjects
			// let type = store.state.DesignDetailCopy.currentDetailType
            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(()=>{
			// getLibraryList()
		})
        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;
				}
			}
			> .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;
			&::-webkit-scrollbar{display: none;}
			> .content_img_item{
				> .content_img_item_block{
					width: calc((34rem - 2rem) / 2);
					height: calc((34rem - 2rem) / 2);
					position: relative;
					margin-bottom: 2rem;
					cursor: pointer;
					> img{
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
			}
			> .material_content_list_loding{
				width: 100%;
				height: calc((34rem - 2rem) / 2);
				overflow: hidden;
			}
		}
	}
</style>