<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 tickets" :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 && $q.platform.is.desktop" class="q-pt-lg">
    <q-card v-for="i in tickets" flat class="full-width q-pa-sm row q-mb-md">
      <div>
        <q-img :src="i.PicPathList[0]" :ratio="16 / 9" spinner-color="grey" spinner-size="50px" width="130px" 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>
      </div>
      <div class="q-ml-md col">
        <div class="text-subtitle1 text-weight-bolder cursor-pointer" @click="showCardHandler(i)">{{i.Name}}</div>
        <div class="fz14 text-grey-600">
          {{ $t('v102.ticket.addr') }}：
          <span>{{i.CityName}} {{i.Address}}</span>
          <q-btn color="primary" icon="map" :label="$t('v102.ticket.map')" size="sm" dense flat class="q-ml-md" @click="showCardHandler(i)"/>
        </div>
        <div>
          <q-badge v-if="i.GeographicTag" v-for="s in i.GeographicTag.split(',')" outline color="positive" :label="s" class="q-mr-md" />
          <q-badge v-if="i.ScenicSpotTag" v-for="s in i.ScenicSpotTag.split(',')" outline color="warning" :label="s" class="q-mr-md" />
        </div>
      </div>
      <div>
        <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')}}{{ $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>
    </q-card>

  </div>
  <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>
  <q-dialog v-model="showDetails">
    <ticket-card :ticket="detailsObj"></ticket-card>
  </q-dialog>
</template>

<script lang="ts">
import { ApiResult } from '../../../@types/enumHelper'
import { useQuasar } from 'quasar'
import TicketService from '../../../api/ticket'
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 TicketCard from '../TicketCard.vue'

export default defineComponent({
  components: { TicketCard },
  setup(props) {
    const $q = useQuasar()
    const $router = useRouter()
    const data = reactive({
      loading: false,
      pages: {
        PageIndex: 1,
        PageSize: 10,
        PageCount: 30
      },
      tickets: [] as any[],
      detailsObj: {} 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.getTickets()
    })

    const methods = {
      getTickets() {
        let param = Object.assign(data.pages, search.msg)
        TicketService.getTicketList(param)
          .then(r => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              data.tickets = 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
          })
      },
      toPreviewOrderHandler(id:number){
        // 
        let onldOpen = `${search.msg.OpenTime.split('/')}`
        let newOpen = onldOpen.substring(0,4) + onldOpen.substring(5,7) + onldOpen.substring(8,10)
        $router.push({ path:`/ticket/preview/${id}/${newOpen}`})
      },
      changePageHandler(n: number) {
        data.pages.PageIndex = n
        methods.getTickets()
      },
      showCardHandler(x:any){
        data.detailsObj=x
        data.showDetails=true
      }
    }
    methods.getTickets()
    return {
      ...toRefs(data),
      ...methods,
      search
    }
  }
})
</script>

<style></style>
