<template>
  <div class="q-mt-lg">
    <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 lang="ts">
import { reactive, toRefs, defineComponent,ref,watch  } from 'vue';
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import calendar from './tripView/calendar.vue'
import list from './tripView/list.vue'
export default defineComponent({
  components: { list, calendar  },
  props: ['trip'],
  setup(props, context) {
    const { t } = useI18n()

    const data= reactive({
      trip: props.trip,
      displayType: 'image'
    })
    watch(() => props.trip,(n,o) => {
        data.trip = n;
      },{deep: true}
    )
    const methods = {
      changeHandler(){
        // data.displayType = 
        context.emit('change')
      }
    }
    return {
      ...toRefs(data),
      ...methods,
    }
  }
})
</script>

<style>

</style>
