<template>
    <div class="display-card" :style="{top: offset+'px'}" v-if="isShowSystemTime">
        <system-time class="time" v-if="isShowSystemTime" :time="time" :zoom="1.3" :width="110" :height="32" :fine="2"
            :top="2"></system-time>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex';
    import { prefixIntrger } from '@/utils/date';
    import SystemTime from '@/views/components/systemTime/index';

    export default {
        name: 'MenuSystemTime',
        props: {
            offset: {
                type: Number
            }
        },
        components: {
            SystemTime
        },
        data() {
            return {
                time: '00:0000',
            }
        },
        watch: {
            '$store.state.training.initTime': function (initTime) {
                let date = new Date(initTime);
                this.time = `${prefixIntrger(date.getHours(), 2)}:${prefixIntrger(date.getMinutes(), 2)}${prefixIntrger(date.getSeconds(), 2)}`
            }
        },
        computed: {
            isShowSystemTime() {
                return this.$route.params.mode == 'demon' || this.$route.params.mode == 'dp' || this.$route.params.mode == 'plan' || !this.$route.params.mode;
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .display-card {
        z-index: 9;
        display: inline;
        position: absolute;
        border: 2px solid white;
        border-radius: 4px;
        left: calc(50% - 55px);
    }

    .display-card .el-row {
        line-height: 32px !important;
    }

    .display-score {
        background-color: white;
        display: -moz-inline-box;
        display: inline-block;
        text-align: left;
        height: 32px;
        line-height: 24px;
        border-radius: 4px;
        padding-left: 2px;
        margin-left: 10px;
        font-family: "Microsoft" !important;
        font-size: 18px !important;
        color: #fff;
    }

    .display-draft {
        position: absolute;
        float: right;
        right: 40px;
        bottom: 28px;
    }
</style>