<template>
  <view>
    <slot>
      <view class="index-title">A</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">B</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">C</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">D</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">E</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">F</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">G</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">H</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">I</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">J</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">K</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">L</view>
      <view class="c">
        <view class="c">
          <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
          <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        </view>
      </view>
      <view class="index-title">M</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">N</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">O</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">P</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">Q</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">R</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">S</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">T</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">U</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">V</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">W</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">X</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">Y</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
      <view class="index-title">Z</view>
      <view class="c">
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
        <serchshaixuanitem carname="劲浪/Focal"></serchshaixuanitem>
      </view>
    </slot>
    <view @touchmove.stop="a" @touchstart.stop="b" class="i-index-fixed">
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">A</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">B</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">C</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">B</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">D</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">E</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">F</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">G</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">H</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">I</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">J</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">K</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">L</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">M</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">N</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">O</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">P</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">Q</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">R</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">S</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">T</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">U</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">V</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">W</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">X</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">Y</view>
      <view catchtap="handlerFixedTap" class="i-index-fixed-item">Z</view>
    </view>
  </view>
</template>

<script>
import searchShuru from "../../components/search/searchShuru";
import xzcxlistTitle from "../../components/xzcxlist/xzcxlist-title";
import xzcxlistIcon from "../../components/xzcxlist/xzcxlist-icon";
import xzcxlistIconList from "../../components/xzcxlist/xzcxlist-iconlist";
import xzcxlistCars from "../../components/xzcxlist/xzcxlist-cars";
import serchshaixuanitem from "../../components/serchshaixuan/serchshaixuanitem";
export default {
  name: "test",
  components: {
    searchShuru,
    xzcxlistTitle,
    xzcxlistIcon,
    xzcxlistIconList,
    xzcxlistCars,
    serchshaixuanitem
  },
  data() {
    return {
      dange: 0,
      height: "",
      top: "",
      dange: "",
      rect: []
    };
  },
  mounted: function() {
    this.huoqu();
  },
  methods: {
    a: function(a) {
      console.log(a);
      this.jisuan(a.touches[0].clientY - this.top);
    },
    b: function(a) {
      console.log(a);
      this.jisuan(a.touches[0].clientY - this.top);
    },
    huoqu() {
      var query = uni.createSelectorQuery().in(this);
      //选择id
      var that = this;
      query
        .select(".i-index-fixed")
        .boundingClientRect(rect => {
          console.log(rect, 1);
          if (rect == null) {
            this.$nextTick(() => {
              this.huoqu();
            });
          }

          var dan = Math.floor(rect.height / 26);
          console.log(dan, 123);

          (that.height = rect.height), console.log(that.height);
          (that.top = Math.floor(rect.top) - 6), (that.dange = dan);
        })
        .exec();
      query
        .selectAll(".index-title")
        .boundingClientRect(rect => {
          console.log(rect, 1);
          this.rect = rect;
        })
        .exec();
      // i-index-line
    },
    // c: function (a) {
    //   console.log(a);
    //   this.jisuan(a.target.offsetTop)
    // },

    jisuan: function(a) {
      var c = Math.floor(a / this.dange);
      console.log(c,1232333)
      // console.log(Math.floor(a / this.data.dange))
      var z = "";
      switch (c) {
        case 1:
          z = "A";
          break;
        case 2:
          z = "B";
          break;
        case 3:
          z = "C";
          break;
        case 4:
          z = "D";
          break;
        case 5:
          z = "E";
          break;
        case 6:
          z = "F";
          break;
        case 7:
          z = "G";
          break;
        case 8:
          z = "H";
          break;
        case 9:
          z = "I";
          break;
        case 10:
          z = "J";
          break;
        case 11:
          z = "K";
          break;
        case 12:
          z = "L";
          break;
        case 13:
          z = "M";
          break;
        case 14:
          z = "N";
          break;
        case 15:
          z = "O";
          break;
        case 16:
          z = "P";
          break;
        case 17:
          z = "Q";
          break;
        case 18:
          z = "R";
          break;
        case 19:
          z = "S";
          break;
        case 20:
          z = "T";
          break;
        case 21:
          z = "U";
          break;
        case 22:
          z = "V";
          break;
        case 23:
          z = "W";
          break;
        case 24:
          z = "X";
          break;
        case 25:
          z = "Y";
          break;
        case 26:
          z = "Z";
          break;
      }
      var that = this;

      uni.pageScrollTo({
        duration: 0,
        scrollTop: that.rect[c].top - 140
      });

      console.log(z);
      if (z) {
        wx.showToast({
          title: z,

          icon: "none",

          duration: 2000 //持续的时间
        });
      }
    }
  }
};
</script>

<style lang="scss">
.serch {
  position: relative;
  top: 17upx;
}
.i-index {
  width: 100%;
  height: 100%;
}

.i-index-line {
  width: 80%;
  height: 2rpx;
  background-color: #f7f7f7;
  float: right;
}

.i-index-content {
  background: #fff;
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0 20rpx;
}

.i-index-fixed {
  position: fixed;
  right: -5upx;
  top: 50%;
  z-index: 10;
  padding-left: 20rpx;
  transform: translateY(-50%);
}

.i-index-fixed-item {
  display: block;
  height: 36rpx;
  line-height: 36rpx;
  padding: 0 10rpx;
  text-align: center;
  color: #595959;
  font-size: 24rpx;
  border-radius: 50%;
}

.i-index-fixed-item-current {
  background: #2d8cf0;
  color: #fff;
}

.i-index-tooltip {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 48rpx;
  border-radius: 50%;
  width: 160rpx;
  height: 160rpx;
  line-height: 160rpx;
  text-align: center;
}

.local-position-content {
  height: 160rpx;
  padding-left: 40rpx;
  display: flex;
  align-items: center;
  color: #999;
  background: #fff;
  font-size: 24rpx;
}

.local-position-content span {
  font-size: 40rpx;
  font-weight: bold;
  color: #ff5344;
  margin-right: 8rpx;
}

.index-title {
  height: 70rpx;
  line-height: 70rpx;
  font-size: 26rpx;
  padding-left: 40rpx;
  color: #999;
  background: #f6f6f6;
  position: relative;
  top: 32upx;
}
.c {
  background: #fff;
  width: 100%;
  /* height: 140rpx; */
  font-size: 32rpx;
  /* padding-left: 40rpx; */
  position: relative;
  top: 44upx;
}
.c span {
  width: 100%;
  height: 70rpx;
  line-height: 70rpx;
}
.b {
  display: block;
}
.router-hover {
  opacity: 1;
}
</style>