<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
    })

    // if ($q.platform.is.desktop) {
    //   if ($q.screen.gt.md) {
    //     data.pages.PageSize = 12
    //   } else {
    //     data.pages.PageSize = 9
    //   }
    // } else {
    //   data.pages.PageSize = 10
    // }

    const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any
    watch(search, (n, o) => {
      if (data.loading) return
      console.log('search change')
      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>
