<template>
  <div id="topToolBar">
    <div class="left">
      <ul>
        <li @click="topoUndo">
          <img
            class="lock"
            :src="require(`./../../assets/images/undo.png`)"
            alt
          />
          <span>撤销</span>
        </li>
        <li @click="topoRedo">
          <img
            class="lock"
            :src="require(`./../../assets/images/redo.png`)"
            alt
          />
          <span>重做</span>
        </li>
        <li @click="copy">
          <img
            class="lock"
            :src="require(`./../../assets/images/copy.png`)"
            alt
          />
          <span>复制</span>
        </li>
        <li @click="paste">
          <img
            class="lock"
            :src="require(`./../../assets/images/past.png`)"
            alt
          />
          <span>粘贴</span>
        </li>
        <li @click="deleteItem">
          <img
            class="lock"
            :src="require(`./../../assets/images/delete.png`)"
            alt
          />
          <span>删除</span>
        </li>
        <li>
          <span class="lock icon iconfont">&#xe66d;</span>
          <span>组合</span>
        </li>
        <li>
          <span class="icon iconfont">&#xe66e;</span>
          <span>打散</span>
        </li>
        <li @click="setOrder('Top')">
          <span class="icon iconfont icon-zhiding"></span>
          <span>置顶</span>
        </li>
        <li @click="setOrder('Bottom')">
          <span class="icon iconfont">&#xe66a;</span>
          <span>置底</span>
        </li>
        <li @click="setLock()">
          <i :class="isLock ? 'el-icon-lock' : 'el-icon-unlock'" />
          <span>{{ !isLock ? "解锁" : "锁定" }}</span>
        </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;
  .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;
          }
        }
      }
    }
  }
}
</style>