<template>
  <div class="q-mt-md">
    <div class="text-subtitle2 text-weight-bold">產品概要</div>
    <div class="row q-pt-md q-col-gutter-md">
        <div class="row items-center q-pt-mb"
        :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="traffic!=''">
          <div class="q-mr-md col-3">往返交通：</div>
          <div class="col text-grey-6">{{ traffic }}</div>
        </div>
        <div class="row items-center q-pt-mb"
        :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="hotel!=''">
          <div class="q-mr-md col-3">酒店住宿：</div>
          <div class="col text-grey-6">{{ hotel }}</div>
        </div>
        <div class="row items-center q-pt-mb"
        :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
          <div class="q-mr-md col-3">購物：</div>
          <div class="col text-grey-6">{{ trip.shopList.length>0?`${trip.shopList.length}個購物點`:'無購物行程' }}</div>
        </div>
        <div class="row items-center q-pt-mb"
        :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="team!=''">
          <div class="q-mr-md col-3">團隊人數：</div>
          <div class="col text-grey-6">{{ team }}</div>
        </div>
        <div class="row items-center q-pt-mb"
        :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
          <div class="q-mr-md col-3">景點：</div>
          <div class="col text-grey-6">{{ trip.scenicList.length }}個景點或場館</div>
        </div>
        <div class="row items-center q-pt-mb"
        :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
          <div class="q-mr-md col-3">自費項目：</div>
          <div class="col text-grey-6">{{ trip.selfpayingList.length>0?`${trip.selfpayingList.length}個自費項目`:'無自費項目' }}</div>
        </div>
        <div class="row items-center q-pt-mb"
        :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}"  v-if="trip.freedomList.length>0">
          <div class="q-mr-md col-3">自由活動：</div>
          <div class="col text-grey-6">{{ trip.freedomList.length}} 次自由活動</div>
        </div>
        <div class="row items-center q-pt-mb"
        :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
          <div class="q-mr-md col-3">餐食：</div>
          <div class="col text-grey-6">{{ dinner }}</div>
        </div>
        <div class="row items-center q-pt-mb"
        :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
          <div class="q-mr-md col-3">服務用語</div>
          <div class="col text-grey-6">普通話/日本語</div>
        </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { date,useQuasar } from "quasar";
  import { inject, provide, reactive, toRefs, defineComponent,onMounted,ref,watch, getCurrentInstance  } from 'vue';
  import { useRouter } from 'vue-router'
  import { useI18n } from 'vue-i18n'
  import { DirtionmaryHelper } from 'src/config/dictionary'
  import scheduledTripService from 'src/api/scheduledTrip'
  import { ApiResult } from 'src/@types/enumHelper'
  import message from 'src/utils/message'
  import { groupBy } from 'src/utils/tools'
  export default defineComponent({
    components: {  },
    props: ["trip"],
    setup(props) {
      const $router = useRouter()
      const { t } = useI18n()
      const $q = useQuasar()
      const qDateProxy = ref(null) as any
      let {ctx:that, proxy} = getCurrentInstance()
      
      const data= reactive({
        traffic: "",
        stars:['一星酒店','二星酒店','三星酒店','四星酒店','五星酒店','六星酒店','七星酒店','民宿','溫泉酒店'],
        hotel:'',
        team: '',
        dinner: '',
        trip: props.trip
      })
      const methods = {
        formatTeam(){
          let p = data.trip.priceList[0]
          let t = p.priceTeamType??1
          t=t==0?1:t
          if(t==1){
            data.team = `${p.seat}人團隊散拼`
          }else{
            data.team = '一单一团'
          }
        },
        formatDinner(){
          let d = []
          data.trip.dinnerList.forEach(x=>{
            if(x.dinnerName.indexOf('自理')==-1 && x.dinnerName.indexOf('请选择')==-1){
              d.push(x)
            }
          })
          if(d && d.length>0){
            let g=groupBy(d,x=>{ return x.useDinnerType})
            let t = ['早餐','午餐','晚餐']
            g.forEach(x=>{
              data.dinner+=`${x.data.length}次 ${t[parseInt(x.key)-1]}；`
            })
          }else{
            data.dinner = '無餐食供應'
          }
        },
        formatTraffic() {
          let z = data.trip.trafficList[0].subTraffic[0]
          if (z&&z.arrivalType == 1) {
            data.traffic = '飛機往返';
          } else if (z&&z.arrivalType == 2) {
            data.traffic = '巴士往返';
          } else if (z&&z.arrivalType == 3) {
            data.traffic = '郵輪往返';
          } else {
            data.traffic = '高鐵往返';
          }
        },
        formatHotel(){
          let h = []
          data.trip.hotelList.forEach(x=>{
            if(h.findIndex(y=>y.dayNum==x.dayNum)==-1){
              h.push(x)
            }
          })
          if(h && h.length>0){
            let g = groupBy(h,(x)=>{return x.star})
            g.forEach(x=>{
              data.hotel+=`${x.data.length}晚${data.stars[parseInt(x.key)-1]}；`
            })
          }
        }
  
      }
      methods.formatTraffic()
      methods.formatHotel()
      methods.formatTeam()
      methods.formatDinner()
      return {
      ...toRefs(data),
      ...methods,
    }
    }
  })
</script>

<style></style>
