<template>
  <view class="tabs">
    <view class="tabs-wrapper">
      <view
        class="tab-item"
        :class="{ active: currentStatus === 0 }"
        @tap="handleClick(0)"
      >
        待处理差评({{ commentNumber }})
      </view>
      <view
        class="tab-item"
        :class="{ active: currentStatus === 1 }"
        @tap="handleClick(1)"
      >
        全部评价
      </view>
      <view
        class="active-line"
        :style="'transform: translateX(' + currentStatus * 375 + 'rpx)'"
      ></view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, Ref } from 'vue'

/**
 * props
 */
interface NumberType {
  commentNumber: number
}
defineProps<NumberType>()

/**
 * emit
 */
const emit = defineEmits<{
  (e: 'switchTab', active: number): void
}>()

// tab高亮
const currentStatus: Ref<number> = ref(0)
function handleClick(index: number) {
  currentStatus.value = index
  emit('switchTab', index)
}
</script>

<style lang="scss" scoped>
.tabs {
  background-color: #fff;

  .tabs-wrapper {
    position: relative;
    width: 100%;
    height: 94rpx;

    .tab-item {
      display: inline-block;
      width: 375rpx;
      font-size: 36rpx;
      font-weight: 500;
      color: #333;
      text-align: center;
      line-height: 94rpx;
      position: relative;
      transition: all 0.3s;
    }

    .active-line {
      position: absolute;
      bottom: 0;
      width: 375rpx;
      height: 8rpx;
      background: $jx-primary;
      transition: all 0.3s;
    }

    .active {
      color: $jx-primary;
    }
  }
}
</style>