<template>
  <div v-if="ifCanBeEdite == true" style="height: 31px">
    <img
      :preview="false"
      :src="require('../../../assets/mxgraph-source/images/top-menu/刷新.png')"
      alt="刷新"
      @click="handleRefresh"
      class="imagebtn"
      :width="22"
      style="margin-top: 3px"
    />
    <a-divider type="vertical" class="spaider"></a-divider>
    <img
      :preview="false"
      :src="require('../../../assets/mxgraph-source/images/top-menu/复制.png')"
      fit="fill"
      title="复制"
      @click="handleCopy"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="require('../../../assets/mxgraph-source/images/top-menu/粘贴.png')"
      fit="fill"
      title="粘贴"
      @click="handlePast"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="require('../../../assets/mxgraph-source/images/top-menu/剪切.png')"
      fit="fill"
      title="剪切"
      @click="handleCut"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="require('../../../assets/mxgraph-source/images/top-menu/删 除.png')"
      fit="fill"
      title="删除"
      @click="handleDel"
      class="imagebtn"
      :width="22"
    />
    <a-divider type="vertical" class="spaider"></a-divider>
    <img
      :preview="false"
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/左对齐.png')
      "
      fit="fill"
      title="左对齐"
      @click="handleAlignLeft"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/右对齐.png')
      "
      fit="fill"
      title="右对齐"
      @click="handleAlignRight"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/上对齐.png')
      "
      fit="fill"
      title="上对齐"
      @click="handleAlignTop"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/下对齐.png')
      "
      fit="fill"
      title="下对齐"
      @click="handleAlignBottom"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/水平居中对齐.png')
      "
      fit="fill"
      title="水平居中对齐"
      @click="handleAlignMiddle"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/垂直居中对齐.png')
      "
      fit="fill"
      title="垂直居中对齐"
      @click="handleAlignCenter"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/水平等间距-01.png')
      "
      fit="fill"
      title="垂直分布"
      @click="handleAlignVer"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/垂直等间距-01.png')
      "
      fit="fill"
      title="水平分布"
      @click="handleAlignHor"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/等宽分布.png')
      "
      fit="fill"
      title="等宽"
      @click="handleEqualWidth"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/等高分布.png')
      "
      fit="fill"
      title="等高"
      @click="handleEqualHeight"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/箭头-拖动.png')
      "
      fit="fill"
      title="等大"
      @click="handleEqualAll"
      class="imagebtn"
      :width="22"
    />
    <a-divider type="vertical" class="spaider"></a-divider>
    <img
      :preview="false"
      :src="require('../../../assets/mxgraph-source/images/top-menu/顶层.png')"
      fit="fill"
      title="移到前"
      @click="handleToFont"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="require('../../../assets/mxgraph-source/images/top-menu/底层.png')"
      fit="fill"
      title="移到后"
      @click="handleToBack"
      class="imagebtn"
      :width="22"
    />
    <a-divider type="vertical" class="spaider"></a-divider>
    <img
      :preview="false"
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/返回 (1).png')
      "
      fit="fill"
      title="返回"
      @click="handleExitGroup"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="require('../../../assets/mxgraph-source/images/top-menu/保存.png')"
      fit="fill"
      title="保存文件"
      @click="handleSave"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="require('../../../assets/mxgraph-source/images/top-menu/打印.png')"
      fit="fill"
      title="打印"
      @click="handlePrint"
      class="imagebtn"
      :width="22"
    />
    <a-popover
      placement="bottom"
      trigger="click"
      v-model:open="showImportComponents"
    >
      <img
        :preview="false"
        style="margin-left: 4px"
        :src="
          require('../../../assets/mxgraph-source/images/top-menu/导入.png')
        "
        fit="fill"
        title="引入"
        name="reference"
        class="imagebtn"
        :width="22"
      />
      <template #content>
        <data-import
          @fileChange="handleFileChange"
          v-if="showImportComponents"
        ></data-import>
      </template>
    </a-popover>
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/关闭眼睛.png')
      "
      fit="fill"
      v-if="ifCanBeEdite == true && showPeoperty == true"
      title="关闭属性面板"
      @click="handleClosePorperty"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="require('../../../assets/mxgraph-source/images/top-menu/结构.png')"
      fit="fill"
      title="显示树形结构"
      @click="handleShowGraph"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="require('../../../assets/mxgraph-source/images/images/bell.png')"
      fit="fill"
      title="设置属性"
      v-if="showEnable"
      @click="handleSetEnable"
      class="imagebtn"
      :width="22"
    />
    <a-divider type="vertical" class="spaider" v-if="showKeyWord"></a-divider>
    <a-popover
      placement="bottom"
      trigger="click"
      v-model:open="showKeyWordsComponent"
    >
      <img
        :preview="false"
        :src="
          require('../../../assets/mxgraph-source/images/top-menu/交换.png')
        "
        fit="fill"
        title="更改关键字"
        name="reference"
        class="imagebtn"
        :width="22"
        v-if="showKeyWord"
      />
      <template #content>
        <keyWord
          :mxgraph="mxgraph"
          :MaxKeyWord="MaxKeyWord"
          @onOK="handleKeyWordsChange"
          @onCancel="handleKeyWordCancel"
          v-if="showKeyWordsComponent"
        >
        </keyWord>
      </template>
    </a-popover>
    <img
      style="margin-left: 4px; float: right"
      v-if="isFullScreen == false"
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/fullscreen.png')
      "
      fit="fill"
      title="全屏"
      @click="handleFullScreen"
      class="imagebtn"
    />
    <img
      style="margin-left: 4px; float: right"
      v-else
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/fullscreen-exit.png')
      "
      fit="fill"
      title="全屏"
      @click="handleFullScreen"
      class="imagebtn"
    />
  </div>
  <div v-else style="height: 31px">
    <img
      :preview="false"
      :src="require('../../../assets/mxgraph-source/images/top-menu/刷新.png')"
      alt="刷新"
      @click="handleRefresh"
      class="imagebtn"
      :width="22"
      style="margin-top: 3px"
    />
    <img
      :preview="false"
      :src="require('../../../assets/mxgraph-source/images/top-menu/返回.png')"
      fit="fill"
      title="返回"
      @click="handleExitGroup"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="require('../../../assets/mxgraph-source/images/top-menu/保存.png')"
      fit="fill"
      title="保存"
      @click="handleSave"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="require('../../../assets/mxgraph-source/images/top-menu/打印.png')"
      fit="fill"
      title="打印"
      @click="handlePrint"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/关闭眼睛.png')
      "
      fit="fill"
      title="关闭属性面板"
      v-if="showPeoperty == true"
      @click="handleClosePorperty"
      class="imagebtn"
      :width="22"
    />
    <img
      :preview="false"
      style="margin-left: 4px"
      :src="require('../../../assets/mxgraph-source/images/top-menu/结构.png')"
      fit="fill"
      title="显示树形结构"
      @click="handleShowGraph"
      class="imagebtn"
      :width="22"
    />
    <img
      style="margin-left: 4px; float: right"
      v-if="isFullScreen == false"
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/fullscreen.png')
      "
      fit="fill"
      title="全屏"
      @click="handleFullScreen"
      class="imagebtn"
    />
    <img
      style="margin-left: 4px; float: right"
      v-else
      :src="
        require('../../../assets/mxgraph-source/images/top-menu/fullscreen-exit.png')
      "
      fit="fill"
      title="全屏"
      @click="handleFullScreen"
      class="imagebtn"
    />
  </div>
</template>

<script setup lang="ts">
import dataImport from "./import-dlg/data-import.vue";
import keyWord from "./change-keyword/index.vue";
import { ref } from "vue";
const props = defineProps({
  ifCanBeEdite: {
    type: Boolean,
    default: true,
  },
  showPeoperty: {
    type: Boolean,
    default: false,
  },
  showEnable: {
    type: Boolean,
    default: false,
  },
  mxgraph: {
    type: Object,
    default() {
      return {};
    },
  },
  showKeyWord: {
    type: Boolean,
    default: true,
  },
  MaxKeyWord: {
    type: [Number, String],
  },
  isFullScreen: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits([
  "copy",
  "full-screen",
  "refresh",
  "delete",
  "larger",
  "small",
  "ScalChange",
  "save",
  "print",
  "import",
  "closePorperty",
  "selectAll",
  "selectNone",
  "cut",
  "past",
  "undo",
  "redo",
  "up",
  "next",
  "entergroup",
  "exitgroup",
  "alignLeft",
  "alignRight",
  "alignTop",
  "alignBottom",
  "alignMiddle",
  "alignCenter",
  "alignVer",
  "alignHor",
  "equalWidth",
  "equalHeight",
  "equalAll",
  "toFont",
  "toBack",
  "new",
  "showGraphTree",
  "setEnablePorper",
  "import",
  "Insert",
  "changeKeyWord",
]);

const image = require("../../../assets/mxgraph-source/images/images/plus.png");
const value = ref(1);
const showImportComponents = ref(false);
const showInsertComponents = ref(false);
const showKeyWordsComponent = ref(false);
const ifGraphShow = ref(false);

const handleRefresh = function () {
  emits("refresh", 1);
};
const handleDel = function () {
  emits("delete", 1);
};
const handleLarg = function () {
  emits("larger", 1);
};
const handleSmall = function () {
  emits("small", 1);
};
const handleChangeScale = function (value: number) {
  //放大缩小倍数改变
  emits("ScalChange", value);
};
const handleFullScreen = function () {
  emits("full-screen", 1);
};
const handleUnset = function () {
  value.value = 1;
  emits("ScalChange", 1);
};
const handleSave = function () {
  emits("save", 1);
};
const handlePrint = function () {
  emits("print", 1);
};
const handleImport = function () {
  //引入xml文件
  emits("import", 1);
};
const handleClosePorperty = function () {
  emits("closePorperty", 1);
};
const handleSelectAll = function () {
  emits("selectAll", 1);
};
const handleSelectNone = function () {
  emits("selectNone", 1);
};
const handleCut = function () {
  emits("cut", 1);
};
const handleCopy = function () {
  emits("copy", 1);
};
const handlePast = function () {
  emits("past", 1);
};
const handleUndo = function () {
  emits("undo", 1);
};
const handleRedo = function () {
  emits("redo", 1);
};
const handleUp = function () {
  emits("up", 1);
};
const handleNext = function () {
  emits("next", 1);
};
const handleEnterGroup = function () {
  emits("entergroup", 1); //进入组
};
const handleExitGroup = function () {
  emits("exitgroup", 1); //退出组
};
const handleAlignLeft = function () {
  emits("alignLeft", 1); //左对齐
};
const handleAlignRight = function () {
  emits("alignRight", 1); //右对齐
};
const handleAlignTop = function () {
  emits("alignTop", 1); //顶对齐
};
const handleAlignBottom = function () {
  emits("alignBottom", 1); //右对齐
};
const handleAlignMiddle = function () {
  //
  emits("alignMiddle", 1); //水平分布
};
const handleAlignCenter = function () {
  //
  emits("alignCenter", 1); //垂直分布
};
const handleAlignVer = function () {
  emits("alignVer", 1); //垂直分布
};
const handleAlignHor = function () {
  emits("alignHor", 1); //水平分布
};
const handleEqualWidth = function () {
  //等宽
  emits("equalWidth", 1);
};
const handleEqualHeight = function () {
  //等宽
  emits("equalHeight", 1);
};
const handleEqualAll = function () {
  //等大
  emits("equalAll", 1);
};
const handleToFont = function () {
  //移到前
  emits("toFont", 1); //移到前
};
const handleToBack = function () {
  //移到前
  emits("toBack", 1); //移到后
};
const handleNew = function () {
  //新建画布
  emits("new", 1);
};
const handleShowGraph = function () {
  ifGraphShow.value = !ifGraphShow.value;
  emits("showGraphTree", ifGraphShow.value);
};
const handleSetEnable = function () {
  emits("setEnablePorper", 1);
};
const handleFileChange = function (event: any) {
  showImportComponents.value = false;
  emits("import", event);
};
const handleFileInsert = function (event: any) {
  showInsertComponents.value = false;
  emits("Insert", event);
};
const handleKeyWordsChange = function (event: any) {
  showKeyWordsComponent.value = false;
  emits("changeKeyWord", event);
};
const handleKeyWordCancel = function () {
  showKeyWordsComponent.value = false;
};

// };
</script>

<style scoped>
.scaleClass {
  position: relative;
  margin-left: 2px;
}

/* .a-select.scaleClass.a-select--mini>>>.a-input.a-input--mini.a-input--suffix {
  position: absolute !important;
  margin-top: -19px !important;
} */

.a-select.scaleClass.a-select--mini
  :deep(.a-input.a-input--mini.a-input--suffix) {
  position: absolute !important;
  margin-top: -19px !important;
}

.imagebtn {
  /* background-color: #67c23a; */
  height: 22px;
  width: 22px;
  cursor: pointer;
  margin-top: 2px;
}

.spaider {
  height: 20px;
  /* margin-bottom: 15px; */
  margin-left: 4px;
  margin-right: 4px;
}
</style>
