<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-red">第 <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>
    import oneday from './oneday'
    import twoday from './twoday'
    import threeday from './threeday'
    import fourday from './fourday'
    import fiveday from './fiveday'
    import allDay from './allDay'
    export default {
        props: ['tripList', 'isDirect', 'clickDate','days','currentHeightDay'],
        components: {
            allDay,
            oneday,
            twoday,
            threeday,
            fourday,
            fiveday
        },
        watch: {
            days: {
                handler: function (val, oldval) {
                    if (val) {
                        this.daysClass = val
                        let that = this
                        this.$nextTick(()=>{
                            try{
                                this.daysClass.forEach((x,i)=>{
                                    var object=document.getElementById(`days_${i}`); 
                                    x.top = object.getBoundingClientRect().top+60
                                })
                            } catch (error) {
                                console.log('----异常')
                            }
                            setTimeout(()=>{
                            
                                this.$emit('getTopNum',JSON.stringify(this.daysClass))
                            },1000)
                        })
                        this.$forceUpdate()
                    }
                },
                // immediate: true,
                deep: true //对象内部的属性监听，也叫深度监听
            },
            clickDate: {
                handler: function (val, oldval) {
                    if (val) {
                        this.trips.forEach((x, index) => {
                            x.dateTime = this.setDate(index);
                        })
                        this.$forceUpdate()
                    }
                },
                deep: true //对象内部的属性监听，也叫深度监听
            },
        },
        mounted() {
            this.init()
        },
        data() {
            return {
                isReady: false,
                trips: [],
                daysClass: []
            }
        },
        methods: {
            init() {
                this.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 == this.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) == this.tripList.length
                    this.$set(this.tripList, j, x)
                    x.dateTime = this.setDate(j);
                })
                this.tripList.forEach(x=>{
                    x.dayArray.forEach(y=>{
                    //    console.log(x.details,'----------') 
                    })
                    
                })
                this.trips = this.tripList
            },
            setDate: function (j) {
                if (j === 0) {
                    return this.clickDate
                } else {
                    let d = new Date(this.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;
                }
            },
        }
    }
</script>