<template>
    <!--<p :class="[isOver?'isOverBg' : '','downTime']">-->
    <p :class="[isOver?'isOverBg' : '', isNow && !isOver? 'isNowBg' : '','downTime']">
        <span v-if="isNot || isSignUp && !isOver">{{title}}</span>
        <span v-if="isNot || isSignUp && !isOver">{{text}}</span>

        <span style="font-size: 0.25rem;"  v-if="!isSignUp && isSoon">即将开始坐诊</span>
        <!--<span v-if="!isSignUp && isSoon">{{text}}</span>-->

        <span class="isNow" v-if="isNow && !isOver">坐诊中</span>

        <span class="isOver" v-if="isOver">已结束</span>

    </p>
</template>

<script>
    export default {
        name: "DownTime",
        props:[
            'AppointmentsStartTime',
            'AppointmentsEndTime',
            'VisitStartTime',
            'VisitEndTime'
        ],
        data(){
            return{
                // 流程： 义诊预告 -> 报名中 -> 报名已结束。-> 即将开始 -> 坐诊中
                AppointmentsStart:this.AppointmentsStartTime, //预约开始时间
                AppointmentsEnd:this.AppointmentsEndTime, //预约结束时间
                VisitStart:this.VisitStartTime, // 坐诊开始时间
                VisitEnd:this.VisitEndTime, // 坐诊结束时间
                text:'--:--:--', // 倒计时文字
                title:'', //标题
                isNot:false, // 是否未开始处于预告中,
                isSignUp:false, // 是否处于报名中
                isOver:false,  // 是否坐诊已结束
                isSoon:false, // 是否即将开始坐诊
                isNow:false, // 是否正在坐诊中
                nowTime:'',  // 当前时间
            }
        },
        created() {

            // 兼容ios 时间戳
            this.AppointmentsStart = this.AppointmentsStart.split('T').join(' ').split('-').join('/');
            this.AppointmentsEnd = this.AppointmentsEnd.split('T').join(' ').split('-').join('/');
            this.VisitStart = this.VisitStart.split('T').join(' ').split('-').join('/');
            this.VisitEnd = this.VisitEnd.split('T').join(' ').split('-').join('/');

            this.DownTime();
            setInterval(()=>{
                this.DownTime();
            },1000)
        },
        methods:{
            DownTime () {

                this.nowTime = new Date().getTime(); // 当前时间

                // 兼容ios 时间戳
                let AppointmentsStartTime = new Date(this.AppointmentsStart).getTime(); //预约开始时间
                let AppointmentsEndTime = new Date(this.AppointmentsEnd).getTime(); //预约结束时间
                let VisitStartTime = new Date(this.VisitStart).getTime(); //坐诊开始时间
                let VisitEndTime = new Date(this.VisitEnd).getTime(); //坐诊结束时间

                // 是否处于预告中
                this.nowTime < AppointmentsStartTime ?(()=>{
                    this.isNot = true;
                    this.text = this.getDownTimeText(AppointmentsStartTime);
                    this.title = '报名开始倒计时';
                })():  this.isNot = false;

                // 是否处于报名中
                this.nowTime > AppointmentsStartTime && this.nowTime < AppointmentsEndTime ? (()=>{
                    this.isSignUp = true;
                    this.text = this.getDownTimeText(AppointmentsEndTime);
                    this.title = '截止报名时间';
                })(): this.isSignUp = false;

                // 是否处于 报名过后 但是未开始坐诊 的 即将开始状态
                 this.nowTime > AppointmentsEndTime && this.nowTime < VisitStartTime ? (()=>{
                     this.isSoon = true;
                     this.text = this.getDownTimeText(VisitStartTime);
                 })():  this.isSoon = false;

                //是否正在进行坐诊中
                 this.nowTime > VisitStartTime && this.nowTime < VisitEndTime ? this.isNow = true: this.isNow = false;

                //是否已结束
                this.nowTime > VisitEndTime? this.isOver = true:    this.isOver = false;

            },
            formate (time) {
                if(time>=10){
                    return time
                }else{
                    return `0${time}`
                }
            },


            /*
            * 参数 time = 毫秒数
            * */
            getDownTimeText(time){

                let Timer = parseInt((time - this.nowTime)/1000) //获得相差秒数
                let d = parseInt(Timer/(24*60*60))
                let h = this.formate(parseInt(Timer/(60*60)))
                let m = this.formate(parseInt(Timer/60%60))
                let s = this.formate(parseInt(Timer%60))
                return  `${h}:${m}:${s}`

            }
        }



    }
</script>

<style lang="less" scoped>

    .downTime {
        width: 28% !important;
        background: linear-gradient(to right, #ff9002, #ff6700);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
        >  span {
            color: #fff;
            line-height: 1.2;
        }

        >  span:nth-child(1) {
            font-size: .2rem;
        }

        >  span:nth-child(2) {
            font-size: .3rem;
        }
    }

    .isOver,.isNow{
        font-size: .3rem !important;
        color: #fff !important;
    }
    .isOverBg{
        background: #989898 !important;
    }
    .isNowBg{
        background: #4ca0ff !important;
    }
</style>
