<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"></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="typeInfo.name" />
          </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" v-if="t.CityList2">
        <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.CityList2[0].CountryName }}{{t.CityList2[0].CityName}}</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.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.ImageList">
          <div class="col-7" :class="{ 'col-7': t.ImageList.length >= 3, 'col-6': t.ImageList.length == 2, 'col-12': t.ImageList.length == 1 }">
            <q-img @click="showImageHandler(`${t.ImageList[0]}`)" :src="`${t.ImageList[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.CharteredBus.load')}}
                </div>
              </template>
            </q-img>
          </div>
          <div class="col q-pl-sm" v-if="t.ImageList.length > 1">
            <div :style="{ height: t.ImageList.length > 2 ? '50%' : '100%' }">
              <q-img @click="showImageHandler(`${t.ImageList[1]}`)" :src="`${t.ImageList[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.CharteredBus.load')}}
                  </div>
                </template>
              </q-img>
            </div>
            <div class="row items-end q-pt-sm" style="height: 50%" v-if="t.ImageList.length > 2">
              <q-img @click="showImageHandler(`${t.ImageList[2]}`)" :src="`${t.ImageList[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.CharteredBus.load')}}
                  </div>
                  
                </template>
                <div class="absolute-full text-subtitle2 flex flex-center" v-if="t.ImageList.length > 3">
                  <span class="fz20 text-weight-bold">+</span>
                  <span class="text-h5 text-weight-bold">{{ t.ImageList.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="baiduCharteredBusMapBaoChe">
          <GoogleMap api-key="AIzaSyCvRZN9lGl3y3EsM0A0sWPf1pZ2olGsyNg" style="width: 100%; height: 100%" :center="center" :zoom="15" v-if="center">
            <Marker :options="{ position: center }" />
            <Circle></Circle>
          </GoogleMap>
        </div>
      </div>
      <div class="bg-light-blue-1 q-pa-md fz14 rounded-borders">
        <div class="text-weight-bold">{{ $t('v102.CharteredBus.detail') }}</div>
        <div class="text-grey-8 q-mt-sm">{{t.Description}}</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.CharteredBus.d1') }}</div>
          <div class="col text-subtitle2 text-weight-bolder">
            {{t.Introduce?t.Introduce:'-'}}
          </div>
        </div>
      </div>
      <div v-if="t.CarType==3" :class="{ 'q-px-lg': $q.platform.is.desktop }">
        <div class="q-mt-lg row">
          <div class="col-3 f12 text-grey-500">{{ $t('v102.CharteredBus.d7') }}</div>
          <div class="col text-subtitle2 text-weight-bolder">
            {{t.TravelHours?t.TravelHours:'-'}}
          </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.CharteredBus.d5') }}</div>
          <div class="col text-subtitle2 text-weight-bolder">
            <template v-if="t.PriceIncludeList&&t.PriceIncludeList.length>0">
              <q-badge v-for="x in t.PriceIncludeList" color="light-blue-1" class="q-mr-md text-light-blue">{{x}}</q-badge>
            </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.CharteredBus.d6') }}</div>
          <div class="col text-subtitle2 text-weight-bolder">
            <template v-if="t.PriceNotIncludeList&&t.PriceNotIncludeList.length>0">
              <q-badge v-for="x in t.PriceNotIncludeList" color="light-blue-1" class="q-mr-md text-light-blue">{{x}}</q-badge>
            </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.CharteredBus.d2') }}</div>
          <div class="col text-subtitle2 text-weight-bolder">
            {{t.HowUse?t.HowUse:'-'}}
          </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.CharteredBus.d3') }}</div>
          <div class="col text-subtitle2 text-weight-bolder">
            {{t.CancelPolicy?t.CancelPolicy:'-'}}
          </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.CharteredBus.d2') }}</div>
          <div class="text-grey-700 q-mt-sm">{{t.HowUse}}</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.CharteredBus.d4') }}</div>
          <div class="text-grey-700 q-mt-sm">{{t.BuyNotes}}</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 CharteredBusService from '../../api/CharteredBus'
import { DirtionmaryHelper } from "src/config/dictionary";
import useScrollModule from "src/module/scrollbar/scrollModule";
import { defineComponent, nextTick, reactive, toRefs, watch } from "vue";
import { GoogleMap, Marker, Circle } from 'vue3-google-map'
import ImagePreview from "../common/ImagePreview.vue";
import { ApiResult } from '../../@types/enumHelper'
import message from '../../utils/message'
import { useHotel } from '../../utils/hotelRate'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  props:["ProductId"],
  components:{GoogleMap,ImagePreview},
  setup(props) {
    const { t } = useI18n()
    const data = reactive({
      t:{} as any,
      scrollStyle: {} as any,
      loading:false,
      currentImage:'',
      showImagePriview:false,
      center:{} as any,
      radius: 0,
      images:[],
      type: [],
      typeInfo: {} as any,
      Id: props.ProductId
    })
    // data.Id = props.ProductId
    // watch(
    //   () => data.Id,
    //   (n, o) => {
    //     methods.getInfo()
    //   }
    // )
    data.scrollStyle = useScrollModule().scrollStyle
    
    data.type = useHotel.getCharteredBusType()
    const methods = {
      showImageHandler(url: string) {
        data.currentImage = url
        data.showImagePriview = true
      },
      getInfo(){
        let param = {
          ProductId: data.Id
        }
        CharteredBusService.GetTYCarSingleProductInfo(param)
          .then(r => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              data.t=r.data.data
              data.typeInfo = data.type.find(y => y.id == data.t.CarType) ?? data.type[1]
              data.images = r.data.data.ImageList
              nextTick(()=>{
                data.center = {
                  lng:data.t.PlaceList[0].Lng,
                  lat:data.t.PlaceList[0].Lat
                }
                data.radius = data.t.PlaceList[0].Range
                methods.initMap(data.t.PlaceList[0].Lng,data.t.PlaceList[0].Lat)
              })
            } else {
              message.errorMsg(r.data.message)
            }
          }).catch(e => {
            message.errorMsg(e.message)
          })
      },
      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
          let mPoint = new Bmap.Point(lat, lng)
          var b = new Bmap.Map('baiduCharteredBusMapBaoChe')
          b.centerAndZoom(mPoint, 15)
          b.enableScrollWheelZoom(true)
          var opts = {
            
            position: mPoint, // 指定文本标注所在的地理位置
            offset: new Bmap.Size(-40, 10), // 设置文本偏移量
            styles:{
              position: 'absolute',
              display: 'inline',
              cursor: 'inherit',
              whiteSpace: 'nowrap',
              backgroundColor: '#FFFFFF',
              color: 'red',
              border: 0,
              left: '167px',
              top: '104px',
              padding: '1px 5px',
              borderRadius: '3px',
            },
          };
          // 创建文本标注对象
          var label = new Bmap.Label(`${t('v102.CharteredBus.jiesongdianfw')}`, opts);
	        var circle = new Bmap.Circle(mPoint,data.radius,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
          b.addOverlay(new Bmap.Marker(new Bmap.Point(lat, lng)))
          b.addOverlay(label)
          b.addOverlay(circle)
          // console.log(new Bmap.Circle(new Bmap.radiu(lat, lng)),'-=====')
        }
      },
    }
    methods.getInfo()
    
    return {
      ...toRefs(data),
      ...methods
    }
  }
})
</script>

<style>

</style>
