<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <!-- 状态栏 -->
  <view class="Mall4j component-status-bar">
    <scroll-view
      scroll-x="true"
      class="status"
      :scroll-left="statusBarScrollLeft"
      scroll-with-animation
    >
      <view
        v-for="(item, index) in statusList"
        :key="index"
        class="status-item"
        :class="{active: currentSelectedIndex === index}"
        @tap="switchStatus(index)"
      >
        {{ item.label }}
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { onMounted, reactive } from 'vue'

const emit = defineEmits(['handleChangeSts'])

const props = defineProps({
  statusList: {
    type: Array,
    default: () => {
      return []
    }
  }
})

const Data = reactive({
  // 当前选择的状态的索引
  currentSelectedIndex: 0,
  // 状态栏横向滚动距离
  statusBarScrollLeft: 0,
  // 分类滚动的总宽度
  statusBarTotalWidth: 0
})

const { currentSelectedIndex, statusBarScrollLeft } = toRefs(Data)

onMounted(() => {
  getStatusBarTotalWidth()
})

/**
     * 获取状态栏 scroll-view 滚动相关宽度
     */
const getStatusBarTotalWidth = () => {
  nextTick(() => {
    const query = uni.createSelectorQuery()
    query.select('.status').boundingClientRect(data => {
      // scroll-view 的宽度
      Data.statusBarTotalWidth = data && data.width
    }).exec()
    query.selectAll('.status-item').boundingClientRect(data => {
      const dataLen = data.length
      for (let i = 0; i < dataLen; i++) {
        // scroll-view 各个分类项目的距离左边栏的距离
        // eslint-disable-next-line vue/no-mutating-props
        props.statusList[i].left = data[i].left
        // scroll-view 各个分类项目的宽度
        // eslint-disable-next-line vue/no-mutating-props
        props.statusList[i].width = data[i].width
      }
    }).exec()
  })
}

/**
     * 切换状态
     */
const switchStatus = (index) => {
  Data.currentSelectedIndex = index
  Data.statusBarScrollLeft = props.statusList[index].left - Data.statusBarTotalWidth / 2 + props.statusList[index].width / 2 - 24
  emit('handleChangeSts', props.statusList[index].sts)
}
</script>

<style lang="scss" scoped>
.component-status-bar {
  white-space: nowrap;
  border-radius: 0px 0px 10px 10px;
  .status {
    // 隐藏滚动条
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      background: transparent;
    }
    .status-item {
      display: inline-block;
      height: 40rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      text-align: center;
      color: #999;
      padding: 20rpx 30rpx 28rpx 30rpx;
    }
    .status-item.active {
      color: #000;
      font-weight: bold;
      position: relative;
      &::after {
        content: ' ';
        display: block;
        position: absolute;
        bottom: 20rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 32rpx;
        height: 4rpx;
        background: linear-gradient(270deg, #FFFFFF 0%, #082BA6 100%);
        border-radius: 180rpx;
      }
    }
    .status-item:first-child {
        padding-left: 0;
        &.active {
          &::after {
            content: ' ';
            left: calc(50% - 15rpx);
          }
        }
      }
  }
}
</style>
