<template>
  <div id="top_toolbar">
    <!-- 顶部编辑器 -->
    <div class="tit">
      <!-- <a-icon type="left" /> -->
      {{this.urlMsg.floorName}}
    </div>
    <div class="tool">
      <ul>
        <li @click="saveMsg">
          <img class="lock" :src="require(`./../../assets/images/t-save.png`)" alt />
          <span>保存</span>
        </li>
        <!-- <li>
          <a-icon type="edit" />
          <span>撤销</span>
        </li>
        <li>
          <a-icon type="edit" />
          <span>重做</span>
        </li>-->
        <li class="zoom-window">
          <div>
            <img class="lock" :src="require(`./../../assets/images/缩小.png`)" alt />
            <span class="percentage">100%</span>
            <img class="lock" :src="require(`./../../assets/images/放大 amplification.png`)" alt />
          </div>
          <span>缩放窗口</span>
        </li>
        <li>
          <a-dropdown :trigger="['click']">
            <div class="ant-dropdown-link dropdown-flex" @click="e => e.preventDefault()">
              <div>
                <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt />
                <div>对齐</div>
              </div>
              <a-icon type="caret-down" class="down-icon" />
            </div>
            <a-menu slot="overlay">
              <a-menu-item
                v-for="item in alignmentOptions"
                :key="item.value"
                @click="changeAlignItem(item.value)"
              >
                <img
                  style="width: 16px;margin-right: 5px;"
                  :src="require(`./../../assets/images/`+item.img+`.png`)"
                  alt
                />
                <span>{{item.label}}</span>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </li>
        <!-- <li>
          <a-icon type="edit" />
          <span>图层</span>
        </li>
        <li>
          <a-icon type="edit" />
          <span>组合</span>
        </li>
        <li>
          <a-icon type="edit" />
          <span>打散</span>
        </li>-->
        <li @click="lockItem">
          <Icon :name="!isLock?'lock':'unlock'" />
          <span>{{isLock?"解锁":"锁定"}}</span>
        </li>
        <li @click="deleteItem">
          <a-icon type="delete" />
          <span>删除</span>
        </li>
      </ul>
    </div>
    <div class="btn-list">
      <div class="btn-list-item" @click="publishMap">
        <Icon name="release" />
        <span>发布</span>
      </div>
    </div>
  </div>
</template>
<script>
import bus from "@/bus";
import { SGraphLayoutType } from "@saga-web/graph/lib";
import systym from "./codeMapSystem.js"
export default {
  data() {
    return {
      isLock: false, //是否锁定
      focusItem: null,
      alignmentOptions: [
        //对齐数据
        {
          value: SGraphLayoutType.Left,
          label: "左对齐",
          img: "t-left"
        },
        {
          value: SGraphLayoutType.Right,
          label: "右对齐",
          img: "t-right"
        },
        {
          value: SGraphLayoutType.Top,
          label: "顶对齐",
          img: "t-top"
        },
        {
          value: SGraphLayoutType.Bottom,
          label: "底对齐",
          img: "t-bottom"
        },
        {
          value: SGraphLayoutType.Center,
          label: "水平居中对齐",
          img: "t-center"
        },
        {
          value: SGraphLayoutType.Middle,
          label: "垂直居中对齐",
          img: "t-topandbottm"
        },
        {
          value: SGraphLayoutType.Vertical,
          label: "垂直分布",
          img: "t-vertical"
        },
        {
          value: SGraphLayoutType.Horizontal,
          label: "水平分布",
          img: "t-level"
        }
      ]
    };
  },
  methods: {
    FocusItemChanged(itemMsg) {
      this.focusItem = null;
      if (itemMsg.itemList.length == 1) {
        this.isLock = itemMsg.itemList[0].moveable;
        this.focusItem = itemMsg.itemList[0];
      }
    },
    lockItem() {
      if (this.focusItem) {
        this.isLock = !this.isLock;
        this.focusItem.moveable = this.isLock;
      } else {
        this.$message.error("请选择指定对象！", 1);
      }
    },
    saveMsg() {
      // this.$message.success("保存成功！", 1);
      bus.$emit("saveMsgItem");
    },
    // 删除item
    deleteItem() {
      console.log(this.focusItem);
      if (this.focusItem) {
        bus.$emit("deleiteItem");
        // this.focusItem = null;
        this.$message.success("删除成功", 1);
      } else {
        this.$message.error("请选择指定对象！", 1);
      }
    },
    // 发布图例
    publishMap(){
      bus.$emit("publishMap");
    },
    // 对齐item
    changeAlignItem(val) {
      bus.$emit("changeAlignItem", val);
    }
  },
  mounted() {
    bus.$on("FocusItemChanged", itemMsg => {
      console.log("itemMsg", itemMsg);
      this.FocusItemChanged(itemMsg);
    });
      bus.$on("setGraphId", setGraphId => {
      console.log("itemMsg", setGraphId);
    });
  },
  created() {
    const href = window.location.href;
    // 路由
    // const route = href.split("?")[0];
    // 参数处理
    let params = href.split("?")[1];
    if (!params) {
      // 参数有问题
      return false;
    }
    params = decodeURIComponent(params);
    // params = "categoryId=NTXT&ProjectID=5&BuildingID=1&FloorID=1"; // mock 参数
    const paramsArr = params.split("&");
    console.log("paramsArr", paramsArr);
    const obj = {};
    paramsArr.map(item => {
      const arr = item.split("=");
      obj[arr[0]] = arr[1];
    });
    this.urlMsg = obj;
    const FloorName =  this.urlMsg.FloorName ? this.urlMsg.FloorName:'';
    this.urlMsg.floorName = systym[this.urlMsg.categoryId] + '-' + FloorName;
  }
};
</script>
<style lang="less" scoped>
ul,
li {
  /*margin: 0;*/
  /*padding: 0;*/
  list-style: none;
}
#top_toolbar {
  width: 100%;
  height: 60px;
  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: space-between;
  padding: 0 24px 0 24px;
  .tit {
    // flex: 1;
    font-size: 18px;
    font-weight: bold;
    color: #1f2429;
  }
  .tool {
    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 {
          border-bottom: 1px solid #c3c7cb;
          margin: 0 13px;
          font-size: 14px;
        }
        .dropdown-flex {
          display: flex;
          align-items: center;
          .down-icon {
            margin-left: 12px;
          }
        }
      }
      li:hover {
        background: #f5f6f7;
      }
      .zoom-window {
        border-left: 1px solid #8d9399;
        border-right: 1px solid #8d9399;
      }
    }
  }
  .btn-list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    .btn-list-item {
      display: flex;
      justify-content: center;
      flex-direction: column;
      span {
        font-size: 12px;
      }
      cursor: pointer;
    }
  }
}
/deep/ .ant-dropdown-menu-item {
  display: flex;
  align-items: center;
}
</style>