<template>
  <div v-if="m && m.priceFlight && m.priceFlight.length > 0">
    <div
      class="text-h5 text-weight-bold text-left"
      ref="feature"
      :class="{
        'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
      }"
    >
      航班資訊
    </div>
    <div class="q-my-lg rounded-borders bg-white q-pa-md">
        <div v-for="(x,i) in m.priceFlight" :key="i">
            <div class="row items-center">
                <q-chip size="10px" square color="positive" outline v-if="x.flightType==1">去程</q-chip>
                <q-chip size="10px" square color="accent" outline v-if="x.flightType==2">中轉</q-chip>
                <q-chip size="10px" square color="negative" outline v-if="x.flightType==3">回程</q-chip>
                <div class="q-ml-md text-grey-7">
                   <div class="row">
                     <div class="text-subtitle2">{{ formatDateHandler(x.arriveDate) }}</div>
                     <div class="q-ml-lg row items-center">
                        <span>{{ x.departureName }}</span>
                        <q-icon name="iconfont iconswap-right" class="q-mx-sm" size="20px" />
                        <span>{{ x.arrivalCityName }}</span>
                     </div>
                   </div>
                </div>
            </div>
            <div class="q-pl-lg q-mt-md row " style="height:66px; margin-left: 0px;">
              <div class="column text-weight-bold">
                <div class="col">
                  {{ formatDateHandler(x.arriveDate,"MM月DD日") }}
                </div>
                <div>
                  {{ x.departureTime>x.arrivalTime?formatAddDateHandler(x.arriveDate,1,"MM月DD日"):formatDateHandler(x.arriveDate,"MM月DD日") }}
                </div>
              </div>
              <div class="column text-weight-bold q-ml-md">
                <div class="col">
                  {{ x.departureTime }}
                </div>
                <div>
                  {{ x.arrivalTime }}
                </div>
              </div>
              <div class="column items-center q-ml-md">
                <div style="width: 8px;height: 8px;border-radius: 8px;background: #ccd6e5;" class="q-mt-sm"></div>
                <div class="col" style="background: #ccd6e5;width:2px"></div>
                <div style="width: 8px;height: 8px;border-radius: 8px;background: #ccd6e5;" class="q-mb-sm"></div>
              </div>
              <div class="column text-weight-bold q-ml-md">
                <div class="col">
                  {{ x.departureAirPortName }}
                </div>
                <div>
                  {{ x.arrivalAirPortName }}
                </div>
              </div>
              <q-space />
              <div class="column">
                <div class="col row">
                  <q-img :src="`http://pic.tripcdn.com/airline_logo/32/${x.flightNumber.substring(0,2).toLowerCase()}.png`" spinner-color="white" style="height: 18px; width: 18px" />
                  <div class="q-ml-sm" style="font-size:16px;">{{ x.alName }}</div>
                </div>
                <div class="q-pl-lg text-grey-5">
                  <span style="text-decoration: dashed;text-decoration-line: underline;">{{ x.flightNumber }}</span>
                  <span class="q-ml-md">經濟艙</span>
                </div>
              </div>
            </div>
            <q-separator color="grey-2" class="q-my-md" v-if="i<m.priceFlight.length-1"/>
        </div>
    </div>
  </div>
</template>

<script>
import { date } from "quasar";
export default {
  props: ["price"],
  watch: {
    price: {
      handler(n, o) {
        this.m = n;
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      m: null,
    };
  },
  created() {
    this.m = this.price;
  },
  methods: {
    formatDateHandler(dateStr,formatStr =null){
        formatStr = formatStr?formatStr:"YYYY年MM月DD日（dddd）"
        return date.formatDate(dateStr,formatStr)
    },
    formatAddDateHandler(dateStr,day,formatStr =null){
        formatStr = formatStr?formatStr:"YYYY年MM月DD日（dddd）"
        return date.formatDate(date.addToDate(dateStr,{days:day}),formatStr)
    }
  },
};
</script>

<style></style>
