<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="Thêm chỗ gửi xe" to="/register-parking" />
        <q-breadcrumbs-el label="Bãi xe của tôi" />
      </q-breadcrumbs>
      <div class="q-mt-md">
        <q-table
          flat
          bordered
          :rows="rows"
          :columns="columns"
          row-key="index"
          v-model:pagination="pagination"
          @request="onRequest"
        >
          <template v-slot:body-cell-index="props">
            <q-td :props="props">
              <div>
                {{
                  props.pageIndex +
                  1 +
                  (pagination.page - 1) * pagination.rowsPerPage
                }}
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-name="props">
            <q-td :props="props">
              <div>
                {{ props.row.file_name }}
              </div>
            </q-td>
          </template>

          <template v-slot:body-cell-pricing_per_hour="props">
            <q-td :props="props">
              <div>
                {{
                  `${(props.row.pricing_per_hour || 0).toLocaleString('it-IT', {
                    style: 'currency',
                    currency: 'VND',
                  })}`
                }}
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-end_at="props">
            <q-td :props="props">
              <div>
                {{ convertDay(props.row.end_at) }}
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-start_at="props">
            <q-td :props="props">
              <div>
                {{ convertDay(props.row.start_at) }}
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-status="props">
            <q-td :props="props">
              <div>
                <q-badge
                  rounded
                  :color="`${
                    props.row.status == 'done' ? 'secondary' : 'warning'
                  }`"
                  :label="props.row.status"
                />
              </div>
            </q-td>
          </template>

          <template v-slot:body-cell-action="props">
            <q-td :props="props">
              <div>
                <q-btn
                  icon="edit"
                  flat
                  round
                  color="secondary"
                  size="md"
                  @click="editHandle(+props.row.id)"
                >
                  <q-tooltip> Chỉnh sửa </q-tooltip>
                </q-btn>
                <q-btn
                  icon="delete"
                  flat
                  round
                  color="negative"
                  size="md"
                  @click="deleteBookingHandle(+props.row.id)"
                >
                  <q-tooltip> Huỷ </q-tooltip></q-btn
                >
              </div>
            </q-td>
          </template>
        </q-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { mapGetters, mapActions } from 'vuex';
import dayjs from 'dayjs';

export default defineComponent({
  name: 'HistoryBooking',
  data() {
    return {
      rows: [],
      columns: [
        {
          name: 'index',
          required: true,
          label: 'STT',
          align: 'left',
          field: 'index',
        },
        {
          name: 'slotName',
          required: true,
          label: 'Tên bãi đỗ',
          align: 'left',
          field: 'slotName',
        },
        {
          name: 'total',
          required: true,
          label: 'Tổng vị trí',
          align: 'left',
          field: 'total',
        },
        {
          name: 'pricing_per_hour',
          required: true,
          label: 'Giá theo giờ',
          align: 'left',
          field: 'pricing_per_hour',
        },
        {
          name: 'address',
          required: true,
          label: 'Địa Chỉ',
          align: 'left',
          field: 'address',
        },
        {
          name: 'district',
          label: 'Quận/Huyện',
          field: 'district',
          align: 'left',
        },
        {
          name: 'ward',
          label: 'Xã/Phường',
          field: 'ward',
          align: 'left',
        },
        {
          name: 'city',
          label: 'Thành Phố',
          field: 'city',
          align: 'left',
        },
        { name: 'action', label: 'Lựa chọn', align: 'center' },
      ],
      pagination: {
        page: 1,
        rowsPerPage: 5,
      },
      pagesNumber: 1,
    };
  },
  computed: {
    ...mapGetters({
      getUser: 'userModule/getUser',
    }),
  },
  async created() {
    if (this.getUser) await this.loadList();
  },
  methods: {
    ...mapActions({
      myPacking: 'slotModule/myPacking',
      submitBookingSlot: 'slotModule/submitBookingSlot',
      outBookingSlot: 'slotModule/outBookingSlot',
    }),
    showError() {
      this.$q.notify({
        badgeClass: 'hide-badge',
        message: 'Có lỗi xảy ra. Vui lòng kiếm tra lại!',
        color: 'negative',
        multiLine: true,
        position: 'top',
        html: true,
        classes: 'notify-error',
        timeout: 1000,
      });
    },
    showSucsess() {
      this.$q.notify({
        badgeClass: 'hide-badge',
        message: 'Thành công',
        color: 'secondary',
        multiLine: true,
        position: 'top',
        html: true,
        timeout: 1000,
      });
    },
    async loadList() {
      const params = {
        search: this.$route.query?.name || '',
        pageSize: this.pagination.rowsPerPage,
        pageNumber: this.pagination.page,
      };
      const res = await this.myPacking(params);
      this.rows = res.data.slots?.map((e: any) => ({
        slotName: e.name,
        ...e,
      }));
      this.pagesNumber = Math.ceil(
        res.data.total / this.pagination.rowsPerPage
      );
    },
    showMap(id: number) {
      this.$router.push({ name: 'map', query: { id: id } });
    },
    convertDay(day) {
      return dayjs(day).format('YYYY/MM/DD hh:mm');
    },
    async submitHandle(id: number) {
      try {
        await this.submitBookingSlot({ id });
        this.showSucsess();
        await this.loadList();
      } catch (error) {}
    },
    async editHandle(id: number) {
      this.$router.push({ name: 'register-parking', query: { id: id } });
    },
    async deleteBookingHandle(id: number) {
      try {
        await this.outBookingSlot({ id });
        this.showSucsess();
        await this.loadList();
      } catch (error) {
        this.showError();
      }
    },
  },
});
</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;
    }
  }
}
</style>
