<template>
  <view class="jx-tabs">
    <scroll-view
      class="tab-scroll"
      scroll-x="true"
      scroll-with-animation
      :scroll-left="scrollLeft"
    >
      <view
        v-for="item in orderStatus"
        :key="item.id"
        class="scroll-item"
        :class="{ jxTabsActive: currentStatus == item.id }"
        @tap="tabEmit(item.id, item, record, $event)"
        >{{ item.name }}
        <text class="badge" v-if="item.count != 0">{{ item.count }}</text>
      </view>
    </scroll-view>
  </view>
</template>
  
<script lang="ts" setup>
import tabFn from './jx-tab'
const {
  currentStatus, // 高亮初始值
  orderStatus, // tab 菜单栏数据
  scrollLeft, // 滚动到左边距离
  record, // 记录值
  clickTab, // tab 点击事件
  getOrderCount, // 获取数据
} = tabFn()

const emit = defineEmits<{
  (e: 'jxTab', target: AnyObject): void
}>()
let recordNum: number = 2
function tabEmit(id: number, item: AnyObject, recordID: number, e: AnyObject) {
  if (recordNum == id) return false
  recordNum = id
  emit('jxTab', item)
  clickTab(id, recordID, e)
}

defineExpose({
  getOrderCount,
})
</script>
  
<style lang="scss" scoped>
@import './jx-tab.scss';
</style>