<template>
  <!-- <div v-if="search.msg.ViewType == 1 || $q.platform.is.mobile" class="q-pt-lg row" :class="{ 'q-col-gutter-sm': $q.platform.is.mobile, 'q-col-gutter-lg': $q.platform.is.desktop }">
    <q-card v-for="x in dataList" :class="{ 'col-4': $q.screen.lt.lg && $q.platform.is.desktop, 'col-3': $q.screen.gt.md && $q.platform.is.desktop, 'col-6': $q.platform.is.mobile && search.msg.ViewType == 1, 'col-12 q-mb-sm': $q.platform.is.mobile && search.msg.ViewType == 2 }" class="transparent" flat>
      <q-img :src="x.PicPathList[0]" :ratio="16 / 9" spinner-color="grey" spinner-size="50px" width="100%" fit="cover" class="rounded-borders">
        <template v-slot:error>
          <div class="absolute-full flex flex-center bg-blue-1 text-dark">
            {{$t('v102.ticket.load')}}
          </div>
        </template>
      </q-img>
      <q-card-section class="bg-white">
        <div class="text-subtitle1 text-weight-bolder ellipsis-2-lines cursor-pointer" :class="{ 'text-subtitle2': $q.platform.is.mobile }" @click="showCardHandler(x)">{{x.Name}}</div>
        <div class="f12 text-grey-700 ellipsis">{{$t('v102.ticket.Japan')}} {{x.ProvinceName}} {{x.CityName}} {{x.Address}}</div>
        <div class="q-mt-lg row items-center">
          <div class="text-grey-900 col" :class="{ f12: $q.platform.is.mobile, 'text-subtitle2 text-weight-bold': $q.platform.is.desktop }">
            {{ $t('v102.ticket.showtt.t1') }}
            <span class="text-weight-bolder">{{x.TicketPriceList.length}}</span>
            {{ $t('v102.ticket.showtt.t2') }}
          </div>
          <q-btn color="primary" icon="local_grocery_store" unelevated dense size="sm" :label="$q.platform.is.desktop || search.msg.ViewType == 2 ? $t('v102.ticket.buy') : $t('v102.ticket.shortBuy')" @click="toPreviewOrderHandler(x.ID)"/>
        </div>
      </q-card-section>
    </q-card>
  </div> -->

  <div v-if="search.msg.ViewType == 2" class="row wrap justify-center">
    <div class="q-py-md" style="width: 100%; overflow: auto">
      <div class="row q-pa-md q-mb-md bg-white rounded-borders">
        <div class="col"></div>
        <q-btn
          dense
          unelevated
          class="hover q-px-sm q-mr-md"
          v-for="(item, index) in 2"
          :class="{
            'bg-blue text-white': pages.Q_OrderBy == index + 1 && pages.Q_OrderBy != 0,
            'bg-grey-3': pages.Q_OrderBy != index + 1,
          }"
          @click="getList(index + 1)"
        >
          {{
            index + 1 == 1
              ? $t("v102.CharteredBus.jiageshenxu")
              : $t("v102.CharteredBus.jiagejianxu")
          }}
        </q-btn>
      </div>
      <q-card
        v-for="i in dataList"
        flat
        class="full-width row items-center q-mb-md rounded-borders"
        style="overflow: hidden"
      >
        <div>
          <q-img
            :src="i.ImageList[0]"
            :ratio="1"
            spinner-color="grey"
            spinner-size="50px"
            width="160px"
            height="100%"
            fit="cover"
            class=""
          >
            <template v-slot:error>
              <div class="absolute-full flex flex-center bg-blue-1 text-dark">
                {{ $t("v102.ticket.load") }}
              </div>
            </template>
          </q-img>
        </div>
        <div class="q-mx-md col">
          <div
            class="fz17 q-py-xs text-subtitle1 text-weight-bolder cursor-pointer"
            @click="showCardHandler(i)"
          >
            {{ i.Name }}
          </div>
          <div
            class="q-my-xs"
            v-if="i.FreeCancelDay > 0 || (i.CarType == 3 && i.TravelHours > 0)"
          >
            <q-badge
              v-if="i.FreeCancelDay > 0"
              color="light-blue-1"
              class="q-mr-md text-light-blue"
              >{{ i.FreeCancelDay + $t("v102.CharteredBus.mianfeiquxiao") }}</q-badge
            >
            <q-badge
              v-if="i.CarType == 3 && i.TravelHours > 0"
              color="light-blue-1"
              class="q-mr-md text-light-blue"
            >
              {{
                $t("v102.CharteredBus.baoche") +
                i.TravelHours +
                $t("v102.CharteredBus.xiaoshi")
              }}
            </q-badge>
          </div>
          <div class="ellipsis fz14 text-grey-6 q-my-xs">{{ i.Description }}</div>
          <div class="fz12 text-grey-6 row items-center q-my-sm">
            <div class="cursor-pointer" @click="showCardHandler(i)">
              <q-icon class="text-grey-13 q-mr-xs" name="place" size="xs"></q-icon>
              <span>{{ i.CityList2[0].CountryName }}{{ i.CityList2[0].CityName }}</span>
            </div>
            <q-btn
              color="primary"
              icon="map"
              :label="$t('v102.ticket.map')"
              size="sm"
              dense
              flat
              class="q-ml-md"
              @click="showCardHandler(i)"
            />
            <span class="q-pl-lg">{{
              $t("v102.CharteredBus.zuizaokeyudin") + ": " + i.EarlyDate
            }}</span>
          </div>
          <div class="row items-center justify-between">
            <div class="text-h6 din text-negative">
              <span>{{ i.MinPrice.toFixed(2) }}</span>
              <span class="f12 text-grey-600 q-ml-sm">
                <!-- {{$t('unit.jp')}} -->
                <span class="fz15">{{ i.CurrencyCode }}</span>
                {{ $t("hotel.col.low") }}</span
              >
            </div>
            <div class="text-right">
              <q-btn
                color="primary"
                icon="shopping_cart"
                :label="$t('v102.ticket.buy')"
                dense
                outline
                size="sm"
                @click="toPreviewOrderHandler(i.Id)"
              />
            </div>
          </div>
        </div>
      </q-card>
      <div class="bg-white q-my-md q-pa-sm rounded-borders">
        <q-pagination
          class="full-width justify-end"
          v-model="pages.PageIndex"
          color="primary"
          :max="pages.PageCount"
          :input="true"
          @update:model-value="changePageHandler"
        />
      </div>
    </div>
  </div>

  <q-dialog v-model="showDetails">
    <CharteredBusCard :ProductId="ProductId"></CharteredBusCard>
  </q-dialog>
</template>

<script lang="ts">
import { date } from "quasar";
import { ApiResult } from "../../../@types/enumHelper";
import { useQuasar } from "quasar";
import CharteredBusService from "../../../api/CharteredBus";
import message from "../../../utils/message";
import { DirtionmaryHelper } from "src/config/dictionary";
import { defineComponent, inject, reactive, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
import CharteredBusCard from "../CharteredBusCard.vue";

export default defineComponent({
  components: { CharteredBusCard },
  setup(props) {
    const $q = useQuasar();
    const $router = useRouter();
    const data = reactive({
      loading: false,
      pages: {
        PageIndex: 1,
        PageSize: 10,
        PageCount: 10,
        Q_OrderBy: 0,
      },
      dataList: [] as any[],
      ProductId: {} as any,
      showDetails: false,
    });
    const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any;
    watch(search, (n, o) => {
      if (data.loading) return;
      data.pages.PageIndex = 1;
      methods.getList();
    });

    const methods = {
      getList(index) {
        if (data.pages.Q_OrderBy == index) {
          data.pages.Q_OrderBy = 0;
        } else {
          data.pages.Q_OrderBy = index;
        }
        let param = Object.assign(data.pages, search.msg);
        CharteredBusService.getTYCarSingleProductList(param)
          .then((r) => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              data.dataList = r.data.data.pageData;
              data.pages.PageCount = r.data.data.pageCount;
            } else {
              message.errorMsg(r.data.message);
            }
          })
          .catch((e) => {
            message.errorMsg(e.message);
            data.loading = false;
          });
      },
      optionsFn(cd: any) {
        return (
          cd >= date.formatDate(date.addToDate(new Date(), { days: 0 }), "YYYY/MM/DD")
        );
      },
      toPreviewOrderHandler(id: number) {
        let onldOpen = `${search.msg.Q_Date.split("/")}`;
        let newOpen =
          onldOpen.substring(0, 4) + onldOpen.substring(5, 7) + onldOpen.substring(8, 10);
        $router.push({ path: `/vehicle/Preview/${id}/${newOpen}` });
      },
      changePageHandler(n: number) {
        data.pages.PageIndex = n;
        methods.getList(data.pages.Q_OrderBy);
      },
      showCardHandler(x: any) {
        data.ProductId = x.Id;
        data.showDetails = true;
      },
    };
    methods.getList(data.pages.Q_OrderBy);
    return {
      ...toRefs(data),
      ...methods,
      search,
    };
  },
});
</script>

<style></style>
