<template>
  <view class="filter-root"
    :class="{'filter-fill':isCheckoutFilter}">
    <template v-if="isCheckoutFilter">
      <view
        class="item item-fill"
        :class="{ active: filteActive2 == item.lable }"
        v-for="(item, index) in filterData2"
        :key="index"
        @tap="fliterFn2(item.lable, item.status)"
        >{{ item.title }}</view
      >
    </template>
    <template v-else>
      <view
        class="item item-fill"
        :class="{ active: filteActive == item.lable }"
        v-for="(item, index) in filterData"
        :key="index"
        @tap="fliterFn(item, item.status)"
        >{{ item.title }}</view
      >
    </template>
  </view>
</template>

<script lang="ts" setup >
import { ref, watch } from 'vue'
import { jx_throttles } from '@/utils/tools'
import toast from '@/utils/toast'

interface propsType {
  isCheckoutFilter: boolean
  updateStateOk: boolean
}
const props = defineProps<propsType>()

/*************************************************
 * 参数1
 */
const filterData = ref<Array<AnyObject>>([
  {
    title: '全部',
    name:'all',
    lable: 2,
    status: -1,
  },
  {
    title: '可售',
    name:'status',
    lable: 1,
    status: 1,
  },
  {
    title: '不可售',
    name:'status',
    lable: 0,
    status: 0,
  },
  {
    title: '有库存',  //库存 1 全查~ 2 有~ 3 无~
    name:'stock',
    lable:4,
    status: 2,
  },
  {
    title: '无库存',
    name:'stock',
    lable:5,
    status: 3,
  },
  // {
  //   title: '有货架码',
  //   name:'locationCode',
  //   lable:6,
  //   status:false   // 实际上是全部查，感觉没用
  // },
  {
    title: '无货架码',
    name:'locationCode',
    lable:7,
    status:true
  },
  {
    title: '批量',
    name:'',
    lable: 3,
    status: -1,
  },
])

/*************************************************
 * 参数2
 */
const filterData2 = ref<Array<AnyObject>>([
  {
    title: '全部',
    lable: 2,
    status: -1,
  },
  {
    title: '批量',
    lable: 3,
    status: -1,
  },
])

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

/*************************************************
 * 筛选1
 */
const filteActive = ref<number>(2)
function fliterFn(item: AnyObject, status: number) {
  if (filteActive.value == item.lable) return
  fliterFnThrottles(item, status)
}
const fliterFnThrottles = jx_throttles({
  time: 2000,
  success: (item: AnyObject, status: number  | boolean) => {
    filteActive.value = item.lable
    filteActive2.value = item.lable
    let data = {
      status: status,
      lable: item.lable,
      name:item.name
    }
    emit('updateIsSale', data)
  },
  fail: () => {
    toast('老板要点慢点哦')
  },
})

/*************************************************
 * 筛选2
 */
const filteActive2 = ref<number>(2)
function fliterFn2(lable: number, status: number) {
  if (filteActive2.value == lable) return
  filteActive2.value = lable
  filteActive.value = lable
  let data = {
    status: status,
    lable: lable,
  }
  emit('updateTowFilter', data)
}

watch(
  () => props.updateStateOk,
  (val) => {
    if (val) {
      filteActive2.value = 2
      filteActive.value = 2
    }
  }
)
</script>

<style lang="scss" scoped>
.filter-root {
  display: flex;
  overflow-x: auto; /* 允许水平方向滚动 */
  white-space: nowrap; /* 防止子元素换行 */
  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;
  
  .filter-fill{
    justify-content: space-around;
  }

  .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-filter{
    width: fit-content;
  }

  .item-fill{
    flex: 1;
  }

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

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