<template>
  <q-table :rows="days" :columns="cols" flat class="q-mt-md" hide-pagination>
    <template v-slot:body-cell-day="props">
        <q-td :props="props">
          <div class="text-h6">{{$t('v103.details.calendarhtml.d1')}} {{ props.row.dayNum }} {{$t('v103.details.calendarhtml.d11')}}</div>
          <div class="f12 text-grey-8">{{ props.row.title }}</div>
        </q-td>
      </template>
      <template v-slot:body-cell-dinner="props">
        <q-td :props="props">
          <div class="f12 text-grey-8">{{$t('v103.details.calendarhtml.d2')}}：</div>
          <div class="f12 text-grey-8">{{ props.row.breakfast }}</div>
          <div class="f12 text-grey-8 q-mt-sm">{{$t('v103.details.calendarhtml.d3')}}：</div>
          <div class="f12 text-grey-8">{{ props.row.lanuch }}</div>
          <div class="f12 text-grey-8 q-mt-sm">{{$t('v103.details.calendarhtml.d4')}}：</div>
          <div class="f12 text-grey-8">{{ props.row.dinner }}</div>
        </q-td>
      </template>
      <template v-slot:body-cell-acitvity="props">
        <q-td :props="props">
          <div v-for="(x,i) in props.row.activity" :key="i" >
            <q-chip class="bg-transparent" text-color="blue" dense :label="x.n" v-if="x.t==1" />
            <q-chip class="bg-transparent" text-color="dark" dense :label="x.n" v-if="x.t==2"/>
          </div>
        </q-td>
      </template>
      <template v-slot:body-cell-hotel="props">
        <q-td :props="props">
          <div v-for="(x,i) in props.row.hotel" :key="i" class="row items-center" >
            <q-chip class="bg-transparent" text-color="blue" dense :label="x.n" />
            <span class="q-ml-sm">{{ x.t==0?$t('v103.details.calendarhtml.d5'):$t('v103.details.calendarhtml.d6') }}</span>
          </div>
          <div class="q-mt-sm" v-if="props.row.tips">{{ props.row.tips }}</div>
        </q-td>
      </template>
  </q-table>

</template>

<script lang="ts">
import { date,useQuasar } from "quasar";
import { reactive, toRefs, defineComponent,ref,watch,getCurrentInstance  } from 'vue';
import { useI18n } from 'vue-i18n'
export default defineComponent({
  components: {  },
  props: ['days'],
  setup(props) {
    const { t } = useI18n()
    const $q = useQuasar()
    const qDateProxy = ref(null) as any
    let {ctx:that, proxy} = getCurrentInstance()
    
    const data= reactive({
      cols: [
        { name: "day", label: t('v103.details.calendartitle.d1'), align: "left",style:'vertical-align:top;' },
        { name: "dinner", label: t('v103.details.calendartitle.d2'), align: "left",style:'vertical-align:top;' },
        { name: "acitvity", label: t('v103.details.calendartitle.d3'), align: "left",style:'vertical-align:top;' },
        { name: "hotel", label: t('v103.details.calendartitle.d4'), align: "left",style:'vertical-align:top;' },
      ],
      days: props.days,
      d: props.days
    })
    watch(() => props.days,(n,o) => {
      data.days = props.days
      data.d = n;
      },{deep: true}
    )
    const methods = {
      formatDay() {
        if (data.d.length > 0) {
          data.d.forEach((x) => {
            x.breakfast=t('v103.details.day.d1')
            x.lanuch=t('v103.details.day.d1')
            x.dinner=t('v103.details.day.d1')
            x.activity=[]
            x.hotel=[]
            x.tips=''
            x.dayArray.forEach((y) => {
              if (y.type == 7) {
                x.title = y.childItem.title;
              } else if (y.type == 1&&y.childItem.subTraffic[0]&&y.childItem.subTraffic[0].startTime) {
                y.subtitle =
                  y.childItem.subTraffic[0].startTime +
                  " - " +
                  y.childItem.subTraffic[y.childItem.subTraffic.length - 1]
                    .endTime;
                y.title = methods.formatTraffice(y.childItem.subTraffic);
                y.icon = "iconfont iconjiaotong";
              } else if (y.type == 4) {
                if(y.childItem.dinnerName.indexOf(t('v103.details.day.d2'))==-1 && y.childItem.dinnerName.indexOf(t('v103.details.day.d3'))==-1){
                  if(y.childItem.useDinnerType=='1'){
                    x.breakfast =x.breakfast==t('v103.details.day.d1')?y.childItem.dinnerName:x.breakfast+'，'+y.childItem.dinnerName
                  } else if(y.childItem.useDinnerType=='2'){
                    x.lanuch =x.lanuch==t('v103.details.day.d1')?y.childItem.dinnerName:x.lanuch+'，'+y.childItem.dinnerName
                  } else if(y.childItem.useDinnerType=='3'){
                    x.dinner =x.dinner==t('v103.details.day.d1')?y.childItem.dinnerName:x.dinner+'，'+y.childItem.dinnerName
                  }
                }
              } else if (y.type == 2) {
                x.activity.push({
                  t:1,
                  n:y.childItem.couponsName
                })
              } else if (y.type == 5) {
                x.activity.push({
                  t:2,
                  n:t('v103.details.day.d4')
                })
              } else if (y.type == 3) {
                x.hotel.push({n:y.childItem.hotelName,t:y.childItem.IsSameLevel})
              } else if (y.type == 6) {
                x.tips = y.childItem.descriptionText??''
              }
            });
          });
        }
      },
      formatTraffice(tras) {
        let txt = t('v103.details.traffice.d1') + tras[0].startCityName;
        tras.forEach((z, i) => {
          if (i > 0) {
            txt = t('v103.details.traffice.d2');
          }
          if (z.arrivalType == 1) {
            txt += t('v103.details.traffice.d3');
          } else if (z.arrivalType == 2) {
            txt += t('v103.details.traffice.d4');
          } else if (z.arrivalType == 3) {
            txt += t('v103.details.traffice.d5');
          } else {
            txt += t('v103.details.traffice.d6');
          }
          txt += ` ${t('v103.details.traffice.d7')}` + z.arrivalCityName;
        });
        return txt;
      },
    
    }
    methods.formatDay();
    return {
      ...toRefs(data),
      ...methods,
    }
  }
})
</script>

<style></style>
