<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>
        <!-- 对齐相关操作 -->
        <el-divider direction="vertical"></el-divider>
        <el-dropdown
          trigger="click"
          @command="changeAlignItem"
          placement="top-start"
        >
          <span class="el-dropdown-link">
            <i class="icon iconfont icon-zuoduiqi"></i>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" class="top-dropdown">
            <el-dropdown-item
              v-for="item in alignmentOptions"
              :key="item.value"
              :command="item.value"
              :disabled="item.disabled"
            >
              <img
                :src="require(`@/assets/images/` + item.img + `.png`)"
                alt=""
              />
              <span>{{ item.label }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-divider direction="vertical"></el-divider>

        <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="right">
      <img src="./../../assets/images/detection.png" alt="" />
      <span>关系</span>
      <!-- 下拉框卡片 -->
      <!-- <el-card class="box-card">
        <div v-for="o in 4" :key="o" class="text item">
          {{ "列表内容 " + o }}
        </div>
      </el-card> -->
    </div>
  </div>
</template>
<script>
import bus from "@/bus/bus";
import { SGraphLayoutType } from "@persagy-web/graph/lib";
export default {
  data() {
    return {
      isLock: false,
      itemList: null,
      alignmentOptions: [
        //对齐数据
        {
          value: SGraphLayoutType.Left,
          label: "左对齐",
          img: "t-left",
          disabled: true,
        },
        {
          value: SGraphLayoutType.Right,
          label: "右对齐",
          img: "t-right",
          disabled: true,
        },
        {
          value: SGraphLayoutType.Top,
          label: "顶对齐",
          img: "t-top",
          disabled: true,
        },
        {
          value: SGraphLayoutType.Bottom,
          label: "底对齐",
          img: "t-bottom",
          disabled: true,
        },
        {
          value: SGraphLayoutType.Center,
          label: "水平居中对齐",
          img: "t-center",
          disabled: true,
        },
        {
          value: SGraphLayoutType.Middle,
          label: "垂直居中对齐",
          img: "t-topandbottm",
          disabled: true,
        },
        {
          value: SGraphLayoutType.Vertical,
          label: "垂直分布",
          img: "t-vertical",
          disabled: true,
        },
        {
          value: SGraphLayoutType.Horizontal,
          label: "水平分布",
          img: "t-level",
          disabled: true,
        },
      ],
    };
  },
  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;
      }
      // 处理对齐方式
      this.handleAlign(itemList);
    },
    /**
     * 修改对齐方式
     * @param  val 选中的对齐方式类型
     */
    changeAlignItem(val) {
      bus.$emit("changeAlignItem", val);
    },

    /**
     * 处理对齐方式
     * @param itemList 选中的元素数组
     */
    handleAlign(itemList) {
      // 选中两个以上元素时,对齐方式解开禁用
      if (itemList?.length > 1) {
        this.alignmentOptions.map((v) => (v.disabled = false));
      } else {
        this.alignmentOptions.map((v) => (v.disabled = true));
      }
    },
  },
  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;
  position: relative;
  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;
        }
      }
    }
  }
  .right {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    cursor: pointer;
    font-size: 12px;
    color: #8d9399;
    z-index: 999;
    .box-card{
      width: 240px;
      max-height: 500px;
      position: absolute;
      right: 0;
      top: 40px;
      background: #ffffff;
      z-index: 999;
    }
    img {
      width: 20px;
      height: 20px;
    }
  }
}
// 对齐方式下拉按钮菜单
.top-dropdown {
  li {
    padding-left: 12px !important;
    width: 150px;
    height: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    img {
      width: 16px;
      margin-right: 5px;
      vertical-align: middle;
    }
    span {
      font-weight: 400;
      font-size: 14px;
    }
  }
  .el-dropdown-menu__item.is-disabled {
    pointer-events: initial;
    cursor: not-allowed;
  }
}
</style>