ShowEasyFrontEnd/FrontEnd/pages/service/_id.vue

<template>
  <div
    class="service-content tw-mb-[60px] tw-grid tw-grid-cols-1 tw-gap-[30px] md:tw-mb-[100px] xl:tw-px-[60px] xl:tw-max-w-screen-xl xl:tw-mx-auto xl:tw-grid-cols-[auto_364px]">
    <mobileFixTopBar ref="stickySwiper" :fixBar="fixBar" :currStep="currStep" :list="fixBarList"></mobileFixTopBar>
    <section class="step sercion-1 tw-w-full md:tw-px-[30px] xl:tw-px-0 xl:tw-col-span-2">
      <div class="tw-mt-[20px] md:tw-mb-[11px] md:tw-mt-[40px]">
        <Breadcrumbs></Breadcrumbs>
      </div>
      <div v-if="content.banners.length" class="tw-w-full">
        <slideshow :banners="content.banners"></slideshow>
      </div>
    </section>
    <section class="sercion-2 tw-px-[30px] md:tw-px-[30px] xl:tw-px-0 xl:tw-col-start-1 xl:tw-row-start-2">
      <h1 class="t16 tw-mb-[18px] md:t24">{{ content.name }}</h1>
      <div v-if="content.supplier"
        class="supplier tw-flex tw-items-center tw-mb-[20px] tw-text-base-primary t14 md:tw-mb-[30px] md:t16 md:tw-font-normal">
        <img :src="content.supplier.logo" class="tw-max-w-[40px] md:tw-max-w-[80px]" />
        <div class="t14 tw-font-normal tw-ml-[10px] md:t18 md:tw-font-normal">
          {{ content.supplier.brand }}
        </div>
      </div>
      <div class="editor-styleguide tw-text-base-primary" v-html="content.highlights"></div>
    </section>
    <section
      class="sercion-3 tw-grid tw-grid-cols-1 tw-gap-[30px] md:tw-gap-[40px] md:tw-px-[30px] xl:tw-px-0 xl:tw-col-start-1 xl:tw-row-start-3">
      <div ref="packageOptions" id="packageOptions" class="step">
        <div class="tw-px-[30px] md:tw-px-0">
          <h2 class="title-icon-left t16 tw-mb-[20px] md:t24">
            {{ $t("Package Options") }}
          </h2>
          <p class="text-slate-600 t12 md:t16">{{ $t("Select the exhibition you want to attend, and add the storage and delivery service of exhibits or truck pickup service") }}</p>
        </div>
        <div class="tw-w-full tw-bg-neutrals-100 tw-px-[20px] tw-py-[30px] md:tw-p-[30px] tw-rounded-[20px]">
          <div class="">
            <div class="group tw-mb-[40px] tw-px-[20px] tw-py-[30px] tw-rounded-[20px] tw-bg-white">
              <h3 class="t14 tw-font-bold tw-mb-[30px] md:t16 tw-block">
                {{ $t("Select Exhibition") }}
              </h3>
              <selectExhibition ref="ref_selectExhibition" :selectYearList="selectYearList" :selectMonthList="selectMonthList"></selectExhibition>
            </div>
            <div class="group tw-mb-[20px] tw-p-[20px] tw-rounded-[20px] tw-bg-white">
              <h3 class="t14 tw-font-bold tw-mb-[20px] md:t16 tw-block">
                {{ $t("Select exhibition hall service") }}
              </h3>
              <div class="tw-mb-[20px]">
                <p class="tw-text-neutrals-500 tw-font-normal md:t16">{{ $t("Storage service of exhibits in the exhibition hall, and assistance in transportation to the designated booth") }}</p>
              </div>
              <selectExhibitionService v-for="(item,index) in selectExhibitionServiceList" 
                :key="item.id" :ref="'ref_selectExhibitionitem'+item.id" @ChangeCosts="ChangeCosts($event)"
                :selectQuantityList="selectQuantityList" 
                :selectPackageList="selectPackageList"
                :typeGroupList="typeGroupList"
                :sort="index+1"
                :show = "item.id == showServiceItem"
                @delExhibitionService="delExhibitionService(item.id)">
              </selectExhibitionService>
              <v-btn outlined class="tw-rounded-[16px] remove-upper tw-border-primary-2 tw-text-primary-1 tw-flex tw-items-center"
                  style="padding: 24px 10px" width="100%" @click="addExhibitionService">
                  <v-img max-width="20" class="tw-mr-[8px]" :src="require(`@/assets/svg/new.svg`)"></v-img>
                  <span class="t18 tw-font-normal">{{ $t("New exhibit specifications") }}</span>
                </v-btn>
            </div>
            <div v-show="showCardItem" class="group tw-mb-[20px] tw-p-[20px] tw-rounded-[20px] tw-bg-white">
              <div class="tw-flex tw-justify-between tw-items-center">
                  <h3 class="t14 tw-font-bold tw-mb-[20px] md:t16">
                    {{ $t("Select truck pickup service") }}
                  </h3>
                  <v-img v-show="pickupServiceShow" max-width="18" max-height="19" class="tw-mr-[8px] tw-cursor-pointer" :src="require(`@/assets/svg/delete_default.svg`)" @click="deletePickupSerivce()"></v-img>
                </div>
                <div class="tw-mb-[20px]">
                  <p class="tw-text-neutrals-500 tw-font-normal md:t16">{{ $t("Pick up the goods at the designated place and transport them to the exhibition hall") }}</p>
                </div>
              <div v-show="pickupServiceShow">
                <div>
                  <quantitySelectGroup ref="ref_quantitySelectGroup" :label="'Select quantity'" :quantitySelectList="quantitySelectList" @ChangeCosts="ChangeCosts($event)">
                  </quantitySelectGroup>
                </div>
                <h3 class="t14 tw-font-bold tw-mb-[20px] md:t16 tw-block">
                  {{ $t("Fill in the picking information") }}<span class="required  t12 md:t14">*</span>
                </h3>
                <pickupInformation :selectAddressList="selectAddressList" ref="ref_pickupService" @ChangeCosts="ChangeCosts($event)"></pickupInformation>
              </div>
              <v-btn v-show="pickupServiceShow==false" outlined class="tw-rounded-[16px] remove-upper tw-border-primary-2 tw-text-primary-1 t18"
                  style="padding: 24px 10px" width="100%" @click="pickupServiceShow = true">
                  <v-img max-width="20" class="tw-mr-[8px]" :src="require(`@/assets/svg/new.svg`)"></v-img>
                  <span class="t18 tw-font-normal">{{ $t("New pickup service") }}</span>
              </v-btn>
            </div>
            <div class="md:tw-flex md:tw-justify-between md:tw-items-center">
              <div class="tw-flex tw-justify-between tw-items-start md:tw-w-full md:tw-basis-10/12">
                <div class="tw-flex tw-flex-col tw-justify-center">
                  <div class="tw-flex tw-items-center tw-mb-[8px] md:tw-mb-0">
                    <div class="tw-body-4 tw-text-neutrals-900 tw-mr-[10px] md:t24">
                      ${{ finalPrice }} {{ currencyName }}
                    </div>
                  </div>
                  <!-- <div class="tw-hidden tw-body-4 tw-text-neutrals-600 md:tw-hidden">
                    Deposit fee: $5 {{ currency }} (10%)
                  </div> -->
                </div>
                <like></like>
              </div>
              <button
                class="tw-transition tw-btn-md tw-text-white tw-border tw-border-solid tw-border-primary-default tw-bg-primary-default tw-py-[8.5px] tw-mt-[20px] tw-w-full tw-rounded-xl md:tw-mt-0 md:tw-ml-[36px] md:tw-w-auto md:tw-basis-2/12 disabled:tw-bg-neutral-100 disabled:tw-text-base-disable disabled:tw-border-neutral-200"
                @click="bookNow" :disabled="btnDisabled">
                {{ $t("Book Now") }}
              </button>
            </div>
          </div>
        </div>
      </div>
      <div id="serviceDetails" class="serviceDetails step">
        <div class="tw-px-[30px] md:tw-px-0">
          <h2 class="title-icon-left t16 tw-mb-[20px] md:t20 xl:tw-font-bold">
            {{ $t("Service Details") }}
          </h2>
          <div v-if="content.details.length < 800">
            <div ref="details" class="editor-styleguide tw-text-base-primary t14 md:t16 md:tw-font-normal"
              v-html="content.details"></div>
          </div>
          <div v-else>
            <div :class="[
              button.details ? 'seeMore-hide' : 'seeMore-show',
              'editor-styleguide tw-text-base-primary tw-transition t14 md:t16 md:tw-font-normal',
            ]" ref="details" v-html="content.details"></div>
            <button v-show="seeMore.details" :class="[
              'seeMore tw-transition tw-btn-md tw-text-primary-1 tw-border tw-border-solid tw-border-primary-1 tw-px-[30px] tw-py-[8.5px] tw-mt-[20px] tw-w-full tw-rounded-xl hover:tw-bg-primary-3 xl:hover:tw-bg-transparent xl:tw-border-none',
              button.details ? '' : 'open',
            ]" @click="opendetail()">
              {{ $t(seeMoreDetailsText) }}
            </button>
          </div>
        </div>
      </div>
      <div id="serviceDescription" class="serviceDescription step">
        <div class="tw-px-[30px] md:tw-px-0">
          <h2 class="title-icon-left t16 tw-mb-[20px] md:t20 xl:tw-font-bold">
            {{ $t("Service Description") }}
          </h2>
          <div v-for="(item,index) in expenseRules" :key="index">
            <h3 class="t16 tw-mb-[20px] md:18 xl:t18 xl:tw-font-bold tw-pl-[10px]">
              {{ index+1 }}.&nbsp;{{ item.ItemName }}
            </h3>
            <table class="tablecss" width="100%" v-if="item.ItemType=='01'">
              <thead class="tw-bg-[#343434]">
                <tr>
                  <th class="tw-text-[#fefefe]">{{$t('Weight')}}</th>
                  <th class="tw-text-[#fefefe]">{{$t('Price (NT $, tax included)')}}</th>
                </tr>
              </thead>
              <tbody>
                <template v-if="item.StackerCostRules && item.StackerCostRules.length>0">
                  <tr v-for="item2 in item.StackerCostRules" :key="item2.Guid">
                    <td width="50%">{{item2.Weight_Min}}{{$t('More than tons to')}}{{item2.Weight_Max}}{{$t('Less than tons')}}</td>
                    <td width="50%">{{item2.Price}}<span v-if="item2.PricingMode=='N'">{{$t('NTD/piece')}}</span><span v-else>{{$t('NTD/ton')}}</span></td>
                  </tr>
                </template>
              </tbody>
            </table>
            <div ref="details" class="editor-styleguide tw-text-base-primary t14 md:t16 md:tw-font-normal"
              v-html="item.ExpensesMemo"></div>
          </div>
          <!-- <div v-if="content.details.length < 800">
            <div ref="details" class="editor-styleguide tw-text-base-primary t14 md:t16 md:tw-font-normal"
              v-html="content.details"></div>
          </div>
          <div v-else>
            <div :class="[
              button.details ? 'seeMore-hide' : 'seeMore-show',
              'editor-styleguide tw-text-base-primary tw-transition t14 md:t16 md:tw-font-normal',
            ]" ref="details" v-html="content.details"></div>
            <button v-show="seeMore.details" :class="[
              'seeMore tw-transition tw-btn-md tw-text-primary-1 tw-border tw-border-solid tw-border-primary-1 tw-px-[30px] tw-py-[8.5px] tw-mt-[20px] tw-w-full tw-rounded-xl hover:tw-bg-primary-3 xl:hover:tw-bg-transparent xl:tw-border-none',
              button.details ? '' : 'open',
            ]" @click="opendetail()">
              {{ $t(seeMoreDetailsText) }}
            </button>
          </div> -->
        </div>
      </div>
      <div id="cancellationPolicy" class="cancellationPolicy step tw-px-[30px] md:tw-px-0">
        <h2 class="title-icon-left t16 tw-mb-[20px] md:t20 xl:tw-font-bold">
          {{ $t("Cancellation Policy") }}
        </h2>
        <div v-if="content.cancellation_policy.length < 800">
          <div ref="cancellation_policy" class="editor-styleguide tw-text-base-primary t14 md:t16 md:tw-font-normal"
            v-html="content.cancellation_policy">
          </div>
        </div>
        <div v-else>
          <div :class="[
            button.cancellation_policy ? 'seeMore-hide' : 'seeMore-show',
            'editor-styleguide tw-text-base-primary tw-transition t14 md:t16 md:tw-font-normal',
          ]" ref="cancellation_policy" v-html="content.cancellation_policy"></div>
          <button v-show="seeMore.cancellation_policy" :class="[
            'seeMore tw-transition tw-btn-md tw-text-primary-1 tw-border tw-border-solid tw-border-primary-1 tw-px-[30px] tw-py-[8.5px] tw-mt-[20px] tw-w-full tw-rounded-xl hover:tw-bg-primary-3 xl:hover:tw-bg-transparent xl:tw-border-none',
            button.cancellation_policy ? '' : 'open',
          ]" @click="openCancellationPolicy()">
            {{ $t(seeMoreCancellationPolicyText) }}
          </button>
        </div>
      </div>
      <div v-show="content.faq && content.faq.length>0" id="faq" ref="faq" class="step tw-px-[30px] md:tw-px-0">
        <h2 class="title-icon-left t16 tw-mb-[20px] md:t20 xl:tw-font-bold">
          {{ $t("FAQ") }}
        </h2>
        <faq :faq="content.faq" class="tw-z-[8]"></faq>
      </div>
      <div id="contactUs" class="step tw-px-[30px] md:tw-px-0">
        <h2 class="title-icon-left t16 tw-mb-[20px] md:t20 xl:tw-font-bold">
          {{ $t("Contact Us") }}
        </h2>
        <div class="tw-body-3 tw-text-base-primary tw-mb-[20px]">
          886-2-2725-5000
        </div>
        <div class="tw-body-3 tw-text-base-primary">info@showeasy.com</div>
      </div>
      <div :class="[
        'tw-bg-white tw-flex tw-flex-cols tw-justify-between tw-items-center tw-px-[30px] tw-py-[16px] tw-w-full',
        fixBar
          ? 'tw-fixed tw-left-[0px] tw-bottom-[0px] tw-z-[8] tw-shadow-[1px_0px_2px_rgba(0,0,0,0.25)]'
          : 'tw-hidden',
      ]">
        <div :class="[
          'tw-flex tw-flex-col tw-justify-between tw-items-start tw-grow md:tw-w-full md:tw-flex-row md:tw-items-center',
        ]">
          <div class="tw-flex tw-items-center tw-mb-[12px] md:tw-mb-0">
            <div class="t16 tw-text-neutrals-900 tw-mr-[10px] md:t20 md:tw-mr-0">
              ${{ finalPrice }} {{ currencyName }}
            </div>
          </div>
          <div class="tw-flex tw-justify-center tw-items-center tw-w-full md:tw-w-fit">
            <like></like>
            <button
              class="tw-transition tw-whitespace-nowrap tw-body-4 tw-text-white tw-border tw-border-solid tw-border-primary-default tw-bg-primary-default tw-ml-[22px] tw-px-[24px] tw-py-[8.5px] tw-rounded-xl tw-w-full md:tw-body-2 md:tw-min-w-[130px] md:tw-max-w-[130px] md:tw-mt-0 disabled:tw-bg-neutral-100 disabled:tw-text-base-disable disabled:tw-border-neutral-200"
              @click="bookNow" :disabled="btnDisabled">
              {{ $t("Book Now") }}
            </button>
          </div>
        </div>
      </div>
    </section>
    <section
      class="sercion-4 tw-px-[30px] tw-grid tw-grid-cols-1 tw-gap-[40px] tw-z-[8] md:tw-px-[30px] xl:tw-px-0 xl:tw-col-start-1 xl:tw-row-start-4">
      <detailsModal :detail="content.details"></detailsModal>
      <cancellationPolicyModal :cancellationPolicy="content.cancellation_policy"></cancellationPolicyModal>
    </section>
    <section class="sercion-5 tw-hidden md:tw-px-[30px] xl:tw-px-0 xl:tw-block xl:tw-row-start-2 xl:tw-row-end-5">
      <div class="tw-mb-[40px]">
        <sidebarSelectOption :totalPrice="finalPrice" :currency="currencyName" :confirmationTime="content.confirmationTime">
        </sidebarSelectOption>
      </div>
      <sideBarMenu :fixBarList="fixBarList" :currStep="currStep"></sideBarMenu>
    </section>
    <v-dialog v-model="dialog" :width="423"
      @click:outside="colseDialog()">
      <v-card class="tw-p-[30px]">
        <v-spacer class="d-flex tw-justify-between align-center tw-mb-[30px]">
            <div class="tw-text-[20px] tw-text-black tw-font-bold">
              {{ $t("Remind") }}
            </div>
          <v-btn @click="colseDialog()" icon>
            <v-icon> mdi-close </v-icon>
          </v-btn>
        </v-spacer>
        <v-spacer class="tw-mb-[40px]">
          <div class="tw-text-[16px] tw-text-neutrals-800">
            {{$t("Your goods are of special size. Please contact ShowEasy service personnel (02) 2725-5000")}}
          </div>
        </v-spacer>
        <div class="tw-text-[18px] tw-rounded-[16px] tw-text-center">
          <span class="tw-text-primary-1 t18">{{countdown}}</span>s{{ $t("userProfile.unLinkOK") }}
        </div>
      </v-card>
    </v-dialog>
    <loading :isLoading="isLoading"></loading>
  </div>
</template>
<script>
import Breadcrumbs from "@/components/Breadcrumbs";
import slideshow from "@/components/swiper/serviceContent.vue";
import detailsModal from "@/components/service/contentModal/DetailsModal.vue";
import cancellationPolicyModal from "@/components/service/contentModal/cancellationPolicyModal.vue";
import selectExhibition from "@/components/service/content/selectExhibition.vue";
import selectExhibitionService from "@/components/service/content/selectExhibitionService.vue";
import quantitySelectGroup from "@/components/service/content/quantitySelectGroup.vue";
import pickupInformation from "@/components/service/content/pickupInformation.vue";
import faq from "@/components/service/content/faq.vue";
import sidebarSelectOption from "@/components/service/content/sidebarSelectOption.vue";
import sideBarMenu from "@/components/service/content/sideBarMenu.vue";
import Swiper from "swiper/bundle";
import { scrollama } from "scrollama";
import mobileFixTopBar from "@/components/swiper/mobileFixTopBar.vue";
import like from "@/components/newComponent/like/like.vue";
import { filterData,dateIsInWeekend } from "~/utils/common";
import loading from "@/components/newComponent/loading/loading.vue";
export default {
  name: 'ServiceContent',
  layout: "login",
  auth: false,
  components: {
    Swiper,
    scrollama,
    Breadcrumbs,
    slideshow,
    detailsModal,
    cancellationPolicyModal,
    selectExhibition,
    selectExhibitionService,
    quantitySelectGroup,
    pickupInformation,
    faq,
    sidebarSelectOption,
    sideBarMenu,
    mobileFixTopBar,
    like,
    loading,
  },
  data() {
    return {
      dialog: false,
      isLoading: false,
      showCardItem: false,
      pickupServiceShow: false,
      apiUrl: process.env.SERVICE_CONSOLE,
      btnDisabled: process.env.ENV == 'production',
      currStep: null,
      stickySwiper: null,
      content: {
        banners: [],
        country: null,
        city: null,
        name: "",
        highlights: '',
        details: '',
        cancellation_policy: "",
        saved: false,
        confirmation_time: 24,
        supplier: {
          logo: require('/assets/img/Footer.png'),
          brand: 'ShowEasy'
        },
        available_sections: null,
        timeStatus: 'active',
        dateStatus: 'active',
        times: [{
          start_time: '2023-02-06',
          end_time: '2023-03-06',
        },{
          start_time: '2023-02-06',
          end_time: '2023-03-06',
        },{
          start_time: '2023-02-06',
          end_time: '2023-03-06',
        }],
        start: '2023-02-06',
        end: '2023-06-06',
        faq: [],
        confirmationTime: '',
        additionalServices: [
          {
            name: '司機英文服務'
          },{
            name: '兒童安全座椅'
          },{
            name: '增加一個停靠點'
          },{
            name: '協助飯店入住（每個人，限接機）'
          }
        ],
        
      },
      list: [],
      choicesIndex: 0,
      countrycode: [],
      regionName: [],
      elementHeight: {
        details: null,
        cancellation_policy: null,
        faq: null,
      },
      seeMore: {
        details: true,
        cancellation_policy: true,
      },
      button: {
        details: true,
        cancellation_policy: true,
      },
      offset: {
        packageOptions: 0,
        faq: 0,
      },
      contentId: "",
      packageId: "",
      packageName: "",
      window: {
        width: 0,
      },
      fixBar: false,
      fixBarList: [
        { id: "packageOptions", title: "Package Options", show: true },
        { id: "serviceDetails", title: "Service Details", show: true },
        { id: "serviceDescription", title: "Service Description", show: true },
        { id: "cancellationPolicy", title: "Cancellation Policy", show: true },
        { id: "faq", title: "FAQ", show: false },
        { id: "contactUs", title: "Contact Us", show: true },
      ],
      activePackage: 0,
      totalPrice: 0,
      additionTotalPrice: [],
      customPlanPrice: [],
      selectDates: '',
      typeGroupList: [],
      selectQuantityList: [],
      selectYearList: [],
      selectMonthList: [],
      selectAddressList: [],
      selectExhibitionServiceList: [{id: 0,show: true}],
      selectPackageList: [],
      quantitySelectList: [],
      deliveryType: '',
      expenseRules: [],
      finalPrice: "0",
      showServiceItem: 0,
      currencyName: '',
      currencyID: '',
      previewFile: '',
      countdown: 15,
      rulesShow: false,
    };
  },
  async created() {
    this.isLoading = true;
    let arr = [];
    for(let i=1;i<11;i++){
        let target = {
        id: i+"",
        name: i+"",
      };
      arr.push(target);
    }
    
    this.selectQuantityList = arr;
    await this.getBanners();
    await this.getServiceData();
    await this.getExtensionYear();
    await this.getExtensionMonth();
    // await this.getExhibitions();
    await this.getQuantitySelects();
    await this.getServiceItems();
    await this.getReceivingCitys();
    // await this.getFaq();
    await this.getPackages();
    await this.getInfoItem();
    // await this.addViewCount();
    // await this.getYouMightLikeData();
    // await this.getRegionName();
    // await this.getCountryCode();
    if (process.browser) {
      window.addEventListener("resize", this.handleResize);
    }
    this.handleResize();
    this.$nextTick(()=>{
      this.isLoading = false;
    });
  },
  mounted() {
    let vm = this;
    vm.contentId = vm.$route.params.id;
    vm.offset.packageOptions = vm.$refs.packageOptions.offsetTop;
    vm.offset.faq = vm.$refs.faq.offsetTop;
    vm.$nextTick(function () {
      // instantiate the scrollama
      const scrollama = require("scrollama");
      const scroller = scrollama();
      // setup the instance, pass callback functions
      scroller
        .setup({
          step: ".service-content .step",
          offset: 0.6,
        })
        .onStepEnter((response) => {
          // { element, index, direction }
          vm.currStep = response.element.id;
          let fb_messenger = document.querySelector(".fb_dialog_content");
          if (response.index > 3) {
            vm.$refs.stickySwiper.slideTo(4);
          } else {
            vm.$refs.stickySwiper.slideTo(0);
          }
          if (response.index >= 1 && response.index < 6) {
            vm.fixBar = true;
            if (fb_messenger) {
              fb_messenger.classList.add("hasBar");
            }
          } else {
            vm.fixBar = false;
            if (fb_messenger) {
              fb_messenger.classList.remove("hasBar");
            }
          }
        })
        .onStepExit((response) => {
          // { element, index, direction }
          vm.currStep = response.element.id;
          let fb_messenger = document.querySelector(".fb_dialog_content");
          if (response.index >= 1 && response.index < 6) {
            vm.fixBar = true;
            if (fb_messenger) {
              fb_messenger.classList.add("hasBar");
            }
          } else {
            vm.fixBar = false;
            if (fb_messenger) {
              fb_messenger.classList.remove("hasBar");
            }
          }
        });
    })
  },
  computed: {
    currency() {
      return this.$store.getters.getCurrency;
    },
    seeMoreDetailsText() {
      if (this.button.details == false) {
        return "See less";
      } else {
        return "See more";
      }
    },
    seeMoreCancellationPolicyText() {
      if (this.button.cancellation_policy == false) {
        return "See less";
      } else {
        return "See more";
      }
    },
    // finalPrice() {
    //   let option = 0;
    //   let custom = 0;
    //   let addition = 0;
    //   if (this.additionTotalPrice) {
    //     this.additionTotalPrice.forEach((item) => {
    //       addition += Number(item.total);
    //     });
    //   }
    //   if (this.customPlanPrice) {
    //     this.customPlanPrice.forEach((item) => {
    //       custom += Number(item.total);
    //     });
    //   }
    //   if (this.totalPrice) {
    //     this.totalPrice.forEach((item) => {
    //       option += Number(item.total);
    //     });
    //   }
    //   if (this.currency == 'USD') {
    //     return Number(addition + custom + option).toFixed(2).toLocaleString();
    //   } else {
    //     return Number(addition + custom + option).toLocaleString();
    //   }
    // },
  },
  watch: {
    currency: {
      handler: function () {
        this.getServiceData();
        // this.getPackages();
      },
    },
    // activePackage: {
    //   handler: function (newVal, oldVal) {
    //     if (newVal !== oldVal) {
    //       this.customPlanPrice = [];
    //       this.totalPrice = [];
    //     }
    //   },
    // },
    // choicesIndex: {
    //   handler: function (newVal, oldVal) {
    //     if (newVal !== oldVal) {
    //       this.customPlanPrice = [];
    //       this.totalPrice = [];
    //     }
    //   },
    // }
  },
  destroyed() {
    if (process.browser) {
      window.removeEventListener("resize", this.handleResize);
    }
  },
  methods: {
    async getBanners() {
      await this.$axios.get(`/trending/api/Onsite/BannerFiles?Lang=${this.$i18n.localeProperties["langQuery"]}&ServiceID=${this.$route.params.id}`)
        .then((response) => {
          if(response && response.data && response.data.DATA && response.data.DATA.rel){
            let data = response.data.DATA.rel
            if(data.length>0){
              this.content.banners = data.map((item) => {
                return {
                  banner_id: item.FileID,
                  image: item.FilePath,
                };
              });
            }
          }
        })
        .catch((error) => console.log(error));
    },
    async getExtensionYear() {
      await this.$axios.get(`/trending/api/Onsite/ExtensionYear?Lang=${this.$i18n.localeProperties["langQuery"]}&ServiceID=${this.$route.params.id}`)
        .then((response) => {
          if(response && response.data && response.data.DATA && response.data.DATA.rel){
            let data = response.data.DATA.rel
            if(data.length>0){
              this.selectYearList = data.map((item) => {
                return {
                  id: item.ArgumentID,
                  name: item.ArgumentValue,
                };
              });
            }
          }
        })
        .catch((error) => console.log(error));
    },
    async getExtensionMonth() {
      await this.$axios.get(`/trending/api/Onsite/ExtensionMonth?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.length>0){
              this.selectMonthList = data.map((item) => {
                return {
                  id: item.ArgumentID,
                  name: item.ArgumentValue,
                };
              });
            }
          }
        })
        .catch((error) => console.log(error));
    },
    async getServiceItems() {
      this.showCardItem = false;
      await this.$axios
        .get(`trending/api/Onsite/ServiceItems?Lang=${this.$i18n.localeProperties["langQuery"]}&ServiceID=${this.$route.params.id}`)
        .then((response) => {
          if(response && response.data && response.data.DATA && response.data.DATA.rel){
            let data = response.data.DATA.rel
            if(data.length>0){
              this.typeGroupList = data.map((item) => {
                if(item.ItemType=="02"){
                  this.showCardItem = true;
                }
                return {
                  package_id: item.ArgumentID,
                  name: item.ArgumentValue,
                  itemType: item.ItemType
                };
              });
            }
          }
        })
        .catch((error) => console.log(error));
    },

    // async getFaq() {
    //   await this.$axios
    //     .get(
    //       `${this.apiUrl}/user-services/faqs?service_id=${this.$route.params.id}&lang_code=${this.$i18n.localeProperties["langQuery"]}`
    //     )
    //     .then((res) => {
    //       this.content.faq = res.data;
    //     })
    //     .catch((error) => console.log(error));
    // },
    async getPackages() {
      await this.$axios
        .get(`trending/api/Onsite/PackingTypes?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.length>0){
              this.selectPackageList = data.map((item) => {
                return {
                  id: item.ArgumentID,
                  name: item.ArgumentValue,
                };
              });
            }
          }
        })
        .catch((error) => console.log(error));
    },
    async getQuantitySelects() {
      await this.$axios
        .get(`trending/api/Onsite/TruckTypes?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.length>0){
              this.quantitySelectList = data;
            }
          }
        })
        .catch((error) => console.log(error));
    },
    async getReceivingCitys() {
      await this.$axios
        .get(`trending/api/Onsite/ReceivingCitys?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.length>0){
              this.selectAddressList = data.map((item) => {
                return {
                  id: item.ArgumentID,
                  name: item.ArgumentValue,
                };
              });
            }
          }
        })
        .catch((error) => console.log(error));
    },
    async getServiceData() {
      await this.$axios
        .get(`/trending/api/Onsite/Info?Lang=${this.$i18n.localeProperties["langQuery"]}&ServiceID=${this.$route.params.id}`)
        .then((response) => {
          if(response && response.data && response.data.DATA && response.data.DATA.rel){
            let data = response.data.DATA.rel
            if(data){
              this.content.name = data.ServiceName;
              this.content.highlights = data.Features;
              this.content.details = data.Details;
              this.content.cancellation_policy = data.CancelPolicy;
              this.content.faq = data.FQAs;
              this.currencyName = data.CurrencyName;
              this.currencyID = data.CurrencyID;
              this.previewFile = data.PreviewFile;
              this.finalPrice = data.MinPrice == null ? "0" : data.MinPrice +"";
              this.content.supplier.brand = data.SupplierName;
              this.content.supplier.logo = data.SupplierLogo;
              for(let i=0;i<this.fixBarList.length;i++){
                if(this.fixBarList[i].id=="faq"){
                  if(data.FQAs && data.FQAs.length>0){
                    this.fixBarList.show = true;
                  }else{
                    this.fixBarList.show = false;
                  }
                  break;
                }
              }
              this.content.confirmationTime = data.ConfirmDays;
            }
          }
          // this.content.country = res.data.country;
          // this.content.city = res.data.city;
          // this.content.highlights = res.data.highlights;
          // this.content.details = res.data.details;
          // this.content.cancellation_policy = res.data.cancellation_policy;
          // this.content.supplier = res.data.supplier;
          // this.content.available_sections = res.data.available_sections;
          // this.content.times = res.data.available_sections.times;
          // this.content.timeStatus = res.data.available_sections.time_status;
          // this.content.dateStatus = res.data.available_sections.date_status;
          // this.content.start = res.data.available_sections.start;
          // this.content.end = res.data.available_sections.end;
          // this.content.payment_currency = res.data.payment_currency;
          // this.content.confirmationTime = res.data.confirmation_time.toString();
        })
        .catch((error) => console.log(error));
    },
    async getInfoItem() {
      await this.$axios
        .get(`/trending/api/Onsite/InfoItem?Lang=${this.$i18n.localeProperties["langQuery"]}&ServiceID=${this.$route.params.id}`)
        .then((response) => {
          if(response && response.data && response.data.DATA && response.data.DATA.rel){
            let data = response.data.DATA.rel
            if(data.length>0){
              this.expenseRules = data;
            }
          }
        })
        .catch((error) => console.log(error));
    },
    async addViewCount() {
      let Obj = {
        service_id: `${this.$route.params.id}`,
        lang_code: `${this.$i18n.localeProperties["langQuery"]}`,
        add_number: 1,
      };
      await this.$axios
        .put(`${this.apiUrl}/user-services/view-counts`, Obj)
        .then((res) => { })
        .catch((error) => console.log(error));
    },
    opendetail() {
      if (this.window.width >= 1366) {
        this.button.details = !this.button.details;
      } else {
        this.$modal.show("Details");
      }
    },
    openCancellationPolicy() {
      if (this.window.width >= 1366) {
        this.button.cancellation_policy = !this.button.cancellation_policy;
      } else {
        this.$modal.show("cancellationPolicy");
      }
    },
    handleResize() {
      if (process.browser) {
        this.window.width = window.innerWidth;
      }
    },
    bookNow() {
      let validators = this.$refs.ref_selectExhibition.validators();
      if(validators==false){
        return false;
      }
      if(this.selectExhibitionServiceList.length>0){
        for(let i=0;i<this.selectExhibitionServiceList.length;i++){
          let ref = eval("this.$refs.ref_selectExhibitionitem"+this.selectExhibitionServiceList[i].id)[0];
          if(ref !=undefined){
            validators = ref.validators();
            if(validators==false){
              ref.show = true;
              return false;
            }
          }
        }
      }
      
      let selectExhibitionData = this.$refs.ref_selectExhibition.formData;
      let selectExhibitionServiceData = [];
      if(this.selectExhibitionServiceList.length>0){
        for(let i=0;i<this.selectExhibitionServiceList.length;i++){
          let ref = eval("this.$refs.ref_selectExhibitionitem"+this.selectExhibitionServiceList[i].id)[0];
          if(ref !=undefined){
            let target = ref.formData;
            selectExhibitionServiceData.push(target);
          }
        }
      }
      let quantityData = this.$refs.ref_quantitySelectGroup.formData;
      if(quantityData.selectList.length>0){
        if(this.showCardItem){
          validators = this.$refs.ref_quantitySelectGroup.validators();
          if(validators==false){
            this.pickupServiceShow = true;
            return false;
          }
          validators = this.$refs.ref_pickupService.validators();
          if(validators==false){
            this.pickupServiceShow = true;
            return false;
          }
        }
      }
      // let pickupServiceData = this.$refs.ref_pickupService.formData;
      if(this.rulesShow){
        this.ChangeCosts(null);
        return false;
      }
      this.$router.push(
      { 
        path: this.localePath("/service/checkout/" + this.$route.params.id), 
        //携带需要传递的参数
        query: {
          selectExhibitionData: encodeURIComponent(JSON.stringify(selectExhibitionData)),
          selectExhibitionServiceData: encodeURIComponent(JSON.stringify(selectExhibitionServiceData)),
          quantityData: encodeURIComponent(JSON.stringify(quantityData)),
          // pickupServiceData: encodeURIComponent(JSON.stringify(pickupServiceData)),
          totalPrice: this.totalPrice,
          currencyName: encodeURIComponent(this.currencyName),
          previewFile: encodeURIComponent(this.previewFile),
          title: encodeURIComponent(this.content.name)
        }
      });
    },
    // choicesIdx(data) {
    //   let vm = this;
    //   vm.choicesIndex = data;
    // },
    addExhibitionService(){
      const arr = this.selectExhibitionServiceList.map(({id})=> id);
      let max = arr.length>0 ? Math.max.apply(null, arr) : 0;
      this.selectExhibitionServiceList.push({id: max+1,show:true});
      this.showServiceItem = max+1;
    },
    delExhibitionService(value){
      if(this.selectExhibitionServiceList.length>0){
        for(let i=0;i<this.selectExhibitionServiceList.length;i++){
          if(value == this.selectExhibitionServiceList[i].id){
            // let index = this.selectExhibitionServiceList.indexOf(this.selectExhibitionServiceList[i]);
            this.selectExhibitionServiceList.splice(i, 1);
            break;
          }
        }
        
      }
      this.ChangeCosts(null);
    },
    deletePickupSerivce(){
      this.pickupServiceShow = false;
      if(this.$refs.ref_quantitySelectGroup){
        this.$refs.ref_quantitySelectGroup.clearAll();
      }
    },
    ChangeCosts(data){
      let totalPrice = 0;
      this.totalPrice = 0;
      this.rulesShow = false;
      // let selectExhibitionData = this.$refs.ref_selectExhibition.formData;
      let selectExhibitionServiceData = [];
      if(this.selectExhibitionServiceList.length>0){
        for(let i=0;i<this.selectExhibitionServiceList.length;i++){
          let ref = eval("this.$refs.ref_selectExhibitionitem"+this.selectExhibitionServiceList[i].id)[0];
          if(ref !=undefined){
            let target = ref.formData;
            selectExhibitionServiceData.push(target);
          }
        }
      }
      if(selectExhibitionServiceData.length>0){
        for(let i=0;i<selectExhibitionServiceData.length;i++){
          let arr = selectExhibitionServiceData[i].selectServiceItems;
          if(arr.length>0){
            for(let j=0;j<arr.length;j++){
               if(arr[j].itemType == "01"){
                totalPrice += this.stackerCostRules(selectExhibitionServiceData[i],arr[j]);
                if(totalPrice==-1){
                  this.totalPrice = 0;
                  this.finalPrice = "0";
                  this.rulesShow = true;
                  return false;
                }
               }else if(arr[j].itemType == "02"){
                
               }else if(arr[j].itemType == "03" || arr[j].itemType == "04" || arr[j].itemType == "05" || arr[j].itemType == "06"){
                totalPrice += this.OtherCostRules(selectExhibitionServiceData[i],arr[j]);
                if(totalPrice==-1){
                  this.totalPrice = 0;
                  this.finalPrice = "0";
                  this.rulesShow = true;
                  return false;
                }
               }
            }
          }
        }
      }
      let quantityData = this.$refs.ref_quantitySelectGroup.formData;
      if(quantityData.selectList.length>0){
        totalPrice += this.TruckCostRules();
      }
      this.totalPrice = Math.round(totalPrice);
      this.finalPrice = Math.round(Number(totalPrice)).toLocaleString();
    },
    // 堆高機
    stackerCostRules(data1,data2){
      let price = 0;
      let tmpWeight = 0;//Number(data1.weight)/1000;
      // 材積重 長x寬x高/6000 得到噸
      if((data1.length =="" && data1.width=="" && data1.height=="") && data1.weight!=""){
        tmpWeight = Number(data1.weight)/1000;
      }else if((data1.length !="" && data1.width!="" && data1.height!="") && data1.weight==""){
        tmpWeight = Number(data1.length)*Number(data1.width)*Number(data1.height)/6000/1000;
      }else if(data1.length !="" && data1.width!="" && data1.height!="" && data1.weight!=""){
        let volumeWeight = Number(data1.length)*Number(data1.width)*Number(data1.height)/6000/1000;
        // 比較誰大
        if(volumeWeight>Number(data1.weight)/1000){
          tmpWeight = volumeWeight;
        }else{
          tmpWeight = Number(data1.weight)/1000;
        }
      }
      if(Number(data1.length) > 1000 || Number(data1.width) > 1000 || Number(data1.height)>330){
        this.dialog = true;
        this.openTimer();
        return -1;
      }
      if(tmpWeight==0){
        return price;
      }
      if(this.expenseRules.length>0){
        for(let i=0;i<this.expenseRules.length;i++){
          let subArr = this.expenseRules[i].StackerCostRules;
          if(this.expenseRules[i].Guid == data2.package_id && subArr.length>0){
            for(let j=0;j<subArr.length;j++){
              // 需要判斷按數量還是重量
              if(subArr[j].Weight_Min!="" && subArr[j].Weight_Max!=""){
                if(Number(subArr[j].Weight_Min)<=tmpWeight && Number(subArr[j].Weight_Max)>=tmpWeight){
                  if(subArr[j].PricingMode=="N"){
                    price = subArr[j].Price;
                  }else{
                    price = subArr[j].Price*tmpWeight;
                  }
                  break;
                }
              }
            }
            break;
          }
        }
      }
      let num = (data1.quantity =="" || data1.quantity =="0") ? 0 : Number(data1.quantity);
      price = price*num;
      return price;
    },
    TruckCostRules(){
      let price = 0;
      let quantityData = this.$refs.ref_quantitySelectGroup.formData;
      let pickupServiceData = this.$refs.ref_pickupService.formData;
      if(this.expenseRules.length>0){
        let list = filterData({ItemType: '02'},this.expenseRules);
        if(list.length>0){
          if(list[0].TruckCostRules.length>0 && quantityData.selectList.length>0 && pickupServiceData.address1!="" && pickupServiceData.address1!="0"){
            price += this.updateForData(quantityData.selectList,list[0].TruckCostRules,pickupServiceData.address1);
          }
          if(list[0].TruckMarkupByModel.length>0 && quantityData.truckList.length>0){
            price += this.updateForData(quantityData.truckList,list[0].TruckMarkupByModel,null);
          }
          // 壓車費
          if(list[0].TruckEscortCostRules.length>0 && pickupServiceData.delivery_type=="2" && quantityData.selectList.length>0 
            && list[0].EscortFreeCityID!="" && pickupServiceData.address1!="0"){
            price += this.updateForData(quantityData.selectList,list[0].TruckEscortCostRules,list[0].EscortFreeCityID);
          }
          if(list[0].TruckHolidayPay.length>0 && pickupServiceData.select_date!=""){
            let inWeekend = dateIsInWeekend(pickupServiceData.select_date);
            if(inWeekend==5 && pickupServiceData.delivery_type=="2"){
              price += this.updateForData(quantityData.selectList,list[0].TruckHolidayPay,null);
            }else if(inWeekend==6 && pickupServiceData.delivery_type=="2"){
              price += this.updateForData(quantityData.selectList,list[0].TruckHolidayPay,null)*2;
            }else if(inWeekend==0 && pickupServiceData.delivery_type=="2"){
              price += this.updateForData(quantityData.selectList,list[0].TruckHolidayPay,null);
            }else if(inWeekend==6 && pickupServiceData.delivery_type=="1"){
              price += this.updateForData(quantityData.selectList,list[0].TruckHolidayPay,null);
            }else if(inWeekend==0 && pickupServiceData.delivery_type=="1"){
              price += this.updateForData(quantityData.selectList,list[0].TruckHolidayPay,null);
            }
          }
        }
      }
      return price;
    },
    updateForData(data1,data2,address1){
      let price = 0;
      if(data1.length>0 && data2.length>0){
        for(let n=0;n<data1.length;n++){
          let truckID = data1[n].id;
          let num = data1[n].number;
          for(let i=0;i<data2.length;i++){
            if(data2[i].CityID!=undefined && data2[i].CityID!="" && data2[i].TruckID!=""){
              if(data2[i].CityID==address1 && data2[i].TruckID == truckID){
                price += data2[i].Price*num;
                break;
              }
            }else if(data2[i].CityID ==undefined && data2[i].TruckID!=""){
              if(data2[i].TruckID == truckID){
                price += data2[i].Price*num;
                break;
              }
            }
          }
        }
      } 
      return price;
    },
    OtherCostRules(data1,data2){
      let price = 0;
      let tmpValue = 0;
      if(data1.length =="" && data1.width=="" && data1.height==""){
        return price;
      }else{
        tmpValue = Number(data1.length)*Number(data1.width)*Number(data1.height)/1000000;
      }
      if(Number(data1.length) > 1000 || Number(data1.width) > 1000 || Number(data1.height)>330){
        this.dialog = true;
        this.openTimer();
        return -1;
      }
      if(this.expenseRules.length>0){
        for(let i=0;i<this.expenseRules.length;i++){
          let subArr = this.expenseRules[i].OtherCostRules;
          if(this.expenseRules[i].Guid == data2.package_id && subArr.length>0){
            for(let j=0;j<subArr.length;j++){
              if(subArr[j].Unit_Min!=""){
                if(Number(subArr[j].Unit_Min)<tmpValue){
                  price = subArr[j].Price*tmpValue;
                }else{
                  price = subArr[j].Price*subArr[j].Unit_Min;
                }
                break;
              }
            }
            break;
          }
        }
      }
      let num = (data1.quantity =="" || data1.quantity =="0") ? 0 : Number(data1.quantity);
      price = price*num;
      return price;
    },
    colseDialog(){
      this.dialog = false;
    },
    openTimer(){
      this.countdown = 15;
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.timer);
          this.dialog = false;
        }
      }, 1000);
    },
  },
};
</script>
<style lang="scss" scoped>
:deep() {

  // .serviceDetails,
  // .cancellationPolicy {
  //   p {
  //     margin-bottom: 6px;
  //   }
  // }
}

.service-content {


  .serviceDetails img {
    width: 100%;
    height: auto;
  }

  .fix-right {
    position: fixed;
    top: 120px;
    right: 0 px;
    max-width: 400px;
    height: auto;
    z-index: 100;
  }

  .title-icon-left {
    background-position: left 0px center;
  }

  ul {
    padding-left: 24px;
  }

  img {
    // image-rendering: pixelated;
  }
}

.seeMore {
  &-hide {
    position: relative;
    max-height: 295px;
    overflow: hidden;

    &::after {
      content: "";
      display: block;
      position: absolute;
      background: url("~/assets/img/gradient_white.png") repeat-x left bottom;
      width: 100%;
      height: 130px;
      left: 0;
      bottom: 0;
      z-index: 1;
      transition: bottom 0.5s;
    }
  }

  &-show {
    position: relative;
    max-height: 100%;
    overflow: initial;

    &::after {
      display: none;
    }
  }

  @media screen and (min-width: 1366px) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
      content: "";
      display: inline-block;
      position: relative;
      background-image: url("~/assets/svg/arrow-down-primary.svg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100%;
      width: 9px;
      height: 6px;
      margin-left: 16px;
    }

    &.open {
      &::after {
        transform: rotate(180deg);
      }
    }
  }
}

.section-7 {
  >div {
    box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.1);
  }
}
.tablecss{
  line-height: 36px;
  text-align: center;
  color: #343434;
  // border-radius: 10px;
}
table{
  border: 1px solid #cecece;
  border-collapse: separate;
  border-radius: 10px;
  text-align: center;
  border-spacing: 0px;
  // padding: 10px;
}
table thead{
  border-radius: 10px;
}
th{
  border: 1px solid #343434;
  text-align: center;
}
td{
  border-top: 1px solid #cecece;
  text-align: center;
}
table thead>tr:first-of-type>th:first-of-type{
  border-top-left-radius: 10px;
}
table thead>tr:first-of-type>th:last-of-type{
  border-top-right-radius: 10px;
}
table tfoot>tr:last-of-type>td:first-of-type{
  border-bottom-left-radius: 10px;
}
table tfoot>tr:last-of-type>td:last-of-type{
  border-bottom-right-radius: 10px;
}
table::before{
  border-radius: 10px;
}
// table tr:first-child th:first-child {
//   border-top-left-radius: 10px; /* 设置table左下圆角 */
// }
 
// table tr:first-child th:last-child {
//   border-top-right-radius: 10px; /* 设置table右下圆角 */
// }
 
table tr:last-child td:first-child {
  border-bottom-left-radius: 10px; /* 设置table左下圆角 */
}
 
table tr:last-child td:last-child {
  border-bottom-right-radius: 10px; /* 设置table右下圆角 */
}
</style>