<template>
	<div class="Falls">
		<div class="falls_item" v-fadeIn="isScroll" v-for="item in list" :key="item.id"
			:style="{
				width: item.style.width + 'px',
				height: item.style.height + 'px',
				top: item.style.top + 'px',
				left: item.style.left + 'px',
			}"
		>
			<!-- 图片 -->
			<div class="falls_item_img">
				<img
					v-lazy="item.canvasUrl"
					@click="setItemDetail(item)"
					:style="{
						height: item.style.imgHeihgt + 'px',
					}"
				/>	
				<div v-if="item.original == 1" class="falls_item_user_Original">{{$t('newScaleImage.Original')}}</div>
			</div>
			
			<!-- 文字 -->
			<div class="falls_item_bottom" v-if="isText">
				<div class="falls_item_text" :title="item.text">
					{{item.text}}
				</div>
				<div class="falls_item_content">
					<div class="falls_item_user">
						<!-- <img src="http://121.40.53.210:3000/falls/5.png" alt=""> -->
						<div class="falls_item_user_detail">
							<span>@{{ item.userName }}</span>
							<div :title="item.portfolioName">{{item.portfolioName}}</div>
							<!-- <span :title="item.portfolioDes">{{item.portfolioDes}}</span> -->
						</div>
					</div>
					<div class="falls_item_detail">
						<!-- <div>
							<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
								<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
							</svg>
							<span>{{item.viewNums}}</span>
						</div> -->
						<label @click="portfolioLike(item)">
							<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i>
							<i v-else class="fi fi-rr-social-network"></i>
							<span>{{item.likeNum}}</span>
						</label>
						<div>
							<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
								<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
								<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
							</svg> -->
							<i class="fi fi-sr-eye"></i>
							<span>{{item.viewNums}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { defineComponent,h ,toRefs,ref,reactive,onMounted,onBeforeDestroy,nextTick,provide,computed} from 'vue'
import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
	props:{
		isScroll:{
			 type:Boolean,
			 default:true,
		 },
		 isText:{
			 type:Boolean,
			 default:true,
		 },
		 itemWidth:{
			 type:Number,
			 default:300,
		 }
	},
	setup(){
		let list = ref([])
		let wait_list = ref([])
		let width = ref(300)
		let num_x = ref(1)
		let gap_x = ref(0)
		let gap_y = ref(0)
		let poss = ref([])
		let loading = ref(false)
		let computedHeight = 0
		let imgDom = ref()
		return{
		    list,
			wait_list,
			width,
			num_x,
			gap_x,
			gap_y,
			poss,
			loading,
			computedHeight,
			imgDom,
		}
	},
	directives:{
		fadeIn:{
			mounted (el,binding) {
				let dom
				if(binding.value){
					dom = document.querySelector('.works_page .page_content')
				}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, // 开启标注功能
					scrub: 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')
					// 	}
					// }
				});
			}
		},
	},
		mounted () {
			this.resize()
			window.addEventListener("resize", this.resize);
			let domFalls = document.querySelector('.Falls')
			let domCss = getComputedStyle(domFalls);
			const paddingBottom = domCss.getPropertyValue('--paddingBottom').split('px')[0]*1;
			const textMarginTop = domCss.getPropertyValue('--textMarginTop').split('px')[0]*1;
			const textHeight = domCss.getPropertyValue('--textHeight').split('px')[0]*1;
			const contentHeight = domCss.getPropertyValue('--contentHeight').split('px')[0]*1;
			if(this.$props.isText){
				this.computedHeight = paddingBottom + textMarginTop + textHeight + contentHeight;
			}
		},
		beforeDestroy () {
			this.wait_list = []
			window.removeEventListener("resize", this.resize);
		},
		// 挂载方法
		methods: {
			clearData(){
				this.wait_list = []
				this.width = this.itemWidth
				this.num_x = 1
				this.gap_x = 0
				this.gap_y = 0
				this.poss = []
				this.loading = false
				this.list = []
				this.resize()
				if(this.imgDom){
					this.imgDom.remove();
					this.imgDom = null
				}
			},
			push(arr) {
				this.wait_list = this.wait_list.concat(arr);
				if (!this.loading) {
					this.loading = true;
					this.loadImg();
				}
			},
			deleteItem(id){
				for (let index = 0; index < this.list.length; index++) {
					if(this.list[index].id == id){
						this.list.splice(index,1)
						this.resize()
						break;
					}
				}
			},
			loadImg() {
				if (this.wait_list.length <= 0) {
					this.loading = false;
					this.$emit("loadend");
					return;
				}
				
				let url = this.wait_list[0].canvasUrl || this.wait_list[0].url;
				let data = this.wait_list[0]
				this.imgDom = document.createElement("img");
				this.imgDom.src = url;
				this.imgDom.style.width = this.itemWidth + "px";
				this.imgDom.style.maxHeight = this.itemWidth+330 + "px";
				this.imgDom.style.position = "absolute";
				this.imgDom.style.top = "-99999px";
				document.body.appendChild(this.imgDom);
				this.imgDom.addEventListener("load", () => {
					if(!this.imgDom) return
					var idx = 0;
					var pos_num = this.poss[idx];
					for (var i = 1; i < this.poss.length; i++) {
						if (pos_num > this.poss[i]) {
							idx = i;
							pos_num = this.poss[i];
						}
					}
					// this.computedHeight = 0
					let width = this.imgDom.offsetWidth;
					let height = this.imgDom.offsetHeight+this.computedHeight;
					let top = this.poss[idx] + this.gap_y;
					let left = (idx + 1) * this.gap_x + idx * width;
					let imgHeight = height - this.computedHeight
					this.poss[idx] = top + height;
					let obj = {
						canvasUrl:url,
						style: { width, height, top, left, imgHeight },
						...data
					};
					this.list.push(obj);
					this.imgDom.remove();
					this.imgDom = null
					this.wait_list.splice(0, 1);
					this.$el.style.height =
						Math.max(...this.poss) + this.gap_y + "px";
					if (this.wait_list.length <= 0) {
						this.loading = false;
						this.$emit("loadend");
					} else {
						this.loadImg();
					}
				});
			},
			resize() {
				nextTick(() => {
					var t_width = this.$el.offsetWidth;
					var width = this.itemWidth;
					var num_x = parseInt(t_width / (width + 20));
					if (num_x < 1) num_x = 1;
					var remain = t_width - width * num_x;
					var gap_x = remain / (num_x + 1);
					this.gap_x = gap_x;
					this.gap_y = gap_x > 30 ? 30 : gap_x < 30 ? 20 : gap_x;
					this.num_x = num_x;
					var poss = [];
					for (var i = 0; i < num_x; i++) poss.push(0);
					this.poss = poss;
					this.reset();
				})
				
			},
			reset() {
				for (let i = 0; i < this.list.length; i++) {
					let width = this.list[i].style.width;
					let height = this.list[i].style.height;
					var idx = 0;
					var pos_num = this.poss[idx];
					for (var j = 1; j < this.poss.length; j++) {
						if (pos_num > this.poss[j]) {
							idx = j;
							pos_num = this.poss[j];
						}
					}
					let top = this.poss[idx] + this.gap_y;
					let left = (idx + 1) * this.gap_x + idx * width;
					this.poss[idx] = top + height;
					this.list[i].style = { width, height, top, left };
				}
				this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
			},
			setItemDetail(data){
				this.$emit('getImgScale',data)
			},
			portfolioLike(data){
				this.$emit('setPortfolioLike',data)
			}
		},
})
</script>

<style lang='less' scoped>
	.Falls {
		width: 100%;
		height: auto;
		position: relative;
		--paddingBottom:10px;
		--textMarginTop:10px;
		--textHeight:25px;
		--contentHeight:35px;
		.falls_item{
			position: absolute;
			transition: all 0.15s;
			display: flex;
			flex-direction: column;
			background: #fff;
			border-radius: 2rem;
			overflow: hidden;
			padding-bottom: var(--paddingBottom);
			&.falls_item:hover{
				.falls_item_img{
					img{
						transform: scale(1.1);
					}
				}
			}
			.falls_item_img{
				cursor: pointer;
				width: 100%;
				overflow: hidden;
				img{
					width: 100%;
					object-fit: cover;
					height: 100%;
					transition: all .3s;
				}
				.falls_item_user_Original{
					font-weight: 600;
					font-size: 12px;
					color: #39215b;
					background: #c9a2ff;
					padding: 0 5px;
					border-radius: 4px;
					margin-right: 2px;
					position: absolute;
					top: 10px;
					right: 10px;
					left: auto;
				}
			}
			.falls_item_bottom{
				padding: 0 10px;
				.falls_item_text{
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-weight: 600;
					font-size: 18px;
					margin-top: var(--textMarginTop);
					height: var(--textHeight);
				}
				.falls_item_content{
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #525252;
					height: var(--contentHeight);
					.falls_item_user{
						width: 50%;
						display: flex;
						align-items: center;
						flex: 1;
						overflow: hidden;
						img{
							width: 25px;
							height: 25px;
							border-radius: 50%;
							margin-right: 10px;
						}
						.falls_item_user_detail{
							line-height: 1;
							width: 60%;
							width: 100%;
							color: #000;
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							
							>div{
								width: 100%;
								font-size: 16px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							span{
								font-size: 12px;
								color: #525252;
							}
						}
					}
					.falls_item_detail{
						display: flex;
						// width: 40%;
						// width: 20%;
						// width: 7rem;
						// width: 70px;
						width: auto;
						justify-content: space-between;
						>label:nth-child(1){
							margin-right: 2rem;
						}
						>label{
							// cursor: pointer;
						}
						>label,>div{
							display: flex;
							align-items: center;
							i{
								// font-size: 1.8rem;
								font-size: 12px;
							}
							svg,i{
								color: #9e9ea7;
								display: flex;
								// width: 10px;
								// height: 10px;
								margin-right: 5px;
							}
							span{
								margin-left: 3px;
								font-size: 12px;
							}
						}
					}
				}
			}
			

		}
	}
</style>