<script lang="ts" setup>
const emits = defineEmits(['change'])
const dataList = ref([
  {
    name: '低电量',
    num: 0,
    active: false,
    color: '#f84a42',
    icon: 'dianliang',
    iconColor: '#f84a42',
  },
  {
    name: '中电量',
    num: 0,
    active: false,
    color: '#f88b0d',
    icon: 'dianliang1',
    iconColor: '#f88b0d',
  },
  {
    name: '高电量',
    num: 0,
    active: false,
    color: '#33bf17',
    icon: 'dianliang2',
    iconColor: '#33bf17',
  },
  {
    name: '离线',
    num: 0,
    active: false,
    color: '#6f6f6f',
    icon: 'lixian',
    iconColor: '#6f6f6f',
  },
])
const selectData = reactive({
  sliderValue: [0, 100],
})
const isClick = ref(false) // 限位开关（避免点击事件触发滑动事件）

function handleClick(item: any, index: number) {
  isClick.value = true
  dataList.value[index].active = !item.active
  dataList.value.forEach((item, idx) => {
    if (idx !== index) {
      item.active = false
    }
  })
  switch (item.name) {
    case '低电量':
      selectData.sliderValue = [0, 20]
      break
    case '中电量':
      selectData.sliderValue = [20, 70]
      break
    case '高电量':
      selectData.sliderValue = [70, 100]
      break
    case '离线':
      selectData.sliderValue = [0, 100]
      break
    default:
      break
  }
  if (!dataList.value[index].active) {
    selectData.sliderValue = [0, 100]
  }
  emits('change', {
    type: 'tab',
    value: dataList.value[index].active ? item.name : 'all',
  })
  setTimeout(() => {
    isClick.value = false
  }, 100)
}

function handleChange(val: any) {
  selectData.sliderValue = val

  if (isClick.value) {
    return
  }

  dataList.value.forEach((item) => {
    item.active = false
  })
  emits('change', {
    type: 'slide',
    value: val,
  })
}

// 设置不同类别车的数量
function setCarNum(carList: any[]) {
  // 如果 carList 不存在或为空，重置 dataList 的 num 为 0
  if (!carList || carList.length === 0) {
    dataList.value.forEach((item) => {
      item.num = 0
    })
    return
  }

  let lowCount = 0
  let mediumCount = 0
  let highCount = 0
  let offlineCount = 0

  // 统计各类车辆数量
  carList.forEach((car) => {
    if (!car.online) {
      offlineCount++
    }
    else {
      const soc = car.soc ?? 0 // 使用空值合并操作符更安全
      if (soc >= 0 && soc < 20) {
        lowCount++
      }
      else if (soc >= 20 && soc < 70) {
        mediumCount++
      }
      else if (soc >= 70 && soc <= 100) {
        highCount++
      }
    }
  })

  // 更新 dataList 中的 num 字段
  dataList.value.forEach((item) => {
    switch (item.name) {
      case '低电量':
        item.num = lowCount
        break
      case '中电量':
        item.num = mediumCount
        break
      case '高电量':
        item.num = highCount
        break
      case '离线':
        item.num = offlineCount
        break
      default:
        break
    }
  })
}

defineExpose({
  setCarNum,
})
</script>

<template>
  <view class="container">
    <!-- 数据展示 -->
    <view class="data_wrapper">
      <view
        v-for="(item, index) in dataList"
        :key="index"
        class="data_item"
        :class="[item.active ? 'active' : '']"
        :style="{
          color: item.color,
        }"
        @click="handleClick(item, index)"
      >
        <view class="data_num">
          {{ item.num }}
        </view>
        <view
          :style="{
            color: item.active ? 'white' : '#424041',
          }"
          class="data_text"
        >
          <uv-icon
            :name="item.icon"
            custom-prefix="custom-icon"
            size="20"
            :color="item.iconColor"
          />
          {{ item.name }}
        </view>
      </view>
    </view>
    <!-- 数据筛选 -->
    <view class="select_wrapper">
      <view class="select_tips">
        只看电量
      </view>
      <view class="select_slider">
        <llt-slider-range
          :model-value="selectData.sliderValue"
          @change="handleChange"
        />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  width: calc(100% - 40rpx);
  padding: 20rpx;
  background-color: white;
  border-radius: 15rpx;

  .data_wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20rpx;

    .data_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1; /* 关键！让每个子项平均分占空间 */
      padding: 5rpx; /* 可选：增加内边距 */
      box-sizing: border-box;
      border-radius: 10rpx;
      transition: all 0.1s ease-in-out;

      .data_num {
        font-size: 42rpx;
        font-weight: bold;
      }

      .data_text {
        margin-top: 8rpx;
        font-size: 26rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .active {
      background-color: #3490f3 !important;
      color: white !important;
    }
  }

  .select_wrapper {
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .select_tips {
      font-size: 28rpx;
      color: #8e8e8e;
    }

    .select_slider {
      width: 80%;
    }

    .switch_wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 26rpx;
      padding: 10rpx 20rpx;
      border-radius: 20px;
      background-color: #e6f7fe;
      color: #5495eb;
    }
  }
}
</style>
