<style scoped>
    @import url('../../../assets/trip/block/index.css');
    .fz15{
        font-size: 15px;
    }
    .fz28{
        font-size: 28px;
    }
</style>
<template>
    <div class="trip-box">
        <div :class="{'trip-block':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.mobile,'q-pt-lg':$q.platform.is.mobile&&i==0}" v-for="(item,i) in trips" :key="i" :id="`days_${i}`">
            <template v-if="$q.platform.is.desktop">
            <div class="trip-title">
                <div>
                    <p class="day">第<span v-if='item.dayNum<10'>0</span>{{item.dayNum}}天</p>
                    <!-- <p>{{item.dateTime}}</p> -->
                </div>
                <div class="desc" v-html="item.title"></div>
            </div>
            <oneday v-if="item.details && item.details.length==1" :day='item' :isDirect="isDirect"></oneday>
            <twoday v-if="item.details && item.details.length==2" :day='item' :isDirect="isDirect"></twoday>
            <threeday v-if="item.details && item.details.length==3" :day='item' :isDirect="isDirect"></threeday>
            <fourday v-if="item.details && item.details.length==4" :day='item' :isDirect="isDirect"></fourday>
            <fiveday v-if="item.details && item.details.length>=5" :day='item' :isDirect="isDirect"></fiveday>
            </template>
            <template v-else>
                <div>
                    <div class="bg-grey-3 q-px-lg q-py-md">
                        <div>
                            <div class="fz28 text-light-blue-6">第 <span class="fz28" style="font-weight: bold;"><span v-if='item.dayNum<10'>0</span>{{item.dayNum}}</span> 天</div>
                            <!-- <p>{{item.dateTime}}</p> -->
                        </div>
                        <div class="fz15 q-py-sm text-grey-8" v-html="item.title"></div>
                    </div>
                    <allDay :day='item' :isDirect="isDirect"></allDay>
                </div>
            </template>
        </div>
    </div>
</template>
<script lang="ts">
    import oneday from './oneday.vue'
    import twoday from './twoday.vue'
    import threeday from './threeday.vue'
    import fourday from './fourday.vue'
    import fiveday from './fiveday.vue'
    import allDay from './allDay.vue'
import { date,useQuasar } from "quasar";
import { inject, reactive, toRefs, defineComponent,onMounted,ref,watch, getCurrentInstance,nextTick  } from 'vue';
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from 'src/config/dictionary'
import scheduledTripService from 'src/api/scheduledTrip'
import { ApiResult } from 'src/@types/enumHelper'
import message from 'src/utils/message'
export default defineComponent({
  components: { allDay,oneday,twoday,threeday,fourday,fiveday },
  props: ['tripList', 'isDirect', 'clickDate','days','currentHeightDay'],
  setup(props,context) {
    const $router = useRouter()
    const { t } = useI18n()
    const $q = useQuasar()
    let {ctx:that, proxy} = getCurrentInstance()
    
    const data= reactive({
        tripList: props.tripList,
        isDirect: props.isDirect,
        clickDate: props.clickDate,
        currentHeightDay: props.currentHeightDay,
        isReady: false,
        trips: [],
        daysClass: []
    })
    watch(()=>props.days,(n,o)=>{
        if (n) {
            data.daysClass = n
            nextTick(()=>{
                try{
                    data.daysClass.forEach((x,i)=>{
                        var object=document.querySelector(`#days_${i}`); 
                        x.top = object.getBoundingClientRect().top+60
                    })
                } catch (error) {
                    console.log('----异常')
                }
                setTimeout(()=>{
                    context.emit('getTopNum',JSON.stringify(data.daysClass))
                },1000)
            })
            //that.$forceUpdate()
        }
    },{deep: true})
    watch(()=>props.clickDate,(n,o)=>{
        if (val) {
            data.trips.forEach((x, index) => {
                x.dateTime = methods.setDate(index);
            })
            //that.$forceUpdate()
        }
    },{deep: true})
    const methods = {
        init() {
            data.tripList.forEach((x, j) => {
                let useDinnerTypeBy = ''
                let jin = [],
                    jiu = [],
                    jiu2 = [],
                    jiao = [],
                    dadian = [],
                    tips = [],
                    activy = [],
                    can = {
                        breakfirst: '敬请自理',
                        lanuch: '敬请自理',
                        dinner: '敬请自理'
                    }
                x.dayArray.forEach((y, index) => {
                    if (y.type == 7 && y.childItem.title != '') {
                        let obj = {
                            title: y.childItem.title,
                            content: y.childItem.description,
                            img: y.childItem.imaArray && y.childItem.imaArray.length > 0 ? y
                                .childItem.imaArray[0].url : '',
                            ticketName: '',
                            playTimeHour: null,
                            playTimeMinutes: null,
                            url: ''
                        }
                        dadian.push(obj)
                    } else if (y.type == 1 && y.childItem.subTraffic.length > 0) {
                        let title = ''
                        y.childItem.subTraffic.forEach((z, i) => {
                            title += z.startCityName
                            if (z.arrivalType == 1) {
                                title += '<i class="iconfont icon-feiji"></i>'
                            } else if (z.arrivalType == 2) {
                                title += '<i class="iconfont icon-bus"></i>'
                            } else if (z.arrivalType == 3) {
                                title += '<i class="iconfont icon-icon31"></i>'
                            } else {
                                title += '<i class="iconfont icon-gaotiedongche"></i>'
                            }
                            if (i + 1 == y.childItem.subTraffic.length) {
                                title += z.arrivalCityName
                            }
                        })
                        let obj = {
                            title: title,
                            content: y.childItem.description,
                            img: '',
                            ticketName: '',
                            playTimeHour: null,
                            playTimeMinutes: null,
                            url: ''
                        }
                        jiao.push(obj)
                    } else if (y.type == 2 && y.childItem.imaArray.length > 0) {
                        let obj = {
                            title: y.childItem.couponsName,
                            content: y.childItem.description,
                            img: y.childItem.imaArray[0].url,
                            ticketName: y.childItem.couponsTicketName,
                            playTimeHour: y.childItem.playTimeHour,
                            playTimeMinutes: y.childItem.playTimeMinutes,
                            url: y.childItem.url,
                            scenicJson: y.childItem.scenicJson,
                            videoPath: y.childItem.imaArray[0].videoPath,
                            fileType: y.childItem.imaArray[0].fileType,
                        }
                        jin.push(obj)
                    } else if (y.type == 3 && y.childItem.hotelName != '' && y.childItem.imaArray
                        .length > 0) {
                        let obj = {
                            title: y.childItem.hotelName,
                            content: y.childItem.description,
                            img: y.childItem.imaArray[0].url,
                            ticketName: '',
                            playTimeHour: null,
                            playTimeMinutes: null,
                            url: y.childItem.url
                        }
                        jiu.push(obj)
                    } else if (y.type == 4) {
                        if (y.childItem.useDinnerType == "1") {
                            can.breakfirst = y.childItem.dinnerName
                        } else if (y.childItem.useDinnerType == "2") {
                            can.lanuch = y.childItem.dinnerName
                        } else if (y.childItem.useDinnerType == "3") {
                            can.dinner = y.childItem.dinnerName
                        }
                    } else if (y.type == 5) {
                        let obj = {
                            title: '自由活动',
                            content: y.childItem.description,
                            img: '',
                            ticketName: '',
                            playTimeHour: null,
                            playTimeMinutes: null,
                            url: ''
                        }
                        activy.push(obj)
                    } else if (y.type == 6) {
                        let obj = {
                            title: y.childItem.title,
                            content: y.childItem.description,
                            img: '',
                            ticketName: '',
                            playTimeHour: null,
                            playTimeMinutes: null,
                            url: ''
                        }
                        tips.push(obj)
                    }
                    if (y.type == 3) {
                        jiu2.push({
                            name: y.childItem.hotelName,
                            url: y.childItem.url,
                            status:y.childItem.status
                        });
                        useDinnerTypeBy = y.childItem.useDinnerType
                    }
                })
                if (can.breakfirst == '敬请自理' && useDinnerTypeBy.indexOf('1') != -1) {
                    can.breakfirst = '酒店内享用早餐'
                } else if (can.breakfirst == '') {
                    can.breakfirst = '方便游玩敬请自理'
                }
                if (can.lanuch == '敬请自理' && useDinnerTypeBy.indexOf('2') != -1) {
                    can.lanuch = '酒店自助'
                } else if (can.lanuch == '') {
                    can.lanuch = '方便游玩敬请自理'
                }
                if (can.dinner == '敬请自理' && useDinnerTypeBy.indexOf('3') != -1) {
                    can.dinner = '酒店自助'
                } else if (can.dinner == '') {
                    can.dinner = '方便游玩敬请自理'
                }
                x.can = can
                let details = [];
                x.tips = tips
                x.jiu2 = jiu2
                if (jin.length > 0) {
                    details = jin
                } else if (jiu.length > 0) {
                    details = jiu
                } else if (dadian.length > 0) {
                    details = dadian
                } else if (jiao.length > 0) {
                    if (j == data.tripList.length - 1) {
                        let obj = {
                            title: '温暖的家',
                            content: '感谢您参加本次行程，期待下次与您相遇',
                            img: ''
                        }
                        details.push(obj)
                    } else {
                        details = jiao
                    }
                } else if (activy.length > 0) {
                    details = activy
                }

                x.title = dadian.length > 0 && dadian[0].title && dadian[0].title != '' ? dadian[0].title :
                    (jiao.length > 0 ? jiao[0].title : '集合出发')
                x.details = details

                if (x.details.length == 0) {
                    if (j == 0) {
                        let obj = {
                            title: '集合出发',
                            content: '向着远方的目标出发起飞',
                            img: '',
                            ticketName: '',
                            playTimeHour: null,
                            playTimeMinutes: null
                        }
                        details.push(obj)
                    } else if (j == this.tripList.length - 1) {
                        let obj = {
                            title: '温暖的家',
                            content: '感谢您参加本次行程，期待下次与您相遇',
                            img: '',
                            ticketName: '',
                            playTimeHour: null,
                            playTimeMinutes: null
                        }
                        details.push(obj)
                    }
                } else {
                    if (x.title == '集合出发') {
                        x.details.forEach(xc => {
                            if (xc.title !== undefined)
                                x.title = xc.title + '~'
                        })
                        if (x.title == '集合出发') {
                            if (j > 0 && j < tripList.length - 1)
                                x.title = '自由活动'
                        } else {
                            x.title = x.title.substring(0, x.title.length - 1)
                        }
                    }
                }
                x.islast = (j + 1) == data.tripList.length
                data.tripList[j] = x
                x.dateTime = methods.setDate(j);
            })
            data.tripList.forEach(x=>{
                x.dayArray.forEach(y=>{
                //    console.log(x.details,'----------') 
                })
                
            })
            data.trips = data.tripList
        },
        setDate (j) {
            if (j === 0) {
                return data.clickDate
            } else {
                let d = new Date(data.clickDate)
                d = d.getTime(d);
                let add = d + ((24 * 60 * 60 * 1000) * j)
                let date = new Date(add); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                let Y = date.getFullYear() + '-';
                let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                let D = date.getDate() < 10 ? ('0' + date.getDate()) + ' ' : date.getDate() + ' ';
                return Y + M + D;
            }
        },
        
    }
    methods.init()
    return {
      ...toRefs(data),
      ...methods,
    }
  }
})
</script>