<template>
  <div
    class="booking-info-item tw-p-[20px] tw-mb-[20px] tw-bg-white tw-border tw-border-solid tw-border-[#e5e5e5] tw-rounded-[20px] xl:tw-p-[20px]"
  >
  <nuxt-link :to="localePath('/user/booking/' + info.BookingNo)">
    <div
      class="tw-grid tw-grid-cols-[16%_82%] lg:tw-grid-cols-[13%_84%] tw-gap-x-2 lg:tw-gap-x-5"
    >
      <div>
          <img class="tw-w-[100px] tw-h-[75px] tw-rounded-[10px ]" :src="info.OnSiteService.Logo"/>
        <!-- <nuxt-link :to="localePath('/user/booking/' + info.BookingNo)"> -->
        <!-- </nuxt-link> -->
      </div>
      <div class="element content-text">
        <div class="tw-text-[18px] tw-font-medium tw-mb-[17px]">
          <span :class="bookingColor(mybookingStatusMap(info.BookingStatus))"
            >{{ $t(mybookingStatusMap(info.BookingStatus)) }},&nbsp;</span
          >
          <span
            :class="
              bookingColor(
                mypaymentStatusMap(info.PaymentStatus)
              )
            "
            >{{ $t(mypaymentStatusMap(info.PaymentStatus)) }}</span
          >
        </div>
        <h3
          class="t12 tw-font-bold tw-text-black tw-mb-[8px] md:tw-text-[16px]"
        >
          {{ info.OnSiteService.ServiceName }}
        </h3>
        <div class="order-id tw-body-5 tw-mb-[4px] tw-text-neutrals-800">
          #{{ info.BookingNo }}
        </div>
        <div 
          class="detail tw-body-5 tw-mb-[4px] xl:tw-text-neutrals-800"
          v-for="(item, key) in info.BookingDetail" :key="key"
        >   
          {{ item }}
        </div>
        <div class="service-date tw-body-5 tw-mb-[4px] xl:tw-text-neutrals-800"
        >
          {{ $t("Service Date：")
          }}&nbsp;{{ new Date(info.OnSiteService.ServiceStartDate).toLocaleString() }} - {{ new Date(info.OnSiteService.ServiceEndDate).toLocaleString() }}
        </div>
        <div v-if="info.BookingDate" class="booking-date tw-body-5 tw-mb-[8px] tw-text-neutrals-800">
          {{ $t("Booking Date：")
          }}&nbsp;{{ new Date(info.BookingDate).toLocaleString() }}
        </div>
        <div
          class="total tw-mb-[10px] md:tw-flex md:tw-justify-between md:tw-items-center md:tw-mb-0"
        >
          <span class="tw-text-[16px] tw-text-primary-1">
            ${{ formatTotal(info.TotalPrice) }}&nbsp;{{ info.Currency.CurrencyName }}
          </span>
          <div class="btn tw-mt-[10px] tw-flex md:tw-mt-0">
            <button
              @click.prevent="$emit('contact-us')"
              class="tw-transition tw-justify-center tw-items-center tw-btn-md tw-text-primary-1 tw-border tw-border-solid tw-border-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-xl hover:tw-bg-primary-3 tw-hidden md:tw-flex tw-w-fit tw-h-fit tw-mr-[10px]"
            >
              {{ $t("Contact Us") }}
            </button>
            <button
              v-if="
                mybookingStatusMap(info.BookingStatus) === 'Processing' &&
                mypaymentStatusMap(info.PaymentStatus) ===
                  'Unpaid'
              "
              @click.prevent="$emit('upload-remittance-slip', info.BookingID)"
              class="tw-transition tw-justify-center tw-items-center tw-btn-md tw-text-white tw-bg-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-xl tw-w-fit tw-h-fit"
            >
              {{ $t("Upload Remittance Slip") }}
            </button>
            <!-- <button
              v-if="mypaymentStatusMap(info.PaymentStatus) === 'Unpaid'"
              class="tw-transition tw-justify-center tw-items-center tw-btn-md tw-text-white tw-bg-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-xl tw-w-fit tw-h-fit"
              @click="goToPay()"
            >
              {{ $t("Go To Pay") }}
            </button> -->
            <!-- <button
              v-if="mybookingStatusMap(info.BookingStatus) === 'Completed'"
              class="tw-transition tw-justify-center tw-items-center tw-btn-md tw-text-white tw-bg-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-xl tw-w-fit tw-h-fit"
            >
              {{ $t("Write a Review") }}
            </button> -->
          </div>
        </div>
      </div>
    </div>
    </nuxt-link>
  </div>
</template>
<script>
import elementTextarea from "@/components/newComponent/form/ElementTextarea";
import elementPromoCode from "@/components/newComponent/form/ElementPromoCode";
import elementTimePicker from "@/components/newComponent/form/ElementTimePicker";
import {
  bookingStatusMap,
  mybookingStatusMap,
  paymentStatusMap,
  mypaymentStatusMap,
  bookingColor,
} from "@/plugins/util.js";
export default {
  components: {
    elementTextarea,
    elementPromoCode,
    elementTimePicker,
  },
  props: {
    info: {
      type: Object,
    },
    active: {
      type: Number,
    },
  },
  data() {
    return {
      apiUrl: process.env.SERVICE_CONSOLE,
      img:"",
    };
  },
  computed: {
    activeLabel() {
      return this.active;
    },
    formatTotal() {
      return function (total) {
        return total.toLocaleString("en-US");
      };
    },
  },
  mounted() {
    //this.getServiceData(this.info);
  },
  methods: {
    onLabelClick(label) {
      this.$emit("changeActiveLabel", label);
    },
    bookingStatusMap,
    mybookingStatusMap,
    paymentStatusMap,
    mypaymentStatusMap,
    bookingColor,
    goToPay() {
      this.$router.push(
        this.localePath("/user/booking/" + this.info.BookingNo)
      );
    },
    // async getServiceData(object) {
    //   this.$axios
    //     .get(
    //       `${this.apiUrl}/user-services/content?service_id=${object.service_id}&lang_code=${this.$i18n.localeProperties["langQuery"]}&currency=${object.currency}`
    //     )
    //     .then((res) => {
    //       this.img = res.data.preview_image;
    //       console.log(this.img);
    //     })
    //     .catch((error) => console.log(error));
    // },
  },
};
</script>
<style lang="scss" scoped>
  .booking-info-item {
    &:hover {
      box-shadow: 10px 10px 10px rgba(155, 155, 155, 0.25);
    }
  }

</style>