<template>
    <div class="footer">
        <div>
            <span class="translatable_copyright_left" style="color:#fff;">可可乐博（深圳）科技有限公司 © </span>
            <span id="copyright_middle" style="color:#fff;">{{year}}</span>
            <span class="translatable_copyright_right" style="color:#fff;">版权所有</span>
        </div>
        <div style="">
            <span @click="updateLogVisible = true" style="cursor: pointer;">
                <span class="translatable_update_logs" style="color: #fff;">更新日志</span>
                <i class="material-icons sketch_name_icon"
                    style="margin-left:5px;cursor: pointer;position: relative;top: 7px;">message</i>
            </span>
            <span class="vertical-separator" style="padding: 4px 6px 4px 6px;"></span>
            <span>
                <a id="help" target="_blank" href="//pi-help.cocorobo.cn" style="position:relative">

                    <span class="translatable_help_board" style="color: #fff;">Help</span>
                    <img class="nav-icon" :src="helpImg"
                        style="height: 20px;margin-left: 5px;position: relative;top: -8px;">
                </a>
            </span>
            <span class="vertical-separator" style="padding: 4px 6px 4px 6px;"></span>
            <span>CocoBlockly Pi</span>
        </div>
    </div>
    <el-dialog v-model="updateLogVisible" title="更新日志">
        <div>111111111</div>
        <div>111111111</div><div>111111111</div>
        <div>111111111</div>
    </el-dialog>
</template>
<script setup>
import { ref } from 'vue';
import helpImg from '@/assets/img/nav_help.png'

const updateLogVisible = ref(false)
const year = new Date().getFullYear()
const updateLogModel = ()=>{
    console.log("更新日志弹框")
}
</script>
<style lang="scss" scoped>
.footer {
    padding: 0 1.5rem;
    width: 100%;
    height: 60px;
    display: flex;
    background: #2c4fcd;
    justify-content: space-between;
    color: #fff;
    // line-height: 60px;
    align-items:center;
    
}
</style>