<template>
    <ui-editor-head :class="{ disable }">
        <span class="title">{{ title }}</span>
        <ul class="opts">
            <li><i class="iconfont icon-course1"></i></li>
            <li class="split"><b></b></li>
            <li @click="onSave"><i class="iconfont icon-save"></i></li>
            <li @click="onPublish"><i class="iconfont icon-publish"></i></li>
        </ul>
    </ui-editor-head>
</template>
<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { Loading, Dialog } from '@/global_components/'
const store = useStore()
const title = computed(() => store.getters['scene/metadata'].title)
const disable = computed(() => store.getters.outsideDisable)
const onSave = () => {
    Loading.show()
    store.dispatch('scene/save').then(res => {
        console.log(res)
        Loading.hide()
        if (res) {
            Dialog.toast('保存成功')
        }
    })
}
const onPublish = () => {
    Loading.show()
    store.dispatch('scene/publish').then(res => {
        Loading.hide()
        Dialog.toast('发布成功')
    })
}
</script>
<style lang="scss" scoped>
.ui-editor-head {
    display: flex;
    align-items: center;
    justify-content: center;
}
.title {
    font-size: 16px;
}
.opts {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    li {
        cursor: pointer;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 10px;
        margin-left: 5px;
        color: var(--editor-font-color);
        &:hover {
            color: #fff;
        }
        &.split {
            pointer-events: none;
        }
    }
    i {
        font-size: 20px;
    }
    b {
        display: block;
        width: 2px;
        height: 16px;
        background-color: rgba(255, 255, 255, 0.16);
    }
}
</style>
