<template>
    <div id="topToolBar">
        <div class="left">
            <ul>
                <li @click="topoUndo">
                    <el-tooltip class="item" effect="dark" content="撤销" placement="bottom">
                        <span class="icon iconfont icon-chehui"></span>
                    </el-tooltip>
                </li>
                <li @click="topoRedo">
                    <el-tooltip class="item" effect="dark" content="重做" placement="bottom">
                        <span class="icon iconfont icon-zhongzuo"></span>
                    </el-tooltip>
                </li>
                <li @click="copy">
                    <el-tooltip class="item" effect="dark" content="复制" placement="bottom">
                        <span class="icon iconfont">&#xe673;</span>
                    </el-tooltip>
                </li>
                <li @click="paste">
                    <el-tooltip class="item" effect="dark" content="粘贴" placement="bottom">
                        <span class="icon iconfont icon-niantie"></span>
                    </el-tooltip>
                </li>
                <li @click="deleteItem">
                    <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                        <span class="icon iconfont icon-shanchu"></span>
                    </el-tooltip>
                </li>
                <li>
                    <el-tooltip class="item" effect="dark" content="组合" placement="bottom">
                        <span class="icon iconfont icon-zuhe"></span>
                    </el-tooltip>
                </li>
                <li>
                    <el-tooltip class="item" effect="dark" content="打散" placement="bottom">
                        <span class="icon iconfont icon-dasan"></span>
                    </el-tooltip>
                </li>
                <li @click="setOrder('Top')">
                    <el-tooltip class="item" effect="dark" content="置顶" placement="bottom">
                        <span class="icon iconfont icon-zhiding"></span>
                    </el-tooltip>
                </li>
                <li @click="setOrder('Bottom')">
                    <el-tooltip class="item" effect="dark" content="置底" placement="bottom">
                        <span class="icon iconfont icon-zhidi"></span>
                    </el-tooltip>
                </li>
                <li @click="setLock()">
                    <el-tooltip class="item" effect="dark" :content="!isLock ? '解锁' : '锁定'" placement="bottom">
                        <span :class="[isLock ? 'el-icon-lock' : 'el-icon-unlock', 'lcoks']" />
                    </el-tooltip>
                </li>
            </ul>
        </div>
        <div class="rght">
            <!-- 待定 -->
        </div>
    </div>
</template>
<script>
import bus from "@/bus/bus";
export default {
    data() {
        return {
            isLock: false,
            itemList: null,
        };
    },
    methods: {
        //撤销
        topoUndo() {
            bus.$emit("topoUndo");
        },
        // 重做
        topoRedo() {
            bus.$emit("topoRedo");
        },
        // 删除item
        deleteItem() {
            bus.$emit("deleteItem");
        },
        // 复制
        copy() {
            bus.$emit("copy");
        },
        // 粘贴
        paste() {
            bus.$emit("paste");
        },
        setOrder(val) {
            bus.$emit("setOrder", val);
        },
        // 设置锁定
        setLock() {
            this.isLock = !this.isLock;
            if (!this.itemList) return;
            this.itemList.forEach((item) => {
                item.moveable = this.isLock;
            });
        },
        emitChoice(itemList) {
            if (!itemList.length) {
                this.isLock = false;
                this.itemList = null;
            } else {
                this.isLock = itemList[0].moveable;
                this.itemList = itemList;
            }
        },
    },
    mounted() {
        bus.$on("emitChoice", this.emitChoice);
        bus.$on("tooltipLock", this.setLock);
    },
};
</script>
<style lang="less">
ul,
li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#topToolBar {
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px 0 24px;
    box-sizing: border-box;
    border-bottom: 1px solid #e4e5e7;
    .left {
        ul {
            display: flex;
            li {
                display: flex;
                justify-content: center;
                flex-direction: column;
                /*width: 62px;*/
                padding: 0 7px;
                margin-left: 7px;
                font-size: 12px;
                align-items: center;
                text-align: center;
                cursor: pointer;
                img {
                    width: 16px;
                    height: 16px;
                }
                .percentage {
                    display: inline-block;
                    width: 35px;
                    border-bottom: 1px solid #c3c7cb;
                    margin: 0 13px;
                    font-size: 14px;
                }
                .dropdown-flex {
                    display: flex;
                    align-items: center;
                    .down-icon {
                        margin-left: 12px;
                    }
                }
                .lcoks {
                    font-size: 16px;
                    margin: 6px 0 4px 0;
                }
            }
        }
    }
}
</style>