<script lang="ts" setup>
const eimts = defineEmits(['change'])
const selectData = reactive({
  seletType: '2', // 1:时间 2:天数
  sliderValue: 0,
})

const dataList = ref([
  {
    name: '超车区',
    num: 0,
    active: false,
    color: '#ef5451',
  },
  {
    name: '超24h无单',
    num: 0,
    active: false,
    color: '#ef5451',
  },
  {
    name: '扣押车',
    num: 0,
    active: false,
    color: '#ff8c00',
  },
  {
    name: '不在停车区',
    num: 0,
    active: false,
    color: '#ff8c00',
  },
])

function switchSelect() {
  selectData.seletType = selectData.seletType === '1' ? '2' : '1'
  selectData.sliderValue = 0
}

function handleClick(item: any, index: number) {
  dataList.value[index].active = !item.active
  eimts('change', {
    ...selectData,
    data: dataList.value
      .filter(item => item.active)
      .map(item => item.name),
  })
}

function changeSlider(value: any) {
  eimts('change', {
    ...selectData,
    sliderValue: value,
    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 class="select_wrapper">
      <view class="select_tips">
        只看无单
      </view>
      <view class="select_slider">
        <uv-slider
          v-model="selectData.sliderValue"
          show-value
          :max="selectData.seletType === '1' ? 72 : 7"
          :min="0"
          @change="changeSlider"
        />
      </view>
      <view class="switch_wrapper" @click="switchSelect">
        <uv-icon
          name="qiehuan1"
          custom-prefix="custom-icon"
          size="14"
          color="#5495eb"
        />
        <text>{{ selectData.seletType === '1' ? '时间' : '天数' }}</text>
      </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: 28rpx;
      }
    }
    .active {
      background-color: #3490f3 !important;
      color: white !important;
    }
  }

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

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

    .select_slider {
      width: 65%;
    }

    .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>
