<template>
    <div class="timeLED">
        <div class="box">
            <div class="time_box" :class="timeClassObj.class_h_1">
                <span class="time_stroke d1"></span><span class="time_stroke d2"></span><span class="time_stroke d3"></span><span class="time_stroke d4"></span><span class="time_stroke d5"></span><span class="time_stroke d6"></span><span class="time_stroke d7"></span>
            </div>
            <div class="time_box" :class="timeClassObj.class_h_2">
                <span class="time_stroke d1"></span><span class="time_stroke d2"></span><span class="time_stroke d3"></span><span class="time_stroke d4"></span><span class="time_stroke d5"></span><span class="time_stroke d6"></span><span class="time_stroke d7"></span>
            </div>
            <div class="time_box dots"></div>
            <div class="time_box" :class="timeClassObj.class_m_1">
                <span class="time_stroke d1"></span><span class="time_stroke d2"></span><span class="time_stroke d3"></span><span class="time_stroke d4"></span><span class="time_stroke d5"></span><span class="time_stroke d6"></span><span class="time_stroke d7"></span>
            </div>
            <div class="time_box" :class="timeClassObj.class_m_2">
                <span class="time_stroke d1"></span><span class="time_stroke d2"></span><span class="time_stroke d3"></span><span class="time_stroke d4"></span><span class="time_stroke d5"></span><span class="time_stroke d6"></span><span class="time_stroke d7"></span>
            </div>
            <div class="time_box dots"></div>
            <div class="time_box" :class="timeClassObj.class_s_1">
                <span class="time_stroke d1"></span><span class="time_stroke d2"></span><span class="time_stroke d3"></span><span class="time_stroke d4"></span><span class="time_stroke d5"></span><span class="time_stroke d6"></span><span class="time_stroke d7"></span>
            </div>
            <div class="time_box" :class="timeClassObj.class_s_2">
                <span class="time_stroke d1"></span><span class="time_stroke d2"></span><span class="time_stroke d3"></span><span class="time_stroke d4"></span><span class="time_stroke d5"></span><span class="time_stroke d6"></span><span class="time_stroke d7"></span>
            </div>
        </div>
    </div>
</template>

<script>
import {formatDate} from '@/utils/util.js';
export default {
    name: 'timeLED',
    props: {},
    data () {
        let nowDate = new Date();
        return {
            time: nowDate,
            gapDateObj: nowDate,
            timeClassObj: {
                class_h_1: [],
                class_h_2: [],
                class_m_1: [],
                class_m_2: [],
                class_s_1: [],
                class_s_2: []
            }
        }
    },
    watch: {},
    mounted () {
        let that = this;
        that.getSystemTime();
        setInterval(function () {
            that.timeAdd();
            // console.log(formatDate(that.time, 'yyyy/MM/dd HH:mm:ss'))
        }, 1000);
        setInterval(function () {
            that.getSystemTime();
            // console.log(formatDate(that.time, 'yyyy/MM/dd HH:mm:ss'))
        }, 1000 * 60 * 60); // 每隔1小时同步一次时间
    },
    methods: {
        getSystemTime () {
            let that = this;
            that.axios.get('pass/ems/v1/common/getSysdate/', {
                headers: {
                    'Cache-Control': 'no-cache' // 不允许缓存
                }
            })
                .then(function (res) {
                    if (res.code === '0') {
                        that.gapDateObj = new Date();
                        that.time = new Date(formatDate(res.data.replace(/-/g, '/'), 'yyyy/MM/dd HH:mm:ss')); // IE的Date对象只能识别yyyy/MM/dd格式
                    } else {
                        that.$message.error(res.message);
                    }
                }).catch(function () {
                });
        },
        timeAdd () {
            let that = this;
            let nowDate = new Date();
            let milliseconds = nowDate - that.gapDateObj;
            if (milliseconds > 5000 || milliseconds < 0) {
                // 两次系统时间的变化量过大则重新与服务器同步时间
                that.getSystemTime();
            }
            that.gapDateObj = nowDate;
            that.time.setMilliseconds(that.time.getMilliseconds() + milliseconds);
            let tim_HH = that.time.getHours();
            if (tim_HH < 10) {
                tim_HH = '0' + tim_HH;
            } else {
                tim_HH = '' + tim_HH;
            }
            let tim_mm = that.time.getMinutes();
            if (tim_mm < 10) {
                tim_mm = '0' + tim_mm;
            } else {
                tim_mm = '' + tim_mm;
            }
            let tim_ss = that.time.getSeconds();
            if (tim_ss < 10) {
                tim_ss = '0' + tim_ss;
            } else {
                tim_ss = '' + tim_ss;
            }
            that.timeClassObj.class_h_1 = [ 'time_' + tim_HH.substr(0, 1) ];
            that.timeClassObj.class_h_2 = [ 'time_' + tim_HH.substr(1, 1) ];
            that.timeClassObj.class_m_1 = [ 'time_' + tim_mm.substr(0, 1) ];
            that.timeClassObj.class_m_2 = [ 'time_' + tim_mm.substr(1, 1) ];
            that.timeClassObj.class_s_1 = [ 'time_' + tim_ss.substr(0, 1) ];
            that.timeClassObj.class_s_2 = [ 'time_' + tim_ss.substr(1, 1) ];
        }
    }
}
</script>

<style lang="less">
.timeLED {
    display: inline-block;
    .box {
        display: inline-block;
        padding: 3px;
        height: 28px;
        .time_box {
            text-align: left;
            position: relative;
            width: 14px;
            height: 22px;
            display: inline-block;
            margin: 0 1px;
            .time_stroke {
                background-color: #fff5ff;
                border-color: #fff5ff;
                opacity: 0;
                position: absolute;
                box-sizing: border-box;
                transition: 0.25s;
                &:before,
                &:after {
                    content: "";
                    position: absolute;
                    box-sizing: border-box;
                    width: 0;
                    height: 0;
                    border: 2.5px solid transparent;
                }
            }
            .d1 {
                height: 2px;
                width: 8px;
                top: 0;
                left: 3px;
            }
            .d1:before {
                border-width: 0 2px 2px 0;
                border-right-color: inherit;
                left: -2px;
            }
            .d1:after {
                border-width: 0 0 2px 2px;
                border-left-color: inherit;
                right: -2px;
            }
            .d2 {
                height: 2px;
                width: 8px;
                top: 10px;
                left: 3px;
            }
            .d2:before {
                border-width: 1px 2px 1px;
                border-right-color: inherit;
                left: -4px;
            }
            .d2:after {
                border-width: 1px 2px 1px;
                border-left-color: inherit;
                right: -4px;
            }
            .d3 {
                height: 2px;
                width: 8px;
                top: 20px;
                left: 3px;
            }
            .d3:before {
                border-width: 2px 2px 0 0;
                border-right-color: inherit;
                left: -2px;
            }
            .d3:after {
                border-width: 2px 0 0 2px;
                border-left-color: inherit;
                right: -2px;
            }
            .d4 {
                width: 2px;
                height: 6px;
                top: 3px;
                left: 0;
            }
            .d4:before {
                border-width: 0 2px 2px 0;
                border-bottom-color: inherit;
                top: -2px;
            }
            .d4:after {
                border-width: 0 0 2px 2px;
                border-left-color: inherit;
                bottom: -2px;
            }
            .d5 {
                width: 2px;
                height: 6px;
                top: 3px;
                right: 0;
            }
            .d5:before {
                border-width: 0 0 2px 2px;
                border-bottom-color: inherit;
                top: -2px;
            }
            .d5:after {
                border-width: 2px 0 0 2px;
                border-top-color: inherit;
                bottom: -2px;
            }
            .d6 {
                width: 2px;
                height: 6px;
                top: 13px;
                left: 0;
            }
            .d6:before {
                border-width: 0 2px 2px 0;
                border-bottom-color: inherit;
                top: -2px;
            }
            .d6:after {
                border-width: 0 0 2px 2px;
                border-left-color: inherit;
                bottom: -2px;
            }
            .d7 {
                width: 2px;
                height: 6px;
                top: 13px;
                right: 0;
            }
            .d7:before {
                border-width: 0 0 2px 2px;
                border-bottom-color: inherit;
                top: -2px;
            }
            .d7:after {
                border-width: 2px 0 0 2px;
                border-top-color: inherit;
                bottom: -2px;
            }
        }
        .time_0 {
            .d1, .d3, .d4, .d5, .d6, .d7 {
                opacity: 1;
            }
        }
        .time_1 {
            .d5, .d7 {
                opacity: 1;
            }
        }
        .time_2 {
            .d1, .d2, .d3, .d5, .d6 {
                opacity: 1;
            }
        }
        .time_3 {
            .d1, .d2, .d3, .d5, .d7 {
                opacity: 1;
            }
        }
        .time_4 {
            .d2, .d4, .d5, .d7 {
                opacity: 1;
            }
        }
        .time_5 {
            .d1, .d2, .d3, .d4, .d7 {
                opacity: 1;
            }
        }
        .time_6 {
            .d1, .d2, .d3, .d4, .d6, .d7 {
                opacity: 1;
            }
        }
        .time_7 {
            .d1, .d5, .d7 {
                opacity: 1;
            }
        }
        .time_8 {
            .d1, .d2, .d3, .d4, .d5, .d6, .d7 {
                opacity: 1;
            }
        }
        .time_9 {
            .d1, .d2, .d3, .d4, .d5, .d7 {
                opacity: 1;
            }
        }
        .dots {
            width: 2px;
            &:before,
            &:after {
                width: 2px;
                height: 2px;
                content: "";
                position: absolute;
                left: 0;
                top: 6px;
                background-color: #fff5ff;
            }
            &:after {
                top: 15px;
            }
        }
    }
}
</style>
