<template>
    <div class="events_page" :class="{active:isScroll}">
		<div class="modal_title_text modal_search">
			<div v-show="isScroll || userDetail.systemUser>-1" v-for="item in worksType" :key="item" class="gallery_btn white" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
				{{ item.name }}
			</div>
			<div v-show="!isScroll && userDetail.systemUser == -1" class="gallery_btn active">All</div>
		</div>
        <div class="page_content" >
			<div class="page_content_itemBox">
				<div class="page_content_item" v-for="item,index in eventsList" :key="eventsList[eventsList.length-1-index].id"  v-fadeIn="isScroll">
					<div class="page_content_item_img" @click="openEventsDetail(eventsList[eventsList.length-1-index])">
						<img :src="eventsList[eventsList.length-1-index].imgUrl" alt="">
					</div>
					<div class="page_content_item_time">{{ eventsList[eventsList.length-1-index].time }}</div>
					<div class="page_content_item_title" @click="openEventsDetail(eventsList[eventsList.length-1-index])">{{ eventsList[eventsList.length-1-index].title }}</div>
				</div>
			</div>
			<div class="page_loading_box" v-show="!isNoData">
				<span class="page_loading" v-show="!isShowMark"></span>
				<span v-show="isShowMark">
					<a-spin size="large" />
				</span>
			</div>
		</div>
    </div>
</template>
<script lang="ts">
import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,provide,computed} from 'vue'
// import HeaderComponent from "@/component/HomePage/Header.vue";
// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
import { Https } from "@/tool/https";
import { useI18n } from "vue-i18n";
import generalMenu from "@/component/HomePage/generalMenu.vue";
import { useStore } from "vuex";
import eventData from "@/assets/json/events.json";
import eventDataCn from "@/assets/json/events_cn.json";
import { useRouter } from 'vue-router'
import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
    components: {
		generalMenu,
    },
	props:{
		isScroll:{
			 type:Boolean,
			 default:true,
		 },
	},
    setup() {
		const router:any = useRouter()
        const store = useStore();
		let filter:any = reactive({
			worksSelect: 'all',
			worksType: [
				{
					name: useI18n().t('works.all'),
					value: 'all'
				},
				// {
				// 	name: useI18n().t('works.FavoriteWorks'),
				// 	value: 'favoriteWorks'
				// },
				// {
				// 	name: useI18n().t('works.MyWorks'),
				// 	value: 'myWorks'
				// },
			],
			eventsList:[],
			getListDate:{
				"getLikePortfolio": 0,
				"getMyPortfolio": 0,
				page:1,
				size:10,
			},
			isShowMark:false,
			isNoData:false,//如果数据为空就不加载
		})
		let userDetail = computed(()=>{
			return store.state.UserHabit.userDetail
		})
		let selectMenu:any = ref({
			label:'全部',
			value:'all',
		})
		let setWorksSelect = (val:any) => {
			// filter.worksSelect = val.value
			// filter.getListDate.getLikePortfolio = 0
			// filter.getListDate.getMyPortfolio = 0
			// if(val.value == 'all'){
			// }else if(val.value == 'favoriteWorks'){
			// 	filter.getListDate.getLikePortfolio = 1
			// }else if(val.value == 'myWorks'){
			// 	filter.getListDate.getMyPortfolio = 1
			// }
			// filter.getListDate.page = 0
			filter.isShowMark = false
			filter.isNoData = false
			// getPorfolio()
		}
		let likeFile = (item:any,type:string) => {
		}
		let getImgScale = (item:any)=>{
		}
		let getPorfolio = ()=>{
			let data = filter.getListDate
			if(filter.isShowMark && !filter.isNoData)return
			filter.isShowMark = true
			Https.axiosPost(Https.httpUrls.getPorfolio, data)
                .then((rv) => {
					if (rv.content.length > 0) {

					} else {
						filter.isNoData = true
					}
					filter.isShowMark = false
                })
                .catch((rv) => {
					filter.isShowMark = false
					filter.isNoData = true
				});
		}
		let {t} = useI18n()
		let openEventsDetail = (item:any)=>{
			let path = router.currentRoute._value.path.split('/')[1]
			router.push(`/${path}/eventsDetail?id=${item.id}`)
			// router.push(`${path}?id=${item.id}`)
		}
		onMounted (()=>{
			// filter.isShowMark = false
			// filter.isNoData = false
			// getPorfolio()
			// let worksPage:any = document.querySelector('.events_page')
			// let imgParent:any = document.querySelector('.events_page .page_loading')
			// new IntersectionObserver(
			// 	(entries, observer) => {
			// 		// 如果不是相交，则直接返回
			// 		if (!entries[0].intersectionRatio) return;
			// 		filter.getListDate.page += 1
			// 		getPorfolio()
			// 	},
			// ).observe(imgParent);
			const { t, locale } = useI18n();
			const currentLocale = locale.value;
			if(currentLocale == 'ENGLISH'){
				filter.eventsList = eventData.eventsList
			}else{
				filter.eventsList = eventDataCn.eventsList
			}
		})
        return {
			...toRefs(filter),
			userDetail,
			selectMenu,
			setWorksSelect,
			likeFile,
			getImgScale,
			t,
			openEventsDetail,
        }
    },
	directives:{
		fadeIn:{
			mounted (el,binding) {
				let dom
				if(binding.value){
					dom = document.querySelector('.events_page')
				}else{
					dom = document.querySelector('.homeRecommend_content_body')
				}
				gsap.registerPlugin(ScrollTrigger);
				let tl1 = gsap.timeline();
				tl1.from(el,1, {y:'30px',opacity:0},)
				ScrollTrigger.create({
					trigger: el, // 触发器元素
					start: "top 90%", // 滚动触发器的起始滚动位置
					end: '100% 80%',   // 滚动触发器的结束滚动位置
					// markers: true, // 开启标注功能
					animation:tl1,
					scroller:dom,//设置指定元素为滚动依据
					scrub:2,
					// onUpdate:(v)=>{
					// 	if(v.progress < 0.1){
					// 		v.trigger?.classList.remove('active')
					// 	}else{
					// 		v.trigger?.classList.add('active')
					// 		// v.trigger?.classList.add('active')
					// 	}
					// }
				});
			}
		},
	},
    async mounted(){
	
    },
})
</script>
<style lang="less">
.el-icon{
	font-size: 14px;
}
.events_page {
	border-radius: 4rem;
    width: 100%;
	// overflow: hidden;
    // height: 100%;
	height: auto;
	min-height: 100%;
	padding: 0 6rem;
	// min-width: 1440px;
	position: relative;
	padding-top: 5rem;
	display: flex;
    flex-direction: column;
	.modal_title_text{
		display: flex;
		margin: 0;
		padding-bottom: 2.4rem;
		.gallery_btn{
			margin-right: 1rem;
			min-width: 12rem;
		}
		.gallery_btn:last-child{
			margin-right: 0;
		}
		.modal_search_menu{
			margin-left: auto;
			z-index: 10;
			.generalMenu_printModel{
				margin-right: 0;
			}
		}
	}
    .page_content {
        position: relative;
		min-height: 80%;
		height: auto;
		background: #f7f8fa;
		width: 100%;
		flex: 1;
		@media (max-width: 768px) {
			background: #fff;
		}
		.page_content_itemBox{
			display: flex;
			flex-wrap: wrap;
			.page_content_item{
				max-width: 25%;
				padding: 2rem;
				@media (max-width: 768px) {
					max-width: 100%;
				}
				.page_content_item_img{
					width: 100%;
					aspect-ratio: 16 / 10;
					display: flex;
					align-items: center;
					cursor: pointer;
					img{
						width: 100%;
						object-fit: contain;
						border-radius: 2rem;
					}
				}
				.page_content_item_time{
					color: #5f5f5f;
				}
				.page_content_item_title{
					text-overflow: ellipsis; /* 显示省略号 */
					overflow: hidden; /* 溢出隐藏 */
					display: -webkit-box;
					-webkit-line-clamp: 2; /* 限制显示的行数 */
					-webkit-box-orient: vertical;
					font-weight: 800;
					color: #000000;
					cursor: pointer;
				}
				.page_content_item_title:hover{
					text-decoration: underline;
				}
			}
		}
		.page_loading_box{
			text-align: center;
			height: 50px;
			.page_loading{
				display: block;
				width: 50px;
				height: 50px;
			}
		}
    }
	
	&.active{
		display: flex;
		flex-direction: column;
		height: 100%;
		.page_content{
			overflow-y: auto;
			width: 100%;
			
		}
	}
	
}
</style>