<template>
  <div>
    <div id="touchItem">
      <tab :line-width="2" bar-active-color="#FF1700" v-model="index" :custom-bar-width="getBarWidth">
        <tab-item :selected="demo2 === item" v-for="(item, index) in list2" @click.native="clickItem(index)" :key="index" :activeIndex="index">{{item}}</tab-item>
      </tab>
    </div>
    <swiper v-model="index" height="600px" :show-dots="false" @on-index-change="onIndexChange">
        <swiper-item v-for="(item, index) in list2" :key="index">
          <top-sale-list flag="true" itemId='1' :item="item">
            <div slot="condition">
              <ul>
                <li v-for="(con,index) in condition" :class="{active:conditionActive==index}" :key="index" @click="activeCondition(index)">{{con}}</li>
              </ul>
            </div>
          </top-sale-list>
        </swiper-item>
      </swiper>
  </div>
</template>
<script>
  import { Tab, TabItem, Sticky, Divider, XButton, Swiper, SwiperItem, Actionsheet } from 'vux'
  import { mapMutations } from 'vuex'
  import * as types from '../../stores/mutation-types'
  import TopSaleList from '../../containers/Product/TopSaleList'
  const productList = [
    {
      src: require('./images/img_item_l.png'),
      title: '九阳电饭煲4L智能家用电饭锅锅     ',
      price: '120,22',
      profit: '50',
      linkTo: '/product/detail',
      isActive: true,
      saler: '728',
      isSaleOut: false,
      isCrossBorder: false
    },
    {
      src: require('./images/img_item_l.png'),
      title: 'Type something(主标题)ffff',
      price: '120,22',
      profit: '50',
      linkTo: '/product/detail',
      isActive: true,
      saler: '728',
      isSaleOut: true,
      isCrossBorder: true
    },
    {
      src: require('./images/img_item_l.png'),
      title: 'Type something(主标题)ffff',
      price: '120,22',
      profit: '50',
      linkTo: '/product/detail',
      isActive: true,
      saler: '728',
      isSaleOut: false,
      isCrossBorder: false
    }
  ]
  
  export default {
    components: {
      Tab,
      TabItem,
      Sticky,
      Divider,
      XButton,
      Swiper,
      SwiperItem,
      Actionsheet,
      TopSaleList
    },
    created () {
      this.SET_TITLE('（类别／品牌）')
    },
    mounted () {
      // this.$http.get('/api/list-maker')
      // .then((response) => {
      //   // console.log(response.data)
      //   this.productList = response.data
      // })

      // 触屏事件
      // this.setTabWidth()
      // this.clickFirstItem()
      var len = this.list2.length
      document.querySelector('.vux-tab').style.width = 72 * len + 'px'
      // var middle = document.body.clientWidth / 2
      var touchItem = document.getElementById('touchItem')
      touchItem.addEventListener('touchstart', touch, false)
      touchItem.addEventListener('touchmove', touch, false)
      touchItem.addEventListener('touchend', touch, false)
      var touchStartX, touchStartY, touchEndX, touchEndY, timeStart, touchShiftX, touchShiftY
      // var scrollMax = 72 * (len - 5)
      function touch (event) {
        event = event || window.event
        var touch = event.targetTouches[0]
        switch (event.type) {
          case 'touchstart':
            touchStartX = touch.pageX
            touchStartY = touch.pageY
            timeStart = new Date()
            break
          case 'touchmove':
            touchEndX = touch.pageX
            touchEndY = touch.pageY
            touchShiftX = touchEndX - touchStartX
            touchShiftY = touchEndY - touchStartY
            if (touchShiftX < 0) {
              touchItem.scrollLeft += Math.abs(touchShiftX)
            } else {
              touchItem.scrollLeft -= touchShiftX
            }
            if (touchShiftY > 0) {
            }
            break
          case 'touchend':
            var timeEnd = new Date()
            var timeLast = timeEnd - timeStart
            var n = 0
            if (len - 5 > 5) {
              n = 5
            } else {
              n = len - 5
            }
            if (timeLast > 150) {
              if (touchShiftX < 0) {
                var lastLen = parseInt(document.getElementsByClassName('vux-tab-item')[len - 1].getAttribute('activeindex'))
                if (lastLen > 4) {
                  for (var i = 0; i < len; i++) {
                    var rightActive = parseInt(document.getElementsByClassName('vux-tab-item')[i].getAttribute('activeindex'))
                    document.getElementsByClassName('vux-tab-item')[i].setAttribute('activeindex', rightActive - n)
                  }
                }
              } else {
                var firstLen = parseInt(document.getElementsByClassName('vux-tab-item')[0].getAttribute('activeindex'))
                if (firstLen < 0) {
                  for (var j = 0; j < len; j++) {
                    var leftActive = parseInt(document.getElementsByClassName('vux-tab-item')[j].getAttribute('activeindex'))
                    document.getElementsByClassName('vux-tab-item')[j].setAttribute('activeindex', leftActive + n)
                  }
                }
              }
            }
            break
        }
      }
    },
    methods: {
      ...mapMutations([
        types.SET_TITLE
      ]),
      onItemClick (index) {
        // console.log('on item click:', index)
      },
      activeMenu (index) {
        this.menuList.active = index
      },
      addCart () {
        this.$vux.toast.show({
          text: '已加入购物车',
          width: '140px'
        })
      },
      addShop () {
        this.$vux.toast.show({
          text: '已加入店铺',
          width: '140px'
        })
      },
      shareInfo () {
        this.isShow = true
      },
      activeCondition: function (index) {
        this.conditionActive = index
      },
      clickItem (index) {
        this.demo2 = this.list2[index]
        var touchItem = document.getElementById('touchItem')
        var len = this.list2.length
        var iLen = len - 5 > 0 ? len - 5 : 0
        var activeindex = parseInt(document.getElementsByClassName('vux-tab-item')[index].getAttribute('activeindex'))
        var lastLen = parseInt(document.getElementsByClassName('vux-tab-item')[len - 1].getAttribute('activeindex'))
        var firstLen = parseInt(document.getElementsByClassName('vux-tab-item')[0].getAttribute('activeindex'))
        var rightLen = (len - iLen - 1)
        var leftLen = 0
        if (activeindex === rightLen) {
          if (activeindex < lastLen) {
            touchItem.scrollLeft += 72
            for (var i = 0; i < len; i++) {
              var rightActive = parseInt(document.getElementsByClassName('vux-tab-item')[i].getAttribute('activeindex'))
              document.getElementsByClassName('vux-tab-item')[i].setAttribute('activeindex', rightActive - 1)
            }
          }
        }
        if (activeindex === leftLen) {
          if (activeindex > firstLen) {
            touchItem.scrollLeft -= 72
            for (var j = 0; j < len; j++) {
              var leftActive = parseInt(document.getElementsByClassName('vux-tab-item')[j].getAttribute('activeindex'))
              document.getElementsByClassName('vux-tab-item')[j].setAttribute('activeindex', leftActive + 1)
            }
          }
        }
      },
      onIndexChange (index) {
        this.clickItem(index)
      }
    },
    data () {
      return {
        productList: productList,
        getBarWidth: function (index) {
          return 60 + 'px'
        },
        list2: ['精选', '数码家电', '保健品', '居家日用', '美妆个护', '时尚美妆'],
        index: 0,
        demo2: '精选',
        condition: ['默认', '返佣金额', '返佣比例'],
        conditionActive: 0
      }
    }
  }
</script>

<style sco>
  body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{
      margin:0;
      padding:0;
      outline: none;
      box-sizing: border-box;
  }
  body{
      font-size: 12px;
      font-family: "PingFangSC-Regular","Microsoft YaHei", "微软雅黑", "宋体", simsun;
      color: #666;
      background: #f5f5f5;
  }
  img{
      border: none;
  }
  li{
      list-style: none;
  }
  *:focus {
      outline: none!important;
      /*border:none;*/
  }
  input,select,textarea{
      outline: none;
      border:none;
  }
  textarea{
      resize: none;
  }
  a:link,a:visited{
      text-decoration: none;
      color: #000;
      outline: none;
  }
  a:hover,a:active{
      /*color: #1171c5;*/
      outline: none;
  }
  em,i{
      font-style: normal;
  }
  /*清除浮动*/
  .clearfix:after{
      content: "";
      display: block;
      clear: both;
  }
  .clearfix{
      zoom: 1;
  }
  .fl{
      float: left;
  }
  .fr{
      float: right;
  }
  /* 图标 */
  .rake-back-list{
    .vux-tab .vux-tab-item.vux-tab-selected{
      color:#FF1700;
    }
    .tab-menus{
      margin-bottom: 10px;
      overflow:hidden;
      background: #fff;
    }
    // padding-top: 47px;
    .vux-header-titl>span{
      font-family: PingFangSC-Medium;
      font-size: 18px;
      color: #333333;
    }
    .tab-middle{
      padding: 15px 0;
      background: #fff;
    }
    .tab-middle ul{
      width:242px;
      height: 32px;
      margin: 0  auto;
      border-radius: 4px;
    }
    .tab-middle ul li{
      float: left;
      border-top: 1px solid #CD996B;
      border-bottom: 1px solid #CD996B;
      border-left: 1px solid #CD996B;
      width: 80px;
      height: 100%;
      text-align: center;
      line-height: 30px;
      color: #CD996B;
    }
    .tab-middle ul li:first-child{
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    .tab-middle ul li:last-child{
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      border-right: 1px solid #CD996B;
    }
    .tab-middle ul li.active{
      background-image: linear-gradient(-224deg, #CE9A6C 0%, #FDD7BA 100%);
      color: #fff;
      // border:none;
    }
    .product-list-head{
      background: #FFFFFF;
      height:6.5%;
      width: 100%;
    }
    .product-list-menu{
      overflow: hidden;
      border-bottom: 1px solid #eee;
    }
    .product-list-menu li{
      float: left;
      height:100%;
      width: 33%;
      line-height:18px;
      text-align: center;
      padding:12px 0;
    }
    .product-list-menu li a:link,.product-list-menu li a:visited{
      font-size: 15px;
      color: #000000;
      line-height: 18px;
    }
    .product-list-menu li a:hover,.product-list-menu li a:active,.product-list-menu li a.active,{
      color: #108EE9;
    }
    .product-list-tab,.product-list-item{
      height: 16.5%;
    }
    .product-list-item li{
      // height: 100%;
      background: #fff;
      padding: 16px 0;
      overflow: hidden;
      position: relative;
      margin-bottom: 8px;
    }
    .tsl-item-left{
        width: 108px;
        height: 108px;
        margin-left: 15px;
        margin-right: 8px;
        position: relative;
    }
    .tsl-item-left img{
      max-width: 100%;
      max-height: 100%;
    }
    .tsl-item-left p{
      background: #9B9B9B;
      font-size: 14px;
      color: #FFFFFF;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 20px;
      line-height: 20px;
      width: 100%;
      text-align: center;
      max-width: 174px;
    }
    .tsl-item-right h3{
      font-size: 16px;
      font-weight: normal;
      line-height: 1.5em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tsl-item-right h3 a{
      color: #434343;
    }
    .tsl-item-right p{
      margin-top:4px;
    }
    .tsl-item-right p.item-bottom{
      overflow: hidden;
    }
    .tsl-item-right p.item-bottom span{
      font-size: 12px;
      color: #888888;
      margin-top: 5px;
    }
    .tsl-item-right p span.split{
      margin-left: 5px;
    }
    .tsl-item-right p em{
       font-size: 14px;
       color: #ff1700;
       margin-right: 10px;   
    }
    .tsl-cross-border{
       font-size: 12px;
       color: #FFFFFF;
       background: #BD10E0;
       width: 33px;
       text-align: center;
       height: 18px;
       line-height: 18px;
       display:inline-block;
       vertical-align: middle;
       margin-right: 2.7%;
       border-radius: 4px;
    }
    .icon-shop-cart{
      width: 21px;
      height: 21px;
      display: inline-block;
      position: relative;
      right: 4.5%;
      bottom: 15%; 
      background: url(images/icon_cart_black.png) no-repeat 0 0;
      background-size: cover;
    }
    .icon-shop-share{
      width: 21px;
      height: 21px;
      display: inline-block;
      position: relative;
      background: url(images/icon_share_black.png) no-repeat 0 0;
      background-size: cover;
      margin-right: 25px;
      margin-left: 25px;
    }
    .percent-2 li{
      width: 20% !important;
    }
    .tsl-for-product{
      font-size: 14px;
      color: #4A4A4A;
      border: 1px solid #979797;
      border-radius: 5px;
      display: inline-block;
      width: 75px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      vertical-align: top;
      margin-top:-4px;
      margin-right: 10px;
      margin-left: 15px;
    }
    .tsl-subtitle{
      font-size: 12px;
      color: #666666;
      line-height: 14px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .tsl-color{
      font-size: 14px;
      color: #B48963;
      line-height: 14px;
    }
    .tsl-share{
      background-image: linear-gradient(-135deg, #FE2913 0%,  #FF8479 100%);
      border-radius: 2px;
      min-width: 70px;
      height: 26px;
      display: inline-block;
      text-align: center;
      line-height: 26px;
      font-size: 13px;
      color: #FFFFFF;
    }
    .tsl-bottom{
      overflow: hidden;
      margin-top:15px !important;
    }
  }
</style>