<template>
<div class="mu-tab-button-cantainer">
  <slot name="slot"></slot>
  <div :class="['mu-tab-button',{'mu-tab-button-bg': hasBg}]">
       <mu-tab-button-item v-for="(item,index) in buttonList"
                :title="item.title"
                :key="item.id"
                :id="item.id"
                :isActive="item.isActive"
                :hasBg="hasBg"
                v-on:click-tab-item="changeAnimation(index)"
      ></mu-tab-button-item>
      <div :class="hasBg ? 'mu-tab-active': 'mu-tab-active-style'" ref="tabActive"></div>
  </div>
  <div class='item' id="tab-item" ref="tabItem"
    @touchstart='touchStart'
    @touchmove='touchMove'
    @touchend='touchEnd'>
    <slot name="panel"></slot>
  </div>
</div>
</template>
<script>
  import tabButtonItem from './tab-button-item';
  import tabPanel from './tab-button-item';

  var pageWidth = document.body.clientWidth;
  export default {
    name: 'mu-tab',
    components:{
      'mu-tab-button-item':tabButtonItem,
      'mu-tab-panel':tabPanel
    },
    props:{
    	'buttonList':{
    		type:Array,
        default:[]
      },
      'defaultIndex':{
        type: Number,
        default:0
      },
      hasBg:{
        type:Boolean,
        default: true
      },
      clickbutton:{
        type: Function
      },
      //是否开启手势滑动左右切换
      isSlide:{
        type: Boolean,
        default: true
      }

    },
    data(){
      return {
        isLeft: false,
        index:this.defaultIndex,
        tabPosition: this.defaultIndex * pageWidth,
        tabButtonPosition: this.defaultIndex * 90,
        disX:'',
        startX:'',
        moveX:'',
      }
    },
    create:function(){
      this.isLeft = true;
    },
    mounted:function(){
      var cantainerWidth = pageWidth * this.buttonList.length;
      this.$refs.tabItem.style.width = cantainerWidth +'px';
      var tabActiveStyle = this.$refs.tabActive.style;
      var tabItemStyle = this.$refs.tabItem.style;
      //默认进入时的页签页
      if(this.index){
        this.tabPosition = -pageWidth * this.index;
        tabItemStyle.webkitTransform = 'translateX('+ this.tabPosition +'px)';//兼容chrome版本35以下
        tabItemStyle.transform = 'translateX('+ this.tabPosition +'px)';
        //tabButton的动画
        this.tabButtonPosition = 90 * this.index;
        tabActiveStyle.webkitTransform = 'translateX('+ this.tabButtonPosition +'px)';
        tabActiveStyle.transform = 'translateX('+ this.tabButtonPosition +'px)';
      }
    },
    methods:{
      touchStart:function(ev){
        ev = ev || event;
        if(this.isSlide){
          //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
          if(ev.touches.length == 1){
              // 记录开始位置
              this.startX = ev.touches[0].clientX;
          }
        }
      },
      touchMove:function(ev){
        if(this.isSlide){
          ev = ev || event;
          this.disX = 0;
          if(ev.touches.length == 1) {
             // 滑动时距离浏览器左侧实时距离
             this.moveX = ev.touches[0].clientX
             //起始位置减去 实时的滑动的距离，得到手指实时偏移距离
             this.disX = this.startX - this.moveX;
             //切换到tab = 1
             if(Number(this.disX) > 150){
               this.changeAnimation(1);
             }
             //切换到tab=0
             if(Number(this.disX) < -150){
               this.changeAnimation(0);
             }
          }
        }
      },
      touchEnd: function(ev){
        ev = ev || event;

      },
      changeAnimation:function(id){
        var self = this;
        this.$emit('clickbutton',id);

        var moveStep = Math.abs(self.index - id)
        if(self.index > id){
          self.isLeft = true;
        }else if(self.index < id){
          self.isLeft = false;
        }

        self.index = id;
        self.buttonList.map(function(item){
          if(item.id ==id){
            item.isActive = true;
          }else{
            item.isActive = false;
          }
        });

        //tab切换时的动画
        var tabActiveStyle = this.$refs.tabActive.style;
        var tabItemStyle = this.$refs.tabItem.style;
        if(this.isLeft){
          //tab-panel的动画
          this.tabPosition = this.tabPosition + pageWidth * moveStep;
          tabItemStyle.webkitTransform = 'translateX('+ this.tabPosition +'px)';//兼容chrome版本35以下
          tabItemStyle.transform = 'translateX('+ this.tabPosition +'px)';
          tabItemStyle.transitionDuration = '250ms';
          //tabButton的动画
          this.tabButtonPosition = this.tabButtonPosition - 90 * moveStep;
          tabActiveStyle.webkitTransform = 'translateX('+ this.tabButtonPosition +'px)';
          tabActiveStyle.transform = 'translateX('+ this.tabButtonPosition +'px)';
          tabActiveStyle.transitionDuration = '250ms';
        }else{
          this.tabPosition = this.tabPosition - pageWidth * moveStep;
          tabItemStyle.webkitTransform = 'translateX('+ this.tabPosition +'px)';
          tabItemStyle.transform = 'translateX('+ this.tabPosition +'px)';
          tabItemStyle.transitionDuration = '250ms';

          this.tabButtonPosition = this.tabButtonPosition + 90 * moveStep;
          tabActiveStyle.webkitTransform = 'translateX('+ this.tabButtonPosition +'px)';
          tabActiveStyle.transform = 'translateX('+ this.tabButtonPosition +'px)';
          tabActiveStyle.transitionDuration = '250ms';
        }
        this.$emit('on-change', this.index);
      },
    }
  };
</script>
<style lang="less">
  .mu-tab-button-cantainer{
    /*display: flex;*/
    display: -webkit-box;
    justify-content: center;
    position: relative;
  }
  .mu-tab-button{
    background-color: rgba(0,0,0,0);
    color:#fff;
    border-radius:18px;
    line-height:30px;
    color:#bfc4c7;
    font-size:14px;
    height:30px;
    position: absolute;
    cursor: pointer;
  }
  .mu-tab-button-bg{
    background:#f3f4f5;
    color: #000;
    .mu-tab-active{
      background-image:linear-gradient(90deg, #1695f0 0%, rgba(49,199,249,0.80) 100%);
      width:90px;
      height:30px;
      border-radius:18px;
      position: absolute;
      top:0;
      left:0;
    }
  }
  .mu-tab-active-style{
    width: 48px;
    height: 2px;
    background: #ccc;
    position: absolute;
    left: 20px;
  }
  .item{
    margin-top: 50px;
    display: inline-table;
    position: relative;
    left: 0;
    .mu-tab-item{
      float: left;
    }
  }



</style>
