
<template>
    <scroll-view
        :scroll-y="scroll"
        :style="{
            height: height,
        }"
        :scroll-top="scrollTop"
        scroll-with-animation
        class="calendar-time--wrapper"
    >
        <view class="calendar-time">
            <view
                v-for="(time, index) in timeArray"
                :key="index"
                class="calendar-time__item"
            >
                <view 
                    :style="{
                        color: (index === currentHour) ? '#00c8c8' : '#999',
                        fontWeight: (index === currentHour) ? '700' : 'normal',
                    }"
                    class="calendar-time__item__label"
                >{{ time.label }}</view>
                <view
                    :style="{
                        background: (index === currentHour) || index === 21 ? 'rgba(0, 200, 200, 0.1)' : (time.lives && time.lives.length ? '#F5F5F5' : ''),
                    }"
                    class="calendar-time__item__lives"
                >
                    <view
                        v-for="(live, liveIndex) in time.lives"
                        :key="liveIndex"
                        :ref="liveIndex === 14 ? 'scrollStart' : ''"
                        class="calendar-time__item__lives__live"
                        @tap="handleDayTap(live)"
                    >
                        <view class="calendar-time__item__lives__live--header">
                            <text class="c-gap-right-small">{{ live.doctor }}</text>
                            <text>{{ live.department }}</text>
                        </view>
                        
                        <view class="calendar-time__item__lives__live--status">
                            <view v-if="live.status === '直播中'" class="calendar-time__item__lives__living">
                                <text class="line line-first"/>
                                <text class="line line-second"/>
                                <text class="line line-third"/>
                            </view>
                            <span>{{ live.status }}</span>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </scroll-view>
</template>
<script>
/**
 * @file: 月份纬度日历
 * @author: yantingxi
 * @categories
 * @tags
 */
export default {
    config: {
        component: true
    },
    props: {
        // 目标
        target: {
            type: Number,
            default: -1
        },
        // 高度
        height: {
            type: String,
            default: 'auto'
        },
        // 是否滚动
        scroll: {
            type: Boolean,
            default: false
        },
        // 数组list
        data: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            timeArray: [],
            targetTop: 0,
            scrollTop: 0,
            currentHour: new Date().getHours()
        };
    },
    created() {
        this.timeArray = this.generateTimeArray(this.data);
        const livingInfo = this.timeArray.filter(item => item.lives.some(live => live.status === '直播中'))[0] || '';
        let positionIndex = 21;
        if (livingInfo) {
            positionIndex = livingInfo.hour;
        }
        this.$mpUpdated().then(() => this.scrollTop = 60 * positionIndex - 30);
    },
    methods: {
        generateTimeArray(data) {
            let arr = [];
            const timeLen = 24;
            for (let i = 0; i < timeLen; i++) {
                const label = i <= 12 ? `上午${i}点` : `下午${i - 12}点`;
                const obj = {
                    label,
                    hour: i,
                    lives: []
                };
                arr.push(obj);
            }
            data && data.length && data.forEach(item => {
                arr[Number(item.hour) || 0].lives = item.lives || [];
            });
            return arr;
        },
        handleDayTap(live) {
            // 直播块点击
            this.$emit('handleCalendarForTimeDayTap', live);
        }
    }
};
</script>
<style lang="less" scoped>
.calendar-time {
    padding-left: 17px;
    margin-top: 60px;
    &--wrapper {
        position: relative;
    }
    &__item {
        position: relative;
        display: flex;
        height: 60px;
        width: 100%;
        
        &__label {
            font-size: .12rem;
            color: #999;
            width: 50px;
            flex: 0 0 auto;
            transform: translateY(-50%);
            height: min-content;
            line-height: 1;
        }

        &__lives {
            position: relative;
            padding: 6.5px 0;
            margin-left: 13px;
            display: flex;
            flex: 1 1 auto;
            overflow-x: scroll;
            &__living {
                position: relative;
                display: inline-block;
                width: .1rem;
                height: .07rem;
                bottom: .02rem;
                margin-right: .06rem;
                & .line {
                    position: absolute;
                    top: 0;
                    width: .02rem;
                    height: .1rem;
                    border-radius: .2rem;
                    background-color: #00c8c8;
                    -webkit-animation: lineChange 680ms linear infinite;
                            animation: lineChange 680ms linear infinite;
                }
                & .line-first {
                    left: 0;
                    -webkit-transform: scaleY(.8);
                            transform: scaleY(.8);
                    -webkit-animation-delay: -340ms;
                            animation-delay: -340ms;
                }
                & .line-second {
                    left: .04rem;
                    -webkit-transform: scaleY(.4);
                            transform: scaleY(.4);
                    -webkit-animation-delay: -170ms;
                            animation-delay: -170ms;
                }
                & .line-third {
                    -webkit-transform: scaleY(.6);
                            transform: scaleY(.6);
                    left: .08rem;
                }
            }

            &::-webkit-scrollbar {
                display: none;
            }
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 100%;
                height: 1px;
                transform: scaleY(0.333);
                background: #e0e0e0;
            }

            &::after {
                content: '';
                display: block;
                width: 10px;
                flex: 0 0 auto;
            }

            &__live {
                border-radius: 6px;
                overflow: hidden;
                border: 1px solid #00C8C8;
                box-sizing: border-box;
                font-size: .12rem;
                line-height: 1;
                flex: 0 0 auto;
                margin-left: 10px;
                &--header {
                    padding: 5px 8px;
                    display: flex;
                    background: #00C8C8;
                    color: #FFF;
                    font-weight: 700;
                }
                &--status {
                    background: #FFF;
                    color: #00C8C8;
                    line-height: 24px;
                    text-align: center;
                }
            }
        }
    }
}
@keyframes lineChange {
    0%   {
        -webkit-transform: scaleY(.3);
                transform: scaleY(.3);
    }
    25%  {
        -webkit-transform: scaleY(.7);
                transform: scaleY(.7);
    }
    50%  {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(.3);
                transform: scaleY(.3);
    }
}
@-moz-keyframes lineChange /* Firefox */ {
    0%   {
        -webkit-transform: scaleY(.3);
                transform: scaleY(.3);
    }
    25%  {
        -webkit-transform: scaleY(.7);
                transform: scaleY(.7);
    }
    50%  {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(.3);
                transform: scaleY(.3);
    }
}
@-webkit-keyframes lineChange /* Safari 和 Chrome */ {
    0%   {
        -webkit-transform: scaleY(.3);
                transform: scaleY(.3);
    }
    25%  {
        -webkit-transform: scaleY(.7);
                transform: scaleY(.7);
    }
    50%  {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(.3);
                transform: scaleY(.3);
    }
}
</style>

