<template>
  <div class="edit-line">
    <!-- 所有按钮 -->
    <div class="btn-list">
      <el-button
        :class="[cmdStatus=='create' ? 'heightLight' : '']"
        size="small"
        @click="create"
      >创建多边形</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>
      <el-tooltip class="item" effect="dark" content="长按 Shoft 配合左键也可触发该功能" placement="top-start">
        <el-button
          :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']"
          size="small"
          @click="eqDrawLine"
        >垂直水平绘制</el-button>
      </el-tooltip>
    </div>
    <div class="content">
      <div class="left">
        <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="lineWidth"
              @change="changeLineWidth"
              :min="1"
              :max="50"
            ></el-input-number>
          </div>
          <div class="always-item">
            <span>线类型:</span>
            <el-select
              style="width:130px"
              size="small"
              v-model="lineType"
              @change="changeType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="always-item">
            <span>线颜色:</span>
            <el-color-picker v-model="lineColor" @change="changeColor" show-alpha></el-color-picker>
          </div>
          <div class="always-item">
            <span>填充色:</span>
            <el-color-picker v-model="fillColor" @change="changeFillColor" show-alpha></el-color-picker>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { SGraphScene, SGraphView, SLineStyle } from "@persagy-web/graph/";
import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
import { SPoint ,SColor} from "@persagy-web/draw/";
//注： 开发者引入 EditPolygonItem 包为： import {EditPolygonItem} from "@persagy-web/edit/";
import { EditPolygonItem } from "./../../../../../guides/edit/items/src/EditPolygonItem";
import { hexify } from "./../../../../public/until/rgbaUtil";
export default {
  name: "editpolygon",
  data() {
    return {
      scene: null,       //场景
      view: null,        //view实例
      isCreated: false,  //是否创建完成
      cmdStatus: "",     //选中状态
      polygonItem: null, //存放创建的Item
      lineWidth: 1,      //border线宽
      lineColor: "",     //border线颜色
      fillColor:"",      //填充色
      lineType: "",      //border线类型
      options: [
        {
          value: "Solid",
          label: "实线"
        },
        {
          value: "Dashed",
          label: "虚线"
        },
        {
          value: "Dotted",
          label: "点"
        }
      ]
    };
  },
  mounted() {
    this.view = new SGraphView("edit_polygon");
    this.scene = new SGraphScene();
    this.view.scene = this.scene;
  },
  methods: {
    create() {
      this.cmdStatus = "create";
      this.scene.root.children = [];
      this.polygonItem = new EditPolygonItem(null);
      this.polygonItem.status = SItemStatus.Create;
      this.polygonItem.connect("finishCreated", this, this.finishCreated);
      this.scene.addItem(this.polygonItem);
      this.scene.grabItem = this.polygonItem;
      this.view.update();
    },
    deleteItem() {
      this.cmdStatus = "";
      this.scene.removeItem(this.polygonItem);
      this.polygonItem = null;
      this.view.update();
    },
    edit() {
      if (this.polygonItem) {
        if (this.polygonItem.status == SItemStatus.Normal) {
          this.scene.grabItem = this.polygonItem;
          this.polygonItem.status = SItemStatus.Edit;
          // this.polygonItem.verAndLeve = false;
          this.cmdStatus = "edit";
        } else {
          this.polygonItem.status = SItemStatus.Normal;
          this.scene.grabItem = null;
          this.cmdStatus = "";
        }
      }
    },
    eqDrawLine() {
      this.cmdStatus = "eqDrawLine";
      this.scene.root.children = [];
      this.polygonItem = new EditPolygonItem(null, []);
      this.polygonItem.verAndLeve = true;
      this.polygonItem.status = SItemStatus.Create;
      this.polygonItem.connect("finishCreated", this, this.finishCreated);
      this.polygonItem.moveable = true;
      this.scene.addItem(this.polygonItem);
      this.scene.grabItem = this.polygonItem;
      this.view.update();
    },
    // 改变线宽属性
    changeLineWidth(val) {
      if (this.polygonItem) {
        this.lineWidth = val;
        this.polygonItem.lineWidth = val;
      }
    },
    // 改变颜色
    changeColor(val) {
      if (this.polygonItem) {
        this.lineColor = hexify(val);
        this.polygonItem.strokeColor = new SColor(this.lineColor);
      }
    },
     // 改变填充颜色
    changeFillColor(val) {
      if (this.polygonItem) {
        this.fillColor = hexify(val);
        this.polygonItem.fillColor = new SColor(this.lineColor);
      }
    },
    //改变线得类型
    changeType(val) {
      if (this.polygonItem) {
        this.polygonItem.lineStyle = SLineStyle[val];
      }
    },
    // 完成创建后的回调
    finishCreated() {
      this.cmdStatus = "";
    }
  },
  watch: {
    polygonItem(val) {
      if (val) {
        this.lineWidth = val.lineWidth; // 线宽
        this.lineStyle = val.lineStyle; // 线条样式
        this.lineColor = val.strokeColor.value; // 线条填充色
        this.fillColor = val.fillColor.value; // 线条填充色
        this.lineType = this.options[val.lineStyle].value;
      } else {
        this.lineWidth = 0;
      }
    }
  }
};
</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>
