<template>
	<view :id="id" :class="`${selected?selectClass:''} ${hovered?hoverClass:''}`">
	<slot></slot>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		name: "unitvPage",
		inject: ['pageId','zoneId','zoneState','zoneItems'],
		props: {
			item:{
				type:Number
			},
			hoverClass:{
				type:String,
				default:'item-hover'
			},
			selectClass:{
				type:String,
				default:'item-active'
			}
		},
		updated(){
			this.zoneItems[this.item]=this;
		},
		created() {
			// console.log(this.zoneId)
			this.zoneItems[this.item]=this;
		},
		mounted() {
			if(this.zoneState.curZone&&this.zoneState.curItem==this.item){
				this.handleHover();
				this.refreshScroll();
				this.refreshState();
			}
		},
		data() {
			return {
				selected:false,
				hovered:false
			}
		},
		computed:{
			...mapState(['currentZone','currentPage']),
			id:function(){
				return this.zoneId+'_'+this.item;
			}
		},
		methods: {
			clientRect(callback){
				let view = uni.createSelectorQuery().in(this).select("#"+this.id);
				view.boundingClientRect(data => {
				  callback(data);
				}).exec();
			},
			refreshScroll(){
				this.clientRect((clientRect)=>{
					this.currentPage.RefreshScrollTop(clientRect);
					if(this.zoneState.curScroll!=null){
						this.zoneState.curScroll.RefreshScrollLeft(clientRect);
					}
				});
			},
			refreshState(){
				if(!this.zoneState.curZone&&this.zoneState.curItem==this.item){
						this.selected=true;
					}else{
						this.selected=false;
					}
				if(this.zoneState.curZone&&this.zoneState.curItem==this.item){
					this.hovered=true;
				}else{
					this.hovered=false;
				}
			},
			handleHover(){
				this.$emit("hover",this.item);
			},
			handleClick(){
				this.$emit("click",this.item);
			},
			handleDel(){
				this.$emit("del",this.item);
			}
		},
		watch: {
			hovered:function(newValue){
				if(newValue!=""){
					this.handleHover();
					this.refreshScroll();
				}
			}
		}
	}
</script>

<style scoped>
</style>
