<script lang="ts" setup>
const eimts = defineEmits(['change'])

const dataList = ref([
  {
    name: '总数',
    num: 0,
    active: false,
    color: '#414141',
  },
  {
    name: '故障',
    num: 0,
    active: false,
    color: '#ef5f5f',
  },
  {
    name: '用户报修',
    num: 0,
    active: false,
    color: '#f38f16',
  },
  {
    name: '离线',
    num: 0,
    active: false,
    color: '#28c107',
  },
])

function handleClick(item: any, index: number) {
  dataList.value[index].active = !item.active
  eimts('change', {
    data: dataList.value
      .filter(item => item.active)
      .map(item => item.name),
  })
}
</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"
        >
          {{ item.name }}
        </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; /* 可选：增加内边距 */
      box-sizing: border-box;
      border-radius: 10rpx;
      transition: all 0.1s ease-in-out;

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

      .data_text {
        margin-top: 8rpx;
        font-size: 28rpx;
      }
    }
    .active {
      background-color: #3490f3 !important;
      color: white !important;
    }
  }
}
</style>
