<script setup>
import border from "@/components/border.vue"
import { vehicleList } from "@/api/index.js";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAppStore } from "@/store/app.js"

const appStore = useAppStore();

const list = ref([])
const count = ref(0);

const loadList = () => {
  vehicleList({
    areaCode: appStore.address.areaCode,
    streetCode: appStore.address.streetCode,
  }).then(res => {
    list.value = res.data.list;
    count.value = res.data.count;
    // for (let i = 0; i < 2; i++) {
    //   list.value = [...list.value, ...res.data.list];
    // }
  })
}

const router = useRouter()
const route = useRoute()

const navToDelivery = (item) => {
  item.areaCode = item.area_code;
  item.streetCode = item.street_code;
  appStore.setDeliveryAddress(item);
  router.push({
    path: '/delivery',
    query: {
      id: item.id
    }
  });
}


onMounted(() => {
  loadList()
})
</script>

<template>
  <border>
    <div class="box">
      <div class="title">三轮车列表</div>
      <div class="car-box">
        <div class="car">
          <div class="count">{{ count }}</div>
          <div class="name">三轮车总数</div>
        </div>
        <div class="list">
          <div class="head">
            <img class="img" src="/src/assets/img/item.png" />
            <div>三轮车投放</div>
          </div>
          <div class="car-list">
            <div
              class="car-item"
              :class="{ 'car-item2': index > 1 }"
              v-for="(item, index) in list.slice(0, 4)"
              :key="index"
              @click="navToDelivery(item)"
            >
              <img class="img" src="/src/assets/img/icon-car.png" />
              <div>{{ item.license }}</div>
            </div>
            <div
              class="car-item"
              :class="{ 'car-item2': index > 2 && index < 5 }"
              v-for="(item, index) in 4 - list.length"
              :key="'em' + index"
              style="background-image: none"
            ></div>
          </div>
        </div>
      </div>
      <div class="car-box">
        <div class="car-list2">
          <div
            class="car-item"
            :class="{ 'car-item2': index > 2 && index < 5 }"
            v-for="(item, index) in list.slice(4, 13)"
            :key="index"
            @click="navToDelivery(item)"
          >
            <img class="img" src="/src/assets/img/icon-car.png" />
            <div>{{ item.license }}</div>
          </div>
          <div
            class="car-item"
            :class="{ 'car-item2': index > 2 && index < 5 }"
            v-for="(item, index) in 13 - list.length"
            :key="'em' + index"
            style="background-image: none"
          ></div>
        </div>
      </div>
    </div>
  </border>
</template>

<style scoped lang="scss">
.box {
  padding: 1.25rem;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .title {
    width: 100%;
    background-image: url(../../../assets/img/title.png);
    background-size: 100% 100%;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "ifonts";
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }
  .car-box {
    flex: 1;
    width: 100%;
    display: flex;
    .car {
      flex: 1;
      margin-top: 0.63rem;
      display: flex;
      flex-direction: column;
      font-size: 1rem;
      .count {
        flex: 1;
        background-image: url(../../../assets/img/car.png);
        background-size: 100% 100%;
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        margin: 0 1rem;
      }
    }
    .list {
      flex: 2;
      height: 100%;
      .head {
        height: 33%;
        display: flex;
        align-items: center;
        padding-left: 0.5rem;
        .img {
          height: 1rem;
          width: 1rem;
          margin-right: 0.5rem;
        }
      }
      .car-list {
        height: 66%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        .car-item {
          height: 50%;
          width: 50%;
          background-image: url(../../../assets/img/car-item.png);
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          div {
            max-width: 60%;
            overflow: hidden;
            white-space: nowrap;
          }
        }
      }
    }
    .car-list2 {
      height: 100%;
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      .car-item {
        height: 33%;
        width: 33.33%;
        background-image: url(../../../assets/img/car-item.png);
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        div {
          max-width: 60%;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
    .car-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      .img {
        width: 1.3rem;
        height: 1.3rem;
        margin-right: 0.4rem;
      }
    }
    .car-item2 {
      background-image: url(../../../assets/img/car-item2.png);
    }
  }
}
</style>
