<template>
  <div class="q-mt-md">
    <div class="text-subtitle2 text-weight-bold">{{$t('v103.scheduledTripDetails.itineraryDetails.gaiyao')}}</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">{{$t('v103.scheduledTripDetails.itineraryDetails.jiaotong')}}：</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">{{$t('v103.scheduledTripDetails.itineraryDetails.zhusu')}}：</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">{{$t('v103.scheduledTripDetails.itineraryDetails.gouwu')}}：</div>
          <div class="col text-grey-6">{{ trip.shopList.length>0?`${trip.shopList.length}`+$t('v103.scheduledTripDetails.itineraryDetails.gouwushu'):$t('v103.scheduledTripDetails.itineraryDetails.nogouwu') }}</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">{{$t('v103.scheduledTripDetails.itineraryDetails.tuanduirenshu')}}：</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">{{$t('v103.scheduledTripDetails.itineraryDetails.jindian')}}：</div>
          <div class="col text-grey-6">{{ trip.scenicList.length }}{{$t('v103.scheduledTripDetails.itineraryDetails.jindianshu')}}</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">{{$t('v103.scheduledTripDetails.itineraryDetails.zifei')}}：</div>
          <div class="col text-grey-6">{{ trip.selfpayingList.length>0?`${trip.selfpayingList.length}`+$t('v103.scheduledTripDetails.itineraryDetails.zifeishu'):$t('v103.scheduledTripDetails.itineraryDetails.nozifei') }}</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">{{$t('v103.scheduledTripDetails.itineraryDetails.huodong')}}：</div>
          <div class="col text-grey-6">{{ trip.freedomList.length}} {{$t('v103.scheduledTripDetails.itineraryDetails.huodongshu')}}</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">{{$t('v103.scheduledTripDetails.itineraryDetails.canshi')}}：</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:[t('v103.scheduledTripDetails.starrating.d1'),t('v103.scheduledTripDetails.starrating.d2'),t('v103.scheduledTripDetails.starrating.d3'),t('v103.scheduledTripDetails.starrating.d4'),t('v103.scheduledTripDetails.starrating.d5'),t('v103.scheduledTripDetails.starrating.d6'),t('v103.scheduledTripDetails.starrating.d7'),t('v103.scheduledTripDetails.starrating.d8'),t('v103.scheduledTripDetails.starrating.d9')],
        hotel:'',
        team: '',
        dinner: '',
        trip: props.trip
      })
      const methods = {
        formatTeam(){
          let p = data.trip.priceList[0]
          let type = p.priceTeamType??1
          type=type==0?1:type
          if(type==1){
            data.team = `${p.seat+t('v103.scheduledTripDetails.smaple.d1')}`
          }else{
            data.team = t('v103.scheduledTripDetails.smaple.d2')
          }
        },
        formatDinner(){
          let d = []
          data.trip.dinnerList.forEach(x=>{
            if(x.dinnerName.indexOf(t('v103.scheduledTripDetails.smaple.d3'))==-1 && x.dinnerName.indexOf(t('v103.scheduledTripDetails.smaple.d4'))==-1){
              d.push(x)
            }
          })
          if(d && d.length>0){
            let g=groupBy(d,x=>{ return x.useDinnerType})
            let type = [t('v103.scheduledTripDetails.calendarhtml.d2'),t('v103.scheduledTripDetails.calendarhtml.d3'),t('v103.scheduledTripDetails.calendarhtml.d4')]
            g.forEach(x=>{
              data.dinner+=`${x.data.length}${t('v103.scheduledTripDetails.smaple.d5')} ${type[parseInt(x.key)-1]}；`
            })
          }else{
            data.dinner = t('v103.scheduledTripDetails.smaple.d6')
          }
        },
        formatTraffic() {
          let z = data.trip.trafficList[0].subTraffic[0]
          if (z&&z.arrivalType == 1) {
            data.traffic = t('v103.scheduledTripDetails.smaple.d7');
          } else if (z&&z.arrivalType == 2) {
            data.traffic = t('v103.scheduledTripDetails.smaple.d8');
          } else if (z&&z.arrivalType == 3) {
            data.traffic = t('v103.scheduledTripDetails.smaple.d9');
          } else {
            data.traffic = t('v103.scheduledTripDetails.smaple.d10');
          }
        },
        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}${t('v103.scheduledTripDetails.smaple.d11')}${data.stars[parseInt(x.key)-1]?data.stars[parseInt(x.key)-1]:''}；`
            })
          }
        }
  
      }
      methods.formatTraffic()
      methods.formatHotel()
      methods.formatTeam()
      methods.formatDinner()
      return {
      ...toRefs(data),
      ...methods,
    }
    }
  })
</script>

<style></style>
