<template>
  <q-table :data="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">第 {{ props.row.dayNum }} 天</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">早餐：</div>
          <div class="f12 text-grey-8">{{ props.row.breakfast }}</div>
          <div class="f12 text-grey-8 q-mt-sm">午餐：</div>
          <div class="f12 text-grey-8">{{ props.row.lanuch }}</div>
          <div class="f12 text-grey-8 q-mt-sm">晚餐：</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?'保證入住':'或同級別酒店' }}</span>
          </div>
          <div class="q-mt-sm" v-if="props.row.tips">{{ props.row.tips }}</div>
        </q-td>
      </template>
  </q-table>

</template>

<script>
export default {
  props: ["days"],
  data() {
    return {
      cols: [
        { name: "day", label: "行程", align: "left",style:'vertical-align:top;' },
        { name: "dinner", label: "用餐", align: "left",style:'vertical-align:top;' },
        { name: "acitvity", label: "景点/场馆&活动", align: "left",style:'vertical-align:top;' },
        { name: "hotel", label: "酒店", align: "left",style:'vertical-align:top;' },
      ],
      d:[]
    };
  },
  created() {
    console.log(this.days);
    this.d = this.days;
    this.formatDay();
    this.$forceUpdate();
  },
  methods: {
    formatDay() {
      if (this.d.length > 0) {
        this.d.forEach((x) => {
          x.breakfast='不含餐'
          x.lanuch='不含餐'
          x.dinner='不含餐'
          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.subtitle =
                y.childItem.subTraffic.length>0&&y.childItem.subTraffic[0].startTime +
                " - " +
                y.childItem.subTraffic[y.childItem.subTraffic.length - 1]
                  .endTime;
              y.title = this.formatTraffice(y.childItem.subTraffic);
              y.icon = "iconfont iconjiaotong";
              console.log(y);
            } else if (y.type == 4) {
              if(y.childItem.dinnerName.indexOf('自理')==-1 && y.childItem.dinnerName.indexOf('请选择')==-1){
                if(y.childItem.useDinnerType=='1'){
                  x.breakfast =x.breakfast=='不含餐'?y.childItem.dinnerName:x.breakfast+'，'+y.childItem.dinnerName
                } else if(y.childItem.useDinnerType=='2'){
                  x.lanuch =x.lanuch=='不含餐'?y.childItem.dinnerName:x.lanuch+'，'+y.childItem.dinnerName
                } else if(y.childItem.useDinnerType=='3'){
                  x.dinner =x.dinner=='不含餐'?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:'自由活動'
              })
            } 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) {
      console.log(tras)
      let txt = "從" + tras.length>0&&tras[0].startCityName;
      tras.forEach((z, i) => {
        if (i > 0) {
          txt = "；再";
        }
        if (z.arrivalType == 1) {
          txt += "搭乘航班";
        } else if (z.arrivalType == 2) {
          txt += "乘坐豪華巴士";
        } else if (z.arrivalType == 3) {
          txt += "乘坐豪華郵輪";
        } else {
          txt += "乘坐高鐵";
        }
        txt += " 到達" + z.arrivalCityName;
      });
      return txt;
    },
  },
};
</script>

<style></style>
