<script lang="ts" setup>
import { getImageFullPath } from '@/utils'
import { repair_toolbar_list } from '../config'

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
const emits = defineEmits(['change'])
const dataList = ref(repair_toolbar_list)

function handleClick(item: any, index: number) {
  // 切换当前项的 active 状态
  dataList.value[index].active = !item.active
  dataList.value.forEach((item, idx) => {
    if (idx !== index) {
      item.active = false
    }
  })
  const type = dataList.value.find(item => item.active)
  emits('change', {
    repairSeletType: type ? type.key : 'all',
  })
}

function statisticaData(carList: any[]) {
  if (!carList || carList.length === 0) {
    dataList.value.forEach((item) => {
      item.num = 0
    })
    return
  }

  let repairCount = 0
  let offlineCount = 0

  // 统计各类车辆数量
  carList.forEach((car) => {
    if (!car.online) {
      offlineCount++
    }
    else {
      repairCount++
    }
  })

  // 更新 dataList 中的 num 字段
  dataList.value.forEach((item) => {
    switch (item.key) {
      case 'repair':
        item.num = repairCount
        break
      case 'offline':
        item.num = offlineCount
        break
      default:
        break
    }
  })
}

watch(() => props.list, (newVal) => {
  statisticaData(newVal)
}, { immediate: true })
</script>

<template>
  <view class="container">
    <!-- 数据展示 -->
    <view class="data_wrapper">
      <view
        v-for="(item, index) in dataList"
        :key="index"
        class="data_item"
        :style="{
          color: item.color,
          backgroundColor: item.active ? item.activeBgColor : '',
          borderColor: item.active ? `${item.activeColor}` : 'transparent',
        }"
        @click="handleClick(item, index)"
      >
        <view class="item_icon">
          <uv-image :src="getImageFullPath(item.icon)" mode="scaleToFill" width="100%" height="100%" />
        </view>
        <view class="item_name">
          {{ item.name }}
        </view>
        <view
          :style="{
            color: item.color,
          }"
          class="item_num"
        >
          {{ item.num }}
        </view>
      </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; /* 可选：增加内边距 */
      border: 1px solid transparent;
      border-radius: 10rpx;
      transition: all 0.1s ease-in-out;

      .item_icon {
        width: 80rpx;
        height: 80rpx;
        overflow: hidden;
      }

      .item_name {
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        color: #666666;
        font-weight: 400;
      }

      .item_num {
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        color: #0d162a;
        font-weight: 400;
      }
    }
  }

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

    .select_tips {
      font-size: 28rpx;
      width: 180rpx;
      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>
