backend-Tv/components/unitv-zone/unitv-zone.vue

<template>
	<view :id="id">
		<slot></slot>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		name: "unitvPage",
		inject: ['pageId','pageState'],
		props: {
			id: {// Zone Id
				type: String,
				required: true
			},
			up: {// Zone切换时上一Zone Id
				type: String
			},
			down: {// Zone切换时下一Zone Id
				type: String
			},
			left: {// Zone切换时左一Zone Id
				type: String
			},
			right: {// Zone切换时右一Zone Id
				type: String
			},
			item: {// Zone当前焦点item索引
				type: Number,
				default: 0
			},
			prevZone: {// Zone改变后的上一个Zone Id
				type: String
			},
			row: {// Zone的item总行数
				type: Number,
				default: 1
			},
			column: {// Zone的item总列数
				type: Number,
				default: 1
			},
			defaultBehavior:{
				type: Boolean,
				default:true
			},
			autoFous:{
				type: Boolean,
				default:false
			},
			values:{
				 type: Array,
				 default: () => []
			},
			count:{
				type: Number,
				default:0
			}
		},
		provide() {
			return {
				zoneId: this.id,
				zoneState:this.zoneState,
				zoneItems:this.items
			}
		},
		created() {
			//console.log(this.pageId)
			if(this.autoFous){
				this.pageState.curZoneId=this.id;
				this.zoneState.curZone=true;
				this.focus=true;
				this.switchZone(this);
			}
			this._switchItem(this.item);
			this.currentPage.pushZone(this);
		},
		mounted(){
			
		},
		computed: {
			...mapState(['currentZone','currentPage']),
			size:function(){
				if(this.count!=0){
					return this.count;
				}else if(this.values.length!=0){
					return this.values.length;
				}else {
					return this.items.length;
				}
			},
			rows:function(){
				if(this.row>1){
					return this.row;
				}
				return Math.ceil(this.size/this.column)
			}
		},
		data() {
		return {
			citem:0,
			crow:0,// Zone的当前行
			prevItem:0,// item改变后的上一item索引
			focus:false,
			items:[],// Zone的所有item数组集合
			zoneState:{
				curItem:this.citem,
				curZone:this.focus,
				curScroll:null
			},
			StepSeq:0
		}},
		methods: {
			...mapMutations(['switchZone']),
			_switchItem:function(item,oldItem){
				this.citem=item;
				this.zoneState.curItem=item;
				try{
					this.refreshItem();
					if(oldItem!=undefined){
						this.items[oldItem].refreshState();
					}
				}catch(e){}
			},
			refreshItem:function(){
				this.items[this.citem].refreshState();
			},
			evtArrow:function(Arrow){
				var self=this;
				//this._switchItem(this.citem+1);
				var oldItem=this.citem || 0;
				 var item = this.citem || 0;
				var steps = this.rows * this.column;
				var Row = Math.floor(item/this.column);
				var Border = this[Arrow];
				var cRow = this.crow;
				switch(Arrow){
				        case 'left':
				            item -= 1;
				            if (Math.floor(item / this.column) != Row) {
				                item = item - steps;
				            }
				            break;
				        case 'right':
				            item += 1;
				            if (Math.floor(item / this.column) != Row) {
				                item = item + steps;
				            }
				            break;
				        case 'up':
				            item -= this.column;
				            this.crow = cRow - 1;
				            break;
				        case 'down':
				            item += this.column;
				            this.crow = cRow + 1;
				            break;
				    };
				
				    if(item >=0 && item <= steps-1){
				        if (item+this.StepSeq*steps+1 > this.size) {
				            item = this.size-this.StepSeq*steps-1;
				        }
				        this.citem = item;
				       // keyController.defaultChangeItem(CurrentPage,CurrentZone,CurrentPage,CurrentZone);
				        this._switchItem(this.citem,oldItem);
						if(this.crow===(this.rows-1)){
							this.$emit("scrolltolower");
						}
				    } else{
				        this.crow = cRow;
				        OverBorder();
				    };
				    function OverBorder(){
				        if(Border){
				            if(Border === self.id){
				                ScrollItem();
				            }else{
				                ChangeZone();
				            }
				        } ;
				        function ScrollItem(){
				            switch (Arrow){
				                case 'up':
				                    item = self.citem + self.column*(self.rows-1);
				                    self.crow = self.rows-1;
				                    break
				                case 'down':
				                    item = self.citem - self.column*(self.rows-1);
				                    self.crow = 0;
				                    break
				                case 'left':
				                    item = (Row+1)*self.column - 1;
				                    break
				                case 'right':
				                    item = Row*self.column;
				                    break
				            };
				            //当前焦点区域对应的数值的个数超过一屏的显示个数，产生翻页效果
				            if (self.size > steps) {
				                self.StepSeq = self.StepSeq || 0;
				                var MaxSeq = Math.ceil(self.size/steps)-1;
				                if ((Arrow === 'left') || (Arrow === 'up')){
				                    //左键或者上键，往前翻
				                   self.StepSeq = (self.StepSeq>0)?self.StepSeq-1:MaxSeq;
				                } else if ((Arrow === 'right') || (Arrow === 'down')) {
				                    //右键或者下键，往后翻
				                    self.StepSeq = (self.StepSeq<MaxSeq)?self.StepSeq+1:0;
				                };
				            };
				            //数值个数不够时，光标定位在第一个上面
				            if (item+self.StepSeq*steps+1 > self.size) {
				                item = 0;
				            }
				            self.citem = item;
				            //执行用户定义函数
				            self._switchItem(self.citem,oldItem);
				        };
				        function ChangeZone(){
							self.currentPage.ChangeZone(Border);
							self.refreshItem();
				        };
				
				    };
				
			},
			evtEnter:function(){
				var itemObj=this.items[this.citem];
				if(itemObj){
					itemObj.handleClick();
				}
			},
			evtDel:function(){
				var itemObj=this.items[this.citem];
				if(itemObj){
					itemObj.handleDel();
				}
			}
		},
		watch: {
			values:function(newVal,oldVal){
				//console.log(newVal);
			}
		}
	}
</script>

<style scoped>
</style>