<template>
  <div class="q-mt-md" :class="{'q-px-md':$q.platform.is.mobile}">
    <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>
export default {
  props: ["trip"],
  data() {
    return {
      traffic: "",
      stars:['一星酒店','二星酒店','三星酒店','四星酒店','五星酒店','六星酒店','七星酒店','民宿','溫泉酒店'],
      hotel:'',
      team: '',
      dinner: ''
    };
  },
  created() {
    this.formatTraffic()
    this.formatHotel()
    this.formatTeam()
    this.formatDinner()
  },
  methods: {
    formatTeam(){
      let p = this.trip.priceList[0]
      if(!p) return
      let t = p.priceTeamType??1
      t=t==0?1:t
      if(t==1){
        this.team = `${p.seat}人團隊散拼`
      }else{
        this.team = '一单一团'
      }
    },
    formatDinner(){
      let d = []
      this.trip.dinnerList.forEach(x=>{
        if(x.dinnerName.indexOf('自理')==-1 && x.dinnerName.indexOf('请选择')==-1){
          d.push(x)
        }
      })
      if(d && d.length>0){
        let g=this.groupBy(d,x=>{ return x.useDinnerType})
        let t = ['早餐','午餐','晚餐']
        g.forEach(x=>{
          this.dinner+=`${x.data.length}次 ${t[parseInt(x.key)-1]}；`
        })
      }else{
        this.dinner = '無餐食供應'
      }
    },
    formatTraffic() {
      if(this.trip.trafficList && this.trip.trafficList.length>0 && this.trip.trafficList[0].subTraffic && this.trip.trafficList[0].subTraffic.length>0){
        let z = this.trip.trafficList[0].subTraffic[0]
        if (z&&z.arrivalType&&z.arrivalType == 1) {
          this.traffic = '飛機往返';
        } else if (z&&z.arrivalType&&z.arrivalType == 2) {
          this.traffic = '巴士往返';
        } else if (z&&z.arrivalType&&z.arrivalType == 3) {
          this.traffic = '郵輪往返';
        } else {
          this.traffic = '高鐵往返';
        }
      }
      
    },
    formatHotel(){
      let h = []
      this.trip.hotelList.forEach(x=>{
        if(h.findIndex(y=>y.dayNum==x.dayNum)==-1){
          h.push(x)
        }
      })
      if(h && h.length>0){
        let g = this.groupBy(h,(x)=>{return x.star})
        g.forEach(x=>{
          this.hotel+=`${x.data.length}晚${this.stars[parseInt(x.key)-1]?this.stars[parseInt(x.key)-1]:''}；`
        })
      }
    }
  },
};
</script>

<style></style>
