<template>
  <div class="edit-line">
    <div class="btn-list">
      <el-button
        :class="[cmdStatus=='createLine' ? 'heightLight' : '']"
        size="small"
        @click="create('createLine')"
      >画线</el-button>
      <el-button
        :class="[cmdStatus=='createText' ? 'heightLight' : '']"
        size="small"
        @click="create('createText')"
      >文本</el-button>
      <el-button
        :class="[cmdStatus=='createImage' ? 'heightLight' : '']"
        size="small"
        @click="create('createImage')"
      >图片</el-button>
      <el-button size="small" @click="undo">undo</el-button>
      <el-button size="small" @click="redo">redo</el-button>
      <!-- <el-tooltip class="item" effect="dark" content="双击 item 也可进入编辑状态" placement="top-start"> -->
        <!-- <el-button :class="[cmdStatus=='edit' ? 'heightLight' : '']" size="small" @click="edit">编辑</el-button> -->
      <!-- </el-tooltip> -->
      <!-- <el-button
        :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
        size="small"
        @click="deleteItem"
      >删除</el-button> -->
    </div>
    <div class="content">
      <div class="left">
        <canvas id="edit_line" width="700" height="460" tabindex="0" />
      </div>
    </div>
  </div>
</template>

<script>
import { SGraphScene, SGraphView, SLineStyle } from "@persagy-web/graph/";
import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
import { SPoint } from "@persagy-web/draw/";
import { SMouseEvent, SUndoStack } from "@persagy-web/base/lib";
import { EditLineItem } from "./../../../../guides/edit/items/src/EditLineItem";
import { EditImageItem } from "./../../../../guides/edit/items/src/EditImageItem";
import { hexify } from "./../../../public/until/rgbaUtil";
import { EditText } from "./../../../../guides/edit/items/src/EditText";
import { SGraphAddCommand } from "./../../../../guides/edit/undo/src/SGraphAddCommand";
class SScene extends SGraphScene {
  undoStack = new SUndoStack();
  editCmd = "";
  constructor() {
    super();
    this.editCmd = "";
  }
  onMouseDown(event) {
    if (this.editCmd == "createLine") {
      this.addLine(event);
      this.clearCmdStatus();
    } else if (this.editCmd == "createText") {
      this.addText(event);
      this.clearCmdStatus();
    } else if (this.editCmd == "createImage") {
      this.addImage(event);
      this.clearCmdStatus();
    } else if (this.editCmd == "") {
      super.onMouseDown(event);
    }
  }
  //   清空命令
  clearCmdStatus() {
    this.editCmd = "";
  }
  //   新增线
  addLine(event) {
    const lineItem = new EditLineItem(null, []);
    lineItem.status = SItemStatus.Create;
    lineItem.x = event.x;
    lineItem.y = event.y;
    lineItem.connect("finishCreated", this, this.finishCreated);
    this.addItem(lineItem);
    this.undoStack.push(new SGraphAddCommand(this, lineItem));
    this.grabItem = lineItem;
  }
  //   新增文本
  addText(event) {
    const textItem = new EditText(null);
    textItem.text = "测试文本";

    textItem.moveable = true;
    textItem.x = event.x;
    textItem.y = event.y;
    this.addItem(textItem);
    this.undoStack.push(new SGraphAddCommand(this, textItem));
    this.grabItem = textItem;
    textItem.connect("finishCreated", this, this.finishCreated);
  }
  //   新增图片
  addImage(event) {
    const imageItem = new EditImageItem(null);
    imageItem.url =
      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591685374103&di=cd5a56b2e3f5e12d7145b967afbcfb7a&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F05%2F20140805191039_cuTPn.jpeg";
    imageItem.width = 100;
    imageItem.height = 100;
    imageItem.moveable = true;
    imageItem.x = event.x;
    imageItem.y = event.y;
    this.addItem(imageItem);
    this.undoStack.push(new SGraphAddCommand(this, imageItem));
  }
  //   完成item绘制
  finishCreated() {
    this.grabItem = null;
  }
  undo() {
    this.undoStack.undo();
    this.view.update();
  }
  redo() {
    this.undoStack.redo();
    this.view.update();
  }
}
//注： 开发者引入 SWallItem 包为： import {SWallItem} from "@persagy-web/edit/";
export default {
  name: "editLine",
  data() {
    return {
      scene: null,
      view: null,
      isCreated: false, //是否创建完成
      cmdStatus: "", //选中状态
    };
  },
  mounted() {
    console.log(SGraphAddCommand);
    this.view = new SGraphView("edit_line");
    this.scene = new SScene();
    this.view.scene = this.scene;
  },
  methods: {
    create(val) {
      this.scene.editCmd = val;
    },
    undo() {
      this.scene.undo();
    },
    redo() {
      this.scene.redo();
    },
  },
  watch: {},
  beforeCreate() {},
};
</script>

<style scoped lang="less">
.edit-line {
  width: 100%;
  height: 500px;
  .content {
    display: flex;
    justify-content: flex-start;
    .left {
      margin-right: 20px;
    }
    .line-property {
      width: 300px;
      margin-top: 20px;
      .always {
        width: 100%;
        height: 100%;
      }
      .always-item {
        display: flex;
        margin-top: 10px;
        justify-content: space-between;
      }
    }
  }
  .heightLight {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
}
</style>
