<template>
  <div>
    <div class="container q-mt-md">
      <q-breadcrumbs class="q-mb-md" active-color="black">
        <template v-slot:separator>
          <q-icon size="1.5em" name="chevron_right" color="black" />
        </template>
        <q-breadcrumbs-el label="Laca" icon="home" to="/" />
        <q-breadcrumbs-el label="Chỗ đỗ xe" />
      </q-breadcrumbs>
      <div class="q-mt-md q-mb-md list-parking">
        <div
          class="row prop q-col-gutter-sm q-py-md"
          v-for="(n, idx) in listSlot"
          :key="idx"
          @click="showMap(n.id)"
        >
          <div
            class="col-4"
            :style="`width: ${$q.screen.gt.sm ? '220' : '180'}px; height: auto`"
          >
            <img
              :src="getImageUrl(n.images)"
              class="img-width"
              style="height: 115px"
            />
          </div>
          <div class="col prop-info">
            <a class="link-overlay" :href="`/parking/${n.id}`">
              <h2 class="prop-title q-ma-none">
                {{ n.name }}
              </h2>
            </a>
            <div class="prop-addr">
              {{ `${n.address}, ${n.ward}, ${n.district}, ${n.city}` }}
            </div>
            <ul class="prop-attr">
              <li>{{ `${n.total} chỗ  đỗ xe` }}</li>
            </ul>
            <div class="price">
              {{
                `${(n.pricing_per_hour || 0).toLocaleString('it-IT', {
                  style: 'currency',
                  currency: 'VND',
                })}`
              }}
            </div>
          </div>
        </div>
        <q-pagination
          v-model="pagination.page"
          :max="pagesNumber"
          direction-links
          flat
          color="primary"
          @update:model-value="loadListSlot"
          active-color="secondary"
          class="justify-center q-mb-md q-mt-md"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent } from 'vue';
import { mapGetters, mapActions } from 'vuex';

export default defineComponent({
  name: 'ListParking',
  data() {
    return {
      listSlot: [],
      pagination: {
        page: 1,
        rowsPerPage: 10,
      },
      pagesNumber: 1,
    };
  },
  computed: {
    ...mapGetters({
      getUser: 'userModule/getUser',
    }),
  },
  async created() {
    await this.loadListSlot();
  },
  watch: {
    $route() {
      this.loadListSlot();
    },
  },
  methods: {
    ...mapActions({
      getListSlot: 'slotModule/getListSlot',
    }),
    async loadListSlot() {
      console.log(this.$route.query.name);
      const params = {
        search: this.$route.query?.name || '',
        pageSize: this.pagination.rowsPerPage,
        pageNumber: this.pagination.page,
      };
      const res = await this.getListSlot(params);
      this.listSlot = res.data.slots;
      this.pagesNumber = Math.ceil(
        res.data.total / this.pagination.rowsPerPage
      );
    },
    showMap(id) {
      this.$router.push({ name: 'parking_detail', params: { id: id } });
      // this.$router.push({ name: 'map', query: { id: id } });
    },
    getImageUrl(images, index = null) {
      if (!images?.length) {
        return '/icons/logos/LACA_transparent2.png';
      }
      if (index == null) {
        const random = Math.floor(Math.random() * images.length);
        return `${process.env.VUE_APP_API_SERVER}/files/upload/${images[random]}`;
      }
      return `${process.env.VUE_APP_API_SERVER}/files/upload/${images[index]}`;
    },
  },
});
</script>

<style lang="scss" scoped>
.prop {
  border-top: 1px solid #e6ecf0;
  .prop-info {
    .prop-addr {
      margin-top: 2px;
      font-size: 12px;
      line-height: 18px;
    }
    .link-overlay {
      text-decoration: none;
      .prop-title {
        font-size: 14px;
        line-height: 20px;
        color: #3c4146;
        font-weight: 600;
      }
    }
    .prop-attr {
      margin: 0;
      padding: 0;
      list-style: none;
      font-weight: normal;
      color: #3c4146;
      li {
        display: inline-block;
        margin-right: 16px;
      }
    }
    .price {
      font-size: 16px;
      line-height: 30px;
      font-weight: 700;
      color: #0499a8;
    }
  }
}
.list-parking {
  max-height: 100%;
}
</style>
