<template>
  <view class="s-slider-container">
    <scroll-view scroll-y :style="{height: parentHeight + 'px', width: width + 'px'}">
      <view class="slider-wrap">
        <view
          @click="selectItem(index, item)"
          :style="[item.styles]"
          :class="item.classs"
          v-for="(item, index) in lists"
          :key="index"
        >
          <text :style="[item.lineStyle]" v-show="item.lineShow" :class="item.lineClass"></text>
          <text>{{ item[rangKey] ? item[rangKey] : item }}</text>
          <text class="dot">
            <s-badge :value="item.value" />
          </text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import props from './props.js'
export default {
  name: 's-slider-nav',
  mixins: [uni.$s.mpMixin, uni.$s.mixin, props],
  data() {
    return {
      parentHeight: 0, //父级元素的高度
    }
  },
  computed: {
    lists() {
      return this.list.map((item, index) => {
        if (typeof item == 'string') {
          item = {
            [this.rangKey]: item,
          }
        }
        return {
          ...item,
          styles: {
            borderRadius:
              index == this.activeIndex
                ? this.activeBorderRadius + 'px'
                : '0px',
            backgroundColor:
              index == this.activeIndex ? this.activeBgColor : this.bgColor,
            color:
              index == this.activeIndex ? this.activeTextColor : this.textColor,
          },

          lineShow: index == this.activeIndex,
          lineStyle: {
            backgroundColor: this.lineColor,
          },
          lineClass: [
            this.fllowTheme && this.$s.vx.state().swanTheme.color + '-theme-bg',
            'line',
          ],
          classs: [
            'slider-item',
            index == this.activeIndex && 'active',
            index == this.activeIndex &&
              this.fllowTheme &&
              this.$s.vx.state().swanTheme.color + '-theme-text-block',
          ],
        }
      })
    },
  },
  watch: {
    height() {
      this.parentHeight = this.height
      if (this.parentHeight > 0) return
      uni
        .createSelectorQuery()
        .in(this)
        .select('.s-slider-container')
        .boundingClientRect((data) => {
          this.parentHeight = data.height
        })
        .exec()
    },
  },
  mounted() {
    this.parentHeight = this.height
    if (this.parentHeight > 0) return
    uni
      .createSelectorQuery()
      .in(this)
      .select('.s-slider-container')
      .boundingClientRect((data) => {
        this.parentHeight = data.height
      })
      .exec()
  },
  methods: {
    selectItem(index, item) {
      if (item.disabled) return
      this.$emit('change', { index, value: item })
    },
  },
}
</script>

<style lang="scss" scoped>
.s-slider-container {
  height: 100%;
}
.slider-wrap {
  .slider-item {
    .line {
      position: absolute;
      left: 0;
      top: calc(50% - 20rpx);
      height: 40rpx;
      width: 6rpx;
    }
    padding: 32rpx 0;
    text-align: center;
    font-size: 28rpx;
    position: relative;
    .dot {
      position: absolute;
      right: 2rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>
