<template>
    <div class="editer">
        <div class="top-bar">
            <div class="left">
                <div class="project-name">{{ name }}-{{ floorLocalName }}</div>
                <div class="project-type">/ {{ folderName }}</div>
                <div class="project-save">自动保存成功- v {{ version }}</div>
            </div>
            <div class="right">
                <el-tooltip class="item" effect="dark" content="下载" placement="bottom">
                    <span @click="saveTopoImg" class="icon iconfont icon-xiazai"></span>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="保存" placement="bottom">
                    <span @click="saveTopo" class="icon iconfont icon-baocun"></span>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="发布" placement="bottom">
                    <span @click="issueTopo" class="icon iconfont icon-fabu"></span>
                </el-tooltip>
            </div>
        </div>
        <plan-editer></plan-editer>
    </div>
</template>
<script>
// import topoEditer from "@/components/editview/topoEditer.vue";
import planEditer from "@/components/editview/planEditer.vue";
import bus from "@/bus/bus";
import { mapState, mapMutations } from "vuex";
export default {
    components: { planEditer },
    data() {
        return {};
    },
    computed: {
        ...mapState(["name", "folderName", "floorLocalName", "version"]),
    },
    created() {
        // window.vm = this;
        this.init();
    },
    methods: {
        ...mapMutations(["SETPROJECT", "INITEQUIPMAP", "INITSTYLE", "INITRULELIST", "INITOBJEXTINFO"]),
        init() {
            // 重新加载时初始化 vuex 数据
            this.INITEQUIPMAP();
            this.INITOBJEXTINFO({});
            this.INITSTYLE({});
            this.INITRULELIST([]);
        },
        // 保存图片
        saveTopo() {
            bus.$emit("saveTopo");
        },
        // 发布
        issueTopo() {
            bus.$emit("issueTopo");
        },
        // 下载图片
        saveTopoImg() {
            bus.$emit("saveTopoImg");
        },
    },
    watch: {
        "$route.query": {
            handler(newVal) {
                this.SETPROJECT(newVal);
            },
            immediate: true,
            deep: true,
        },
    },
};
</script>
<style lang="less" scoped>
.editer {
    width: 100%;
    height: calc(~"100% - 37px");
    .top-bar {
        width: 100%;
        height: 36px;
        border-bottom: 1px solid #e4e5e7;
        padding: 0 20px 0 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
            display: flex;
            align-items: center;
            .project-name {
                font-size: 16px;
                color: #1f2429;
                font-weight: bold;
            }
            .project-type {
                color: #8d9399;
                font-size: 14px;
                margin: 0 4px;
            }
            .project-save {
                color: #8d9399;
                font-size: 12px;
                margin-left: 16px;
            }
        }
        .right {
            span {
                margin-left: 20px;
                cursor: pointer;
            }
        }
    }
}
</style>
