<template>
  <view class="filter-root">
    <view class="item" :class="{ active: filteActive == 0 }" @tap="fliterFn(0)"
      >未创建<text v-if="filteActive == 0">({{ totalCount }})</text></view
    >
    <view class="item" :class="{ active: filteActive == 1 }" @tap="fliterFn(1)"
      >已创建<text v-if="filteActive == 1">({{ totalCount }})</text></view
    >
  </view>
</template>
  
  <script lang="ts" setup >
import { ref } from 'vue'
import { jx_throttles } from '@/utils/tools'
import toast from '@/utils/toast'

interface propsType {
  totalCount: number
}
defineProps<propsType>()

/*************************************************
 * 参数2
 */

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

/*************************************************
 * 筛选2
 */
const filteActive = ref<number>(0)
function fliterFn(lable: number) {
  if (filteActive.value == lable) return
  filteActiveThrottles(lable)
}

const filteActiveThrottles = jx_throttles({
  time: 2500,
  success: (e: number) => {
    filteActive.value = e
    emit('updateTowFilter', e)
  },
  fail: () => {
    toast('老板要点慢点哦')
  },
})
</script>
  
  <style lang="scss" scoped>
.filter-root {
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  width: 100%;
  border-left: 1rpx solid rgb(223, 223, 223);
  height: 90rpx;
  background-color: #fff;
  box-shadow: 10rpx 0rpx 10rpx rgb(207, 207, 207);
  border-bottom: 1rpx solid rgb(224, 224, 224);
  padding: 0 10rpx;

  .item {
    flex: 1;
    height: 60rpx;
    border-radius: 10rpx;
    border: 2rpx solid $jx-primary;
    color: $jx-primary;
    padding: 0 10rpx;
    line-height: 60rpx;
    text-align: center;
    transition: all 0.2s;
    margin-left: 10rpx;
  }

  .item:nth-child(1) {
    margin: 0 !important;
  }

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