<template>
  <q-card class="bg-white q-py-lg column" style="max-width: 1366px; min-width: 375px; width: 70%; height: 80vh">
    <div class="q-px-lg q-mb-lg" :class="{ 'row justify-between': $q.platform.is.desktop }">
      <div :class="{ 'row items-center': $q.platform.is.desktop, '': $q.platform.is.mobile }">
        <div class="mobile-only row items-center">
          <div class="bg-info text-grey-100 rounded-borders q-mr-sm q-px-md">{{ $t('v102.ticket.jing') }}</div>
          <div class="text-weight-bold fz20 ellipsis" style="width: 280px">{{t.Name}}</div>
          <q-icon class="text-grey-13 cursor-pointer text-right q-ml-sm" name="close" size="md" v-close-popup></q-icon>
        </div>
        <div class="text-weight-bold fz20 ellipsis desktop-only">
          <span class="inline-block">{{t.Name}}
            <q-badge color="info" :label="$t('v102.ticket.jing')" />
          </span>
        </div>
        <div :class="{'q-ml-md':$q.platform.is.desktop}">
          <!-- <q-rating v-model="h.Star" size="1.5em" color="orange" :max="h.Star" readonly /> -->
        </div>
      </div>
      <q-icon class="text-grey-13 cursor-pointer desktop-only" name="close" size="md" v-close-popup></q-icon>
    </div>
    <q-scroll-area :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="col q-px-lg">
      <div class="row nowrap">
        <q-icon class="text-grey-13 q-mr-xs" name="place" size="xs"></q-icon>
        <span class="col fz14 text-weight-bold text-blick">{{t.Address}}</span>
      </div>
      <div class="q-pt-sm" :class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }">
        <div>
          <q-icon class="text-grey-13 q-mr-xs" name="phone" size="xs"></q-icon>
          <span class="fz14 text-weight-bold text-blick">{{ $t('hotel.details.zuoji') }}:</span>
          <span class="fz14 text-weight-bold text-blue q-ml-sm q-mr-md">FAX：{{t.Tel}}</span>
        </div>
        <!-- <div :class="{ 'q-mr-lg': $q.platform.is.desktop, 'q-mt-sm': $q.platform.is.mobile }">
          <span class="fz14 text-weight-bold text-blick">{{ $t('hotel.details.chuanzhen') }}:</span>
          <span class="fz14 text-weight-bold text-blue q-ml-sm">FAX：076-421-6488</span>
        </div> -->
        <div :class="{ 'q-mr-lg': $q.platform.is.desktop, 'q-mt-sm': $q.platform.is.mobile }">
          <span class="fz14 text-weight-bold text-blick">{{ $t('hotel.details.guanwang') }}:</span>
          <a class="fz14 text-weight-bold text-blue q-ml-sm" :href="t.Url" target="_blank">{{t.Url}}</a>
        </div>
      </div>
      <div class="q-py-lg no-wrap col" :class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }">
        <div class="row rounded-borders relative-position" :class="{ 'col-6': $q.platform.is.desktop, 'height-320': $q.platform.is.mobile }" style="overflow: hidden" v-if="t.PicPathList">
          <div v-if="t.PlayTimeHour||t.PlayTimeMinutes" class="f12 absolute-left bg-white" style="padding: 5px; bottom: unset; z-index: 1; border-bottom-right-radius: 4px">
            <div class="row items-center rounded-borders" style="overflow: hidden">
              <div class="bg-dark text-white" style="padding: 0 4px; font-size: 12px">{{ $t('v102.ticket.recommendTime') }}</div>
              <div class="text-dark" style="padding: 0 4px; font-size: 12px; background: #f0bd86">
                <template v-if="t.PlayTimeHour">
                  {{t.PlayTimeHour}}{{ $t('v102.ticket.hour') }}
                </template>
                <template v-if="t.PlayTimeMinutes">
                  {{t.PlayTimeMinutes}}{{ $t('v102.ticket.minutes') }}
                </template>
              </div>
            </div>
          </div>
          <div class="col-7" :class="{ 'col-7': t.PicPathList.length >= 3, 'col-6': t.PicPathList.length == 2, 'col-12': t.PicPathList.length == 1 }">
            <q-img @click="showImageHandler(`${t.PicPathList[0]}`)" :src="`${t.PicPathList[0]}`" spinner-color="drk" spinner-size="20px" height="100%" mode="cover">
              <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="col q-pl-sm" v-if="t.PicPathList.length > 1">
            <div :style="{ height: t.PicPathList.length > 2 ? '50%' : '100%' }">
              <q-img @click="showImageHandler(`${t.PicPathList[1]}`)" :src="`${t.PicPathList[1]}`" spinner-color="drk" spinner-size="20px" height="100%" mode="cover">
                <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="row items-end q-pt-sm" style="height: 50%" v-if="t.PicPathList.length > 2">
              <q-img @click="showImageHandler(`${t.PicPathList[2]}`)" :src="`${t.PicPathList[2]}`" spinner-color="drk" spinner-size="20px" height="100%" mode="cover">
                <template v-slot:error>
                  <div class="absolute-full flex flex-center bg-blue-1 text-dark">
                    {{$t('v102.ticket.load')}}
                  </div>
                  
                </template>
                <div class="absolute-full text-subtitle2 flex flex-center" v-if="t.PicPathList.length > 3">
                  <span class="fz20 text-weight-bold">+</span>
                  <span class="text-h5 text-weight-bold">{{ t.PicPathList.length - 3 }}</span>
                </div>
              </q-img>
            </div>
          </div>
        </div>
        <div class="rounded-borders" :class="{ 'q-ml-sm col': $q.platform.is.desktop, 'q-mt-sm height-320': $q.platform.is.mobile }" style="overflow: hidden" id="baiduTicketMap">
          <GoogleMap api-key="AIzaSyCvRZN9lGl3y3EsM0A0sWPf1pZ2olGsyNg" style="width: 100%; height: 100%" :center="center" :zoom="15" v-if="center">
            <Marker :options="{ position: center }" />
          </GoogleMap>
        </div>
      </div>
      <div class="bg-light-blue-1 q-pa-md fz14 rounded-borders">
        <div class="text-weight-bold">{{ $t('v102.ticket.detail') }}</div>
        <div class="text-grey-8 q-mt-sm">{{t.Feature}}</div>
      </div>
      <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
        <div class="q-mt-lg row">
          <div class="col-3 f12 text-grey-500">{{ $t('v102.ticket.d1') }}</div>
          <div class="col text-subtitle2 text-weight-bolder">{{t.OpeningHours}} 
            <!-- {{t.OpeningHours.substring(6,13)}} {{ $t('v102.ticket.stoppage') }} -->
            
          </div>
        </div>
      </div>
      <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
        <div class="q-mt-lg row">
          <div class="col-3 f12 text-grey-500">{{ $t('v102.ticket.d2') }}</div>
          <div class="col text-subtitle2 text-weight-bolder">
            <template v-if="t.GeographicTag||t.ScenicSpotTag">
              <q-badge v-if="t.GeographicTag" v-for="s in t.GeographicTag.split(',')" outline color="positive" :label="s" class="q-mr-md" />
            <q-badge v-if="t.ScenicSpotTag" v-for="s in t.ScenicSpotTag.split(',')" outline color="warning" :label="s" class="q-mr-md" />
          </template>
          <template v-else>-</template>
          </div>
        </div>
      </div>

      <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
        <div class="q-mt-lg row">
          <div class="col-3 f12 text-grey-500">{{ $t('v102.ticket.d3') }}</div>
          <div class="col text-subtitle2 text-weight-bolder">{{t.TrafficInfo?t.TrafficInfo:'-'}}</div>
        </div>
      </div>

      <div class="q-mt-lg">
        <div class="bg-orange-1 q-pa-md rounded-borders fz14" style="border: 1px dashed orange">
          <div class="text-weight-bold">{{ $t('v102.ticket.d4') }}</div>
          <div class="text-grey-700 q-mt-sm">{{t.About}}</div>
        </div>
      </div>
      <div class="q-mt-lg">
        <div class="bg-orange-1 q-pa-md rounded-borders fz14" style="border: 1px dashed orange">
          <div class="text-weight-bold">{{ $t('v102.ticket.d5') }}</div>
          <div class="text-grey-700 q-mt-sm">{{t.BookingInfo}}</div>
        </div>
      </div>
    </q-scroll-area>
  </q-card>
  <q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
  <q-dialog class="no-padding" v-model="showImagePriview" persistent>
    <image-preview :current="currentImage" :images="images"></image-preview>
  </q-dialog>
</template>

<script lang="ts">
import { DirtionmaryHelper } from "src/config/dictionary";
import useScrollModule from "src/module/scrollbar/scrollModule";
import { defineComponent, nextTick, reactive, toRefs, watch } from "vue";
import { GoogleMap, Marker } from 'vue3-google-map'
import ImagePreview from "../common/ImagePreview.vue";

export default defineComponent({
  props:["ticket"],
  components:{GoogleMap,ImagePreview},
  setup(props) {
    watch(
      () => props.ticket,
      (n, o) => {
        // data.t = n
      }
    )
    const data = reactive({
      t:{} as any,
      scrollStyle: {} as any,
      loading:false,
      currentImage:'',
      showImagePriview:false,
      center:{} as any,
      images:[]
    })

    data.scrollStyle = useScrollModule().scrollStyle
    data.t = props.ticket
    
    data.images = data.t.PicPathList
    const methods = {
      showImageHandler(url: string) {
        data.currentImage = url
        data.showImagePriview = true
      },
      initMap(lat: any, lng: any) {
        let country=localStorage.getItem(DirtionmaryHelper.USER_IN_COUNTRY) ?? 'GW'
        if(country!='CN'){
          data.center = { lat: parseFloat(lng), lng: parseFloat(lat) }
        }else{
          let Bmap = window.BMapGL
          var b = new Bmap.Map('baiduTicketMap')
          b.centerAndZoom(new Bmap.Point(lat, lng), 15)
          b.enableScrollWheelZoom(true)
          b.addOverlay(new Bmap.Marker(new Bmap.Point(lat, lng)))
        }
      },
    }
    
    nextTick(()=>{
      methods.initMap(data.t.Lng,data.t.Lat)
    })
    return {
      ...toRefs(data),
      ...methods
    }
  }
})
</script>

<style>

</style>
