<template>
  <div class="edit-line">
    <div class="btn-list">
      <el-button :class="[cmdStatus=='choice' ? 'heightLight' : '']" size="small" @click="choice">选择</el-button>
      <el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">画线</el-button>
      <el-button :class="[cmdStatus=='edit' ? 'heightLight' : '']" size="small" @click="edit">编辑</el-button>
      <el-button :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']" size="small" @click="deleteItem">删除</el-button>
      <el-button :class="[cmdStatus=='undo' ? 'heightLight' : '']" size="small" @click="undo">undo</el-button>
      <el-button :class="[cmdStatus=='redo' ? 'heightLight' : '']" size="small" @click="redo">redo</el-button>
      <el-button :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']" size="small" @click="eqDrawLine">垂直水平划线</el-button>
    </div>
    <div class="content">
      <div class="left">
        <canvas id="edit_line" width="700" height="460" tabindex="0" />
      </div>
      <div class="line-property">
        <el-card shadow="always">
          <div class="always-item">
            <span>线宽:</span>
            <input type="text" />
          </div>
          <div class="always-item">
            <span>线类型:</span>
            <input type="text" />
          </div>
          <div class="always-item">
            <span>线颜色:</span>
            <input type="text" />
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { SGraphScene, SGraphView } from "@persagy-web/graph/";
import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
import {  SPoint } from "@persagy-web/draw/";
import { EditLineItem } from "./../../../../../guides/edit/items/src/EditLineItem";
//注： 开发者引入 SWallItem 包为： import {SWallItem} from "@persagy-web/edit/";
export default {
  name: "line",
  data() {
    return {
        scene: null,
        view: null,
        isCreated:false, //是否创建完成
        cmdStatus: 'choice'      //选中状态

    };
  },
  mounted() {
    this.view = new SGraphView("edit_line");
    this.scene = new SGraphScene();
    this.view.scene = this.scene;

  },
  methods: {
    create() {
        this.cmdStatus = 'create';
        // this.scene.root.children = [];
        const lineItem = new EditLineItem(null, [] );
        lineItem.status = SItemStatus.Create;
           lineItem.connect("finishCreated", this, this.finishCreated);
        this.scene.addItem(lineItem);
        this.scene.grabItem = lineItem;
        this.scene.updated()
    },
    // 完成创建后的回调
    finishCreated(){
        this.cmdStatus = 'choice'
    }
  }
};
</script>

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