<template>
    <div class="v-m-date-picker-item" >
        <div class="v-m-date-picker-container" :style="{'transition':'0.2s transform','transform':'translate(0px,'+distance+'px)','height':height+'px'}" >

            <!--滚动区域-->
            <div :class="['v-m-date-picker-element',selectedValue==pickerItem?'v-m-date-picker-selected':'']" 
                v-for="(pickerItem,pickerIndex) in datelist"
                :eleIndex="pickerIndex" 
                :key="pickerIndex" 
                :style="{'height':itemHeight+'px','line-height':itemHeight+'px'}" >
                {{pickerItem}}
            </div>

        </div>

        <!--选中区域-->
        <div class="v-m-date-picker-highlight" :style="{'height':itemHeight+'px','margin-top':-(itemHeight/2)+'px'}" ></div>

    </div>
</template>
<script>
export default {
    name:'dateRing',
    props:{
        //日期列表值
        datelist:{
            type:Array,
            default:[]
        },
        //可视区域展示的行数
        showCount:{
            type:Number,
            default:5
        },
        //每一行的行高
        itemHeight:{
            type:Number,
            default:36
        },
        //默认选中的日期值
        value:{
            type:Number,
            default:null
        },
        //日期类型(0:年,1:月,2:日)
        dateType:{
            type:Number,
            default:0
        }
    },
    data(){

        return{
            isMoveing:false,//是否正在移动
            position:{
                y:0//y轴方向坐标
            },
            distance:0,//位移量
            innerValue:null,//选中的日期值
            isPc:true,//当前执行环境
            selectedIndex:0//选中的项的索引
        };

    },
    computed:{
        //可视区域的高度
        height(){

            return this.showCount * this.itemHeight;

        },
        //当前选中的值
        selectedValue(){

            return this.innerValue;

        }
    },
    methods:{
        //触摸屏幕开始事件
        start(e){

            if(!this.isMoveing){

                if(this.isPc){

                    this.position.y=e.clientY;//开始触摸屏幕时的y轴坐标

                }
                else{

                    let toutch=e.targetTouches[0];
                    this.position.y=toutch.pageY;//开始触摸屏幕时的y轴坐标

                }
                

            }

            this.isMoveing=true;

            e.preventDefault();

        },
        //触摸屏幕并滑动事件
        move(e){

            if(!this.isMoveing){

                return false;

            }

            let point={pageY:0};

            if(this.isPc){
                
                point.pageY=e.clientY;

            }
            else
            {
                //当屏幕有多个touch或者页面被缩放过，就不执行move操作
                if(e.targetTouches.length>1 || e.sacle && e.sacle!==1){

                    return false;

                }

                let toutch=e.targetTouches[0];
                point.pageY=toutch.pageY;

            }

            

            
            let endPostion={y:point.pageY-this.position.y};//位移量
            let middleNumber=parseInt(this.showCount/2);//可视区域的小于可视元素个数中间值的最大数
            let scrollViewHight=(this.datelist.length-this.showCount+middleNumber)*this.itemHeight;//可滚动的最大高度
            let nextDistance=this.distance+endPostion.y;//位移预判

            //向下滑动
            if(point.pageY>this.position.y){

                if(nextDistance<this.itemHeight*middleNumber){


                    this.distance+=endPostion.y;


                }
                else{

                    this.distance=this.itemHeight*middleNumber;

                }

                this.position.y=point.pageY;

                

            }

            //向上滑动
            if(point.pageY<this.position.y){

                if(nextDistance>-scrollViewHight){

                    this.distance+=endPostion.y;

                }
                else{

                    this.distance=-scrollViewHight;

                }

                this.position.y=point.pageY;

            }

            e.preventDefault();

            

        },
        //停止触摸屏幕事件
        end(e){

            if(this.isMoveing){
                
                this.isMoveing=false;
                this.moveAdjustment();//滑动调整
                this.getSelectedValue();//获取选中的值

            }

        },
        //注册事件
        registerEvents(){

            if(this.isPc){

                this.$el.addEventListener('mousedown',this.start);//注册触摸屏幕开始事件
                document.addEventListener('mouseup',this.end);//注册停止触摸屏幕事件
                this.$el.addEventListener('mousemove',this.move);//注册触摸屏幕并移动事件

            }
            else{

                this.$el.addEventListener('touchstart',this.start);//注册触摸屏幕开始事件
                this.$el.addEventListener('touchend',this.end);//注册停止触摸屏幕事件
                document.addEventListener('touchend',this.end);//注册停止触摸屏幕事件
                this.$el.addEventListener('touchmove',this.move);//注册触摸屏幕并移动事件

            }
            

        },
        //获取选中的日期值
        getSelectedValue(){

            let count=Math.abs(this.distance/this.itemHeight);//位移的行数
            let startIndex=parseInt(this.showCount/2);//默认选中的值的索引
            let index;//选中的日期的索引值

            if(this.distance>0){

                index=count>0?startIndex-count:0;

            }
            else{

                index=count>0?startIndex+count:startIndex;

            } 

            this.innerValue=this.datelist[index];

            this.selectedIndex=index;
            this.rotatexAngle();

            this.$emit('date-change',this.innerValue);

        },
        //滑动调整
        moveAdjustment(){

            let count=Math.abs(parseInt(this.distance/this.itemHeight));//位移的行数
            let mod=Math.abs(this.distance%this.itemHeight);//取位移的余数,判断是否大于行高的一半,然后再进行位移微调整
            
            if(mod>=(this.itemHeight/2)){

                count++;

            }

            //向下移动时,有一部分位移是正数
            if(this.distance>0){

                this.distance=(count*this.itemHeight);

            }
            else{
             
                this.distance=-(count*this.itemHeight);

            }

        },
        //设置选中的值
        setSelectedValue(value){

            let defaultValue=value? Number(value):this.datelist[0];

            let index=this.datelist.indexOf(defaultValue);
            let middleNumber=parseInt(this.showCount/2);//可视区域的小于可视元素个数中间值的最大数
            if(index<middleNumber){

                this.distance=(middleNumber-index)*this.itemHeight;

            }
            else{

                this.distance=-(index-middleNumber)*this.itemHeight;

            }


            this.innerValue=defaultValue;//设置默认选中的值
            this.selectedIndex=index;
            this.$emit('date-change',this.innerValue);

            this.rotatexAngle();

        },
        //判断当前执行的环境
        checkEnvironment(){

            var userAgentInfo = navigator.userAgent;
            var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
            var flag = true;
            for (var v = 0; v < Agents.length; v++) {

                if(userAgentInfo.indexOf(Agents[v]) > 0)
                {
                    flag = false;
                    break;
                }

            }  
            
            this.isPc=flag;

        },
        //x轴翻转角度
        rotatexAngle(){

            let rotateIndexs=[];
            let middleValue=parseInt(this.showCount/2);
            let startIndex=this.selectedIndex-middleValue;
            startIndex=startIndex<0?0:startIndex;
            let endIndex=this.selectedIndex+middleValue;
            let rotateValue=60/middleValue;

            for(let eleIndex=startIndex;eleIndex<=endIndex;eleIndex++){

                let viewEle= this.$el.querySelector(`div[eleIndex="${eleIndex}"]`);
                let count=Math.abs(this.selectedIndex-eleIndex);

                if(viewEle){

                    if(eleIndex!=this.selectedIndex){

                        viewEle.style.transform=`rotateX(${count*rotateValue}deg)`;
                        viewEle.style.opacity=`${0.9/count}`;

                    }
                    else{

                        viewEle.style.transform=`rotateX(0deg)`;
                        viewEle.style.opacity=`1`;

                    }
                    

                }

            }

        }
    },
    mounted(){

        this.checkEnvironment();//检测当前运行环境
        this.registerEvents();//注册事件
        this.setSelectedValue(this.value);//设置默认值

    },
    destroyed(){

        if(this.isPc){

            document.removeEventListener('mouseup',this.end);//卸载停止鼠标松开事件

        }
        else
        {

            document.removeEventListener('touchend',this.end);//卸载停止触摸屏幕事件

        }

    },
    watch:{

        datelist(){

            let maxDay=this.datelist[this.datelist.length-1];
            if(this.datelist.indexOf(this.innerValue)==-1){
                this.innerValue=maxDay;
            }

            this.setSelectedValue(this.innerValue);
            this.$emit('date-change',this.innerValue);

        }

    }
}
</script>

