<script lang="ts" setup>
const list = ref([])
const paging = ref(null)
const cardList = ref({
  change: {
    label: '换电',
    startTime: '2025-12-0100:00:00',
    endTime: '2025-12-09 11:18:35',
    values: [
      {
        label: '换电车辆',
        value: 0,
        unit: '',
      },
      {
        label: '合格',
        value: 0,
        unit: '',
      },
      {
        label: '合格率',
        value: 0,
        unit: '%',
      },
      {
        label: '0%~10%',
        value: 0,
        unit: '',
      },
      {
        label: '10%~20%',
        value: 0,
        unit: '',
      },
      {
        label: '20%~30%',
        value: 0,
        unit: '',
      },
    ],
  },
  dispatch: {
    label: '调度',
    startTime: '2025-12-0100:00:00',
    endTime: '2025-12-09 11:18:35',
    values: [
      {
        label: '调度车辆',
        value: 0,
        unit: '',
      },
      {
        label: '已完成',
        value: 0,
        unit: '',
      },
      {
        label: '已取消',
        value: 0,
        unit: '',
      },
      {
        label: '扣押车调度',
        value: 0,
        unit: '',
      },
      {
        label: '合格率',
        value: 0,
        unit: '%',
      },
    ],
  },
  maintain: {
    label: '维修',
    startTime: '2025-12-0100:00:00',
    endTime: '2025-12-09 11:18:35',
    values: [
      {
        label: '维修车辆',
        value: 0,
        unit: '',
      },
    ],
  },
  polling: {
    label: '巡检',
    startTime: '2025-12-0100:00:00',
    endTime: '2025-12-09 11:18:35',
    values: [
      {
        label: '巡检车辆',
        value: 0,
        unit: '',
      },
    ],
  },
})

function queryList() {
  paging.value.complete([{}])
}
</script>

<template>
  <z-paging
    ref="paging"
    v-model="list"
    :fixed="false"
    :default-page-no="Number('1')"
    :default-page-size="Number('100')"
    :auto-show-back-to-top="Boolean(true)"
    bg-color="#f3f3f3"
    @query="queryList"
  >
    <!-- 换电 -->
    <view class="box_bar">
      <view class="title_bar">
        <text class="title_text">{{ cardList.change.label }}</text>
        <text class="small">({{ cardList.change.startTime }}-{{ cardList.change.endTime }})</text>
      </view>
      <view class="card_bar">
        <view
          v-for="(item, index) in cardList.change.values"
          :key="index"
          class="card"
        >
          <view class="card_number">
            {{ item.value }}{{ item.unit }}
          </view>
          <view class="card_label">
            {{ item.label }}
          </view>
        </view>
      </view>
    </view>

    <!-- 调度 -->
    <view class="box_bar">
      <view class="title_bar">
        <text class="title_text">{{ cardList.dispatch.label }}</text>
        <text class="small">({{ cardList.dispatch.startTime }}-{{ cardList.dispatch.endTime }})</text>
      </view>
      <view class="card_bar">
        <view
          v-for="(item, index) in cardList.dispatch.values"
          :key="index"
          class="card"
        >
          <view class="card_number">
            {{ item.value }}{{ item.unit }}
          </view>
          <view class="card_label">
            {{ item.label }}
          </view>
        </view>
      </view>
    </view>

    <!-- 维修 -->
    <view class="box_bar">
      <view class="title_bar">
        <text class="title_text">{{ cardList.maintain.label }}</text>
        <text class="small">({{ cardList.maintain.startTime }}-{{ cardList.maintain.endTime }})</text>
      </view>
      <view class="card_bar">
        <view
          v-for="(item, index) in cardList.maintain.values"
          :key="index"
          class="card"
        >
          <view class="card_number">
            {{ item.value }}{{ item.unit }}
          </view>
          <view class="card_label">
            {{ item.label }}
          </view>
        </view>
      </view>
    </view>

    <!-- 巡检 -->
    <view class="box_bar">
      <view class="title_bar">
        <text class="title_text">{{ cardList.polling.label }}</text>
        <text class="small">({{ cardList.polling.startTime }}-{{ cardList.polling.endTime }})</text>
      </view>
      <view class="card_bar">
        <view
          v-for="(item, index) in cardList.polling.values"
          :key="index"
          class="card"
        >
          <view class="card_number">
            {{ item.value }}{{ item.unit }}
          </view>
          <view class="card_label">
            {{ item.label }}
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
.box_bar {
  width: calc(100% - 40rpx);
  padding: 30rpx 20rpx;
  background-color: white;
  margin: 20rpx 0;

  .title_bar {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .title_text {
      font-size: 32rpx;
      font-weight: bold;
      margin: 0 10rpx;
    }

    .small {
      font-size: 26rpx;
      color: #a7a7a7;
    }
  }

  .card_bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 0 6px;

    .card {
      border-radius: 14rpx;
      padding: 14rpx 32rpx;
      text-align: center;
      border: 2px solid #f5f5f5;

      .card_number {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 4px;
        color: #7a7a7a;
      }

      .card_label {
        font-size: 12px;
        color: #7b7b7b;
      }
    }
  }
}
</style>
