<template>
  <div class="edit-line">
    <!-- 所有按钮 -->
    <div class="btn-list">
    </div>
    <div class="content">
      <div class="left" id="left">
        <!-- <textarea name="" class="text" cols="30" rows="10"></textarea> -->
        <canvas id="edit_polygon" width="700" height="460" tabindex="0" />
      </div>
      <div class="line-property">
        <el-card shadow="always">
          <div slot="header" class="clearfix">
            <span>属性修改</span>
          </div>
          <div class="always-item">
            <span>字号:</span>
            <el-input-number size="small" v-model="size" @change="updateSize" :min="1" :max="50"></el-input-number>
          </div>
          <div class="always-item">
            <span>文本框:</span>
            <el-input
              v-model="text"
              @change="handleChangeText"
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 1}"
              placeholder="请输入内容"
              style="width:200px;"
            ></el-input>
          </div>
          <div class="always-item">
            <span>线颜色:</span>
            <el-color-picker v-model="color" @change="changeColor" show-alpha></el-color-picker>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {
  SGraphScene,
  SGraphView,
  SGraphPropertyCommand,
  SGraphMoveCommand
} from "@persagy-web/graph/";
import { SUndoStack } from "@persagy-web/base/lib";
import { SFont } from "@persagy-web/draw/lib";
import { SPoint, SColor } from "@persagy-web/draw/";
//注： 开发者引入 SImageItem 包为： import {SImageItem} from "@persagy-web/edit/";
import { EditText } from "./../../../../../guides/edit/items/src/EditText";
import { hexify } from "./../../../../public/until/rgbaUtil";
class SScene extends SGraphScene {
  undoStack = new SUndoStack();
  textItem = new EditText(null);

  constructor() {
    super();
    this.textItem.moveable = true;
    this.textItem.x = 100;
    this.textItem.y = 100;
    this.addItem(this.textItem);
    this.textItem.connect("onMove", this, this.onItemMove.bind(this));
  }

  updateText(str) {
    if (this.textItem.text !== str) {
      let old = this.textItem.text;
      this.textItem.text = str;
      this.undoStack.push(
        new SGraphPropertyCommand(this, this.textItem, "text", old, str)
      );
    }
  }

  updateColor(color) {
    if (this.textItem.color !== color) {
      let old = this.textItem.color;
      this.textItem.color = color;
      this.undoStack.push(
        new SGraphPropertyCommand(this, this.textItem, "color", old, color)
      );
    }
  }

  updateSize(size) {
    if (this.textItem.font.size !== size) {
      let old = new SFont(this.textItem.font);
      let font = new SFont(this.textItem.font);
      font.size = size;
      this.textItem.font = font;
      this.undoStack.push(
        new SGraphPropertyCommand(this, this.textItem, "font", old, font)
      );
    }
  }

  onItemMove(item, ...arg) {
    this.undoStack.push(
      new SGraphMoveCommand(this, item, arg[0][0], arg[0][1])
    );
  }
}

class TestView extends SGraphView {
  constructor() {
    super("edit_polygon");
  }
}

export default {
  name: "edittext",
  data() {
    return {
      scene: new SScene(),
      text: "测试文本",
      size: 20,
      color: "#333333"
    };
  },
  mounted() {
    let view = new TestView();
    this.scene.updateText(this.text);
    this.scene.updateColor(this.color);
    this.scene.updateSize(this.size);
    view.scene = this.scene;
    // this.scene.onMouseUp = this.onMouseUp;
  },
  methods: {
    handleChangeText(text) {
      this.scene.updateText(text);
    },
    handleChangeColor(color) {
      this.scene.updateColor(color);
    },
    updateSize(size) {
      this.scene.updateSize(size);
    },
    undo() {
      this.scene.undoStack.undo();
    },
    redo() {
      this.scene.undoStack.redo();
    },
    reset() {
      this.text = "测试文本";
      this.size = 20;
      this.color = "#333333";
      this.scene.updateText(this.text);
      this.scene.updateColor(this.color);
      this.scene.updateSize(this.size);
    },
    // 改变颜色
    changeColor(val) {
      this.scene.updateColor(hexify(val));
    },
    ///////////////////////////////////
    //// 以下为测试代码，请忽略
    // 设置tooltip位置
    /**
     * raduis 灵敏范围
     * e 鼠标事件对象
     * tipDom 浮动得dom
     * boxDom 最外层盒子
     * offset 偏移量
     */
    toolTipPosition(radius, e, tipDom, offset = 0) {
      // 滚动高度
      const screenTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const screenLeft =
        document.documentElement.scrollLeft || document.body.scrollLeft;
      radius = radius + offset;
      const mapBox = document.getElementById("edit_polygon");
      // 测试边界mousePosition =  1(右下) 2 （右上）3 （左上） 4 （左下）
      const mousePosition = this.Boxboundary(radius, e, mapBox);
      const absPosition = this.offsetTL(mapBox);
      const absPositionLeft = absPosition.left;
      const absPositionTop = absPosition.top;
      const mClientY = e.clientY + screenTop;
      const mClientX = e.clientX + screenLeft;
      const fuzzy_model_width = tipDom.offsetWidth;
      const fuzzy_model_height = tipDom.offsetHeight;
      // let  offsetTL
      if (mousePosition == 2) {
        tipDom.style.left = `${mClientX - absPositionLeft + offset}px`;
        tipDom.style.top = `${mClientY -
          fuzzy_model_height -
          absPositionTop -
          offset}px`;
      } else if (mousePosition == 3) {
        tipDom.style.left = `${mClientX -
          fuzzy_model_width -
          absPositionLeft -
          offset}px`;
        tipDom.style.top = `${mClientY -
          fuzzy_model_height -
          absPositionTop -
          offset}px`;
      } else if (mousePosition == 4) {
        tipDom.style.left = `${mClientX -
          fuzzy_model_width -
          absPositionLeft -
          offset}px`;
        tipDom.style.top = `${mClientY - absPositionTop + offset}px`;
      } else {
        tipDom.style.left = `${mClientX - absPositionLeft + offset}px`;
        tipDom.style.top = `${mClientY - absPositionTop + offset}px`;
      }
    },
    Boxboundary(radius, event, box) {
      const screenTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const boxWidth = Number(box.style.width.slice(0, -2));
      const boxHeight = Number(box.style.height.slice(0, -2));
      const absPosition = this.offsetTL(box);
      const boxClientX = absPosition.left;
      const boxClientY = absPosition.top;
      const mouseX = event.clientX;
      const mouseY = event.clientY + screenTop;
      if (mouseY >= boxClientY + boxHeight - radius) {
        if (mouseX <= radius + boxClientX) {
          return 2;
        } else if (mouseX >= boxClientX + boxWidth - radius) {
          return 3;
        } else {
          return 2;
        }
      } else if (mouseX >= boxClientX + boxWidth - radius) {
        return 4;
      } else {
        return 1;
      }
    },
    offsetTL(obj) {
      //获取到body的offsetTop和offsetLeft
      var t = 0,
        l = 0;
      while (obj) {
        t = t + obj.offsetTop;
        l = l + obj.offsetLeft;
        obj = obj.offsetParent;
      }
      return {
        top: t,
        left: l
      };
    },
    onMouseUp(event) {
      const dom = "<textarea autofocus ref='textarea' class='text'></textarea>";
      let parentDom = document.getElementById("left");
      parentDom.innerHTML = parentDom.innerHTML + dom;
      const textareaDom = this.$refs.textarea;
      // console.log('textareaDom',parentDom.children[0])
      this.toolTipPosition(1, event, textareaDom, 0);
    }
  },
  watch: {
    // cmdStatus(val) {
    //   this.scene.cmdStatus = val;
    // }
  }
};
</script>

<style scoped lang="less">
.text {
  overflow: auto;
  word-break: break-all;
  outline: none;
  // background: #409eff;
  position: absolute;
  left: 0;
  top: 0;
}
.edit-line {
  width: 100%;
  height: 500px;
  position: relative;
  .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>
