ShowEasyFrontEnd/FrontEnd/components/user/bookingListContent.vue

<template>
  <div>
    <Swiper class="swiper tw-mb-[15px] md:tw-mb-[30px]" :options="swiperOption" @click="slideClicked">
      <SwiperSlide v-for="(item, index) in bookingType" :key="index"
        :class="['tw-transition-all tw-delay-75 tw-ease-in-out',currentType === item
        ? 'tw-flex tw-justify-center tw-py-[13px] tw-border-b-2 tw-border-solid tw-border-0 tw-border-primary-1 tw-text-primary-1 tw-cursor-pointer'
        : 'tw-flex tw-justify-center tw-py-[13px] tw-border-b tw-border-base-disable hover:tw-border-b-2 tw-border-solid tw-border-0 tw-border-transparent hover:tw-text-primary-1 tw-cursor-pointer']">
        {{ item }}
      </SwiperSlide>
    </Swiper>
    <h4 class="t14 tw-font-bold md:t16 tw-mb-[10px]">{{ $t("Filter") }}</h4>
    <div class="element tw-w-fit md:tw-w-fit tw-mb-[15px] md:tw-mb-[30px]">
      <ElementSelect :select="{
        required: false,
      }" :selectList="categories" :default="0" @change="getCategory" :defaultOptionMsg="$t('All Categories')">
      </ElementSelect>
    </div>
    <UserServiceItem v-for="(item, index) in bookingList" :key="index" :info="item" @contact-us="activeContactUs"
      @upload-remittance-slip="activeUploadSlip"></UserServiceItem>
    <!-- <div v-if="bookingList.length < 1" class="tw-mt-[5px] tw-mb-[60px]">
      <div class="tw-flex tw-justify-center tw-mt-[60px] tw-mb-[30px]">
        <img :src="emptyImg" alt="" class="tw-h-[142px] tw-w-[160px]" />
      </div>
      <div class="tw-text-center tw-body-3 tw-text-neutrals-800 tw-mb-[30px]">
        {{
        currentType === "全部"
        ? $t(`No Bookings yet ...`)
        : $t(`You don't have any ${currentType} bookings`)
        }}
      </div>
      <div class="tw-flex tw-justify-center tw-mb-[30px]">
        <button
          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("Explore with ShowEasy") }}
        </button>
      </div>
    </div> -->
    <!-- <div v-if="bookingList.length < 1"
      class="tw-mb-[60px] tw-py-[60px] tw-pl-[10px] md:tw-body-2">
       {{ $t("Sorry, we couldn't find anything for ") + searchQuery }}
      {{ $t("Sorry, we couldn't find anything for ") }}

    </div> -->
    <!-- <div class="tw-flex tw-justify-end" v-if="renderList.length > 0">
      <pagination :pageLength="pageLength" @update="updateCurrentPage"></pagination>
    </div> -->
    <ContactUsModal :ContactUs="contactUs"></ContactUsModal>
    <UploadRemittanceSlipModal></UploadRemittanceSlipModal>
  </div>
</template>
<script>
import ElementSelect from "@/components/user/userSelect.vue";
import UserServiceItem from "./userServiceItem.vue";
import pagination from "@/components/newComponent/pagination/pagination.vue";
import ContactUsModal from "@/components/booking/Modal/ContactUsModal.vue";
import UploadRemittanceSlipModal from "@/components/booking/Modal/UploadRemittanceSlipModal.vue";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
  components: {
    ElementSelect,
    UserServiceItem,
    Swiper,
    SwiperSlide,
    pagination,
    ContactUsModal,
    UploadRemittanceSlipModal,
  },
  props: {
    // searchQuery: {
    //   type: String,
    // },
    width: {
      type: Number
    },
    userData: {
      type: Object
    }
  },
  data() {
    return {
      apiUrl: process.env.SERVICE_CONSOLE,
      bookingType: [
        this.$t("booking.All"),
        this.$t("booking.Unpaid"),
        this.$t("booking.Processing"),
        this.$t("booking.Completed"),
        this.$t("booking.Cancelled"),
      ],
      previewImage:[],
      currentType: "All",
      filterList: ["All categories"],
      categoryList: [],
      categories: [],
      emptyImg: require("~/assets/img/companyEmpty.png"),
      contactUs: {
        Phone: "info@showeasy.com",
        Mail: "+886-2-2725-5000",
      },
      swiperOption: {
        slidesPerView: 3,
        breakpoints: {
          768: {
            slidesPerView: 5,
          },
        },
      },
      apiEndPoint: process.env.SERVICE_CONSOLE,
      perPageItems: 6,
      currentPage: 1,
      selectedCategory: 0,
      bookingList: [],
      bookingStatus: [],
      subCategoryIDs:[],
      categoryValue: "",
    };
  },
  mounted() {
    this.fetchCategory();
  },
  // watch: {
  //   searchQuery: {
  //     handler: function () {
  //       this.
  //     },
  //   },
  // },
  created(){
    this.getUserOrderList();
    
  },
  computed: {
    // bookingFilter() {
    //   const categoryList = this.filterByCategory(
    //     this.bookingList,
    //     this.selectedCategory
    //   );
    //   const tabList = this.filterByTab(categoryList, this.currentType);
    //   //const searchList = this.filterByQuery(tabList, this.searchQuery);
    //   //return searchList;
    // },
    renderList() {
      // for (let i in this.bookingList) {
      //   this.getServiceData(this.bookingList[i], i);
      // }
      //return this.sliceRenderList(this.bookingFilter);
    },
    result() {
      return this.bookingFilter.length;
    },
    pageLength() {
      return Math.ceil(this.result / this.perPageItems);
    },
  },
  methods: {
    getCategory(value){
      console.log(value);
      this.categoryValue = value;
      if(this.categoryValue == 0){
        this.subCategoryIDs = [];
      }else{
        this.subCategoryIDs.push(value);
      }
    },
    slideClicked(swiper) {
      this.currentType = this.bookingType[swiper.clickedIndex];
      if(this.currentType == "全部"){
        this.bookingStatus = [];
      }else if(this.currentType == "未付款"){
        this.bookingStatus = ["Unpaid"];
      }else if(this.currentType == "訂單處理中"){
        this.bookingStatus = ["Processing"];
      }else if(this.currentType == "訂單完成"){
        this.bookingStatus = ["Completed"];
      }else if(this.currentType == "訂單取消"){
        this.bookingStatus = ["Cancelled"];
      }else{
        this.bookingStatus = [];
      }
      this.getUserOrderList();
    },
    activeContactUs() {
      this.$modal.show("ContactUs");
    },
    activeUploadSlip() {
      this.$modal.show("UploadRemittanceSlip");
    },
    fetchCategory() {
      this.$axios
      .get(`/trending/api/BookingOnline/GetBookingCategory?LangType=${this.$i18n.localeProperties["langQuery"]}`)
      .then((response) => {
        //console.log(JSON.stringify(response));
        if(response && response.data && response.data.DATA && response.data.DATA.rel){
          let data = response.data.DATA.rel
          if(data){
            this.categories = data;
            this.categories = this.categories.map((item) => {
            return {
              id: item.CategoryID,
              name: item.CategoryName,
            };
          });

          // const initial = {
          //       id: "999",
          //       name: this.$t("userProfile.allCategory"),
          //     };

          //     this.categories.splice(0, 0, initial);

          //this.getCategoryList();

          }
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
    // getCategoryList() {
    //   const userCategory = [
    //     ...new Set(
    //       this.bookingList.map((item) => {
    //         return item.categoryId;
    //       })
    //     ),
    //   ];
    //   this.bookingList = this.bookingList.map((item) => {
    //     item.categoryName =(this.categories[item.categoryId] && this.categories[item.categoryId].name )  ? this.categories[item.categoryId].name : "";
    //     return item;
    //   });
    //   for (const index of userCategory) {
    //     this.categoryList.push(this.categories[index]);
    //   }
    // },
    // updateCategory(categoryId) {
    //   this.selectedCategory = Number(categoryId);
    // },
    filterByCategory(data, categoryId) {
      if (categoryId === 0) return data;
      return data.filter((item) => item.categoryId === categoryId);
    },
    // filterByTab(data, type) {
    //   switch (type) {
    //     case "All":
    //       this.currentPage = 1;
    //       return data;
    //     case "Unpaid":
    //       this.currentPage = 1;
    //       return data.filter((item) => item.order_payment[item.order_payment.length-1].payment_status === 0);
    //     case "Completed":
    //       this.currentPage = 1;
    //       return data.filter((item) => item.order_payment[item.order_payment.length-1].payment_status === 2);
    //     case "Cancelled":
    //       this.currentPage = 1;
    //       return data.filter((item) => item.order_payment[item.order_payment.length-1].payment_status === -1);
    //     case "Processing":
    //       this.currentPage = 1;
    //       return data.filter(
    //         (item) =>
    //           item.order_payment[item.order_payment.length-1].payment_status !== -1 &&
    //           item.order_payment[item.order_payment.length-1].payment_status !== 2 &&
    //           item.order_payment[item.order_payment.length-1].payment_status !== 0
    //       );
    //     default:
    //       return data;
    //   }
    // },
    // updateCurrentPage(value) {
    //   this.currentPage = value;
    // },
    // sliceRenderList(data) {
    //   return data.slice(
    //     (this.currentPage - 1) * this.perPageItems,
    //     this.currentPage * this.perPageItems
    //   );
    // },
    // filterByQuery(data, query) {
    //   if (query.length < 1) return data;
    //   return data.filter((item) => {
    //     return (
    //         item.service_name.toLowerCase().includes(query.toLowerCase()) ||
    //         item.order_display_id.toLowerCase().includes(query.toLowerCase()) ||
    //         item.partnerName.toLowerCase().includes(query.toLowerCase()) ||
    //         item.categoryName.toLowerCase().includes(query.toLowerCase())
    //     );
    //   });
    // },
    async getUserOrderList() {
      this.$axios
      .get(`/trending/api/BookingOnline/BookingCardList?SubCategoryIDs=${JSON.stringify(this.subCategoryIDs)}&BookingStatuses=${JSON.stringify(this.bookingStatus)}&PaymentStatuses&Lang=${this.$i18n.localeProperties["langQuery"]}`)
      .then((response) => {
        if(response && response.data && response.data.DATA && response.data.DATA.rel){
          let data = response.data.DATA.rel
          if(data){
            this.bookingList = data;
          }
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
    // async getServiceData(object,i) {
    //   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.bookingList[i].preview_image = res.data.preview_image
    //     })
    //     .catch((error) => console.log(error));
    // },
  },
};
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
}

:deep() {

  // .v-pagination__navigation{
  //   background-color: #e5e5e5;
  // }
  .v-pagination>li>.v-pagination__item {
    background-color: inherit;
  }

  .v-pagination__navigation {
    background-color: inherit !important;
  }

  .v-pagination__navigation--disabled {
    opacity: 0;
  }
}
</style>