<template>
  <div class="q-mt-lg" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">
    <div class="text-subtitle1 text-weight-bold row items-center">
      <span class="col">每日行程</span>
      <span class="">
        <q-chip class="bg-transparent text-weight-light text-grey-7 f12" icon="iconfont icontime" :label="`行程時間：${trip.dayList.length}天`" />
      </span>
    </div>
    <q-tabs
      v-model="displayType"
      class="text-dark q-mt-md"
      align="left"
      :breakpoint="20"
      inline-label
      active-class="text-primary"
      dense
    >
      <q-tab name="image" @click="changeHandler" icon="iconfont iconimage" class="no-padding q-mr-lg" label="圖文模式" />
      <q-tab name="dates" @click="changeHandler" icon="iconfont iconrili" class="no-padding q-mr-lg" label="日曆模式" />
    </q-tabs>

    <list :days="trip.dayList" v-if="displayType=='image'"></list>
    <calendar :days="trip.dayList" v-if="displayType=='dates'"></calendar>
  </div>
</template>

<script>
import calendar from './tripView/calendar.vue'
import list from './tripView/list.vue'
export default {
  components: { list, calendar },
  props:['trip'],
  data() {
    return {
      displayType: 'image'
    }
  },
  methods: {
    changeHandler(){
      console.log('change....')
      this.$emit('change')
    }
  },
}
</script>

<style>

</style>
