<template>
  <el-dialog
    class="pictureTagsDialog"
    title="图片绘制"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="1262px"
  >
    <div class="picPannel">
      <div class="imgbox" v-if="picsrc" v-loading="loading">
        <img ref="picJpg" :src="picsrc" />
        <canvas
          id="myCanvas"
          class="myCanvas"
          ref="myCanvas"
          @mousedown="mousedown"
          @mouseup="mouseup"
          @mousemove="mousemove"
        ></canvas>
        <!-- <canvas v-else id="myCanvas" class="myCanvas" ref="myCanvas"></canvas> -->
      </div>
      <div class="imgbox" v-else>
        <img ref="picJpg" src="../../../../../assets/img/nopic.jpg" />
        <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
      </div>

      <div class="setBox">
        <div class="infoCompany">
          <!-- <p><label>电压等级：</label><span>220kv</span></p> -->
          <p>
            <label>线路名称：</label><span>{{ pictureData.linename }}</span>
          </p>
          <p>
            <label>杆塔名称：</label><span>{{ pictureData.towername }}</span>
          </p>
          <p>
            <label>装置名称：</label><span>{{ pictureData.cmdid }}</span>
          </p>
          <p>
            <label>选择通道：</label>
            <el-select
              v-model="picvalue"
              placeholder="请选择"
              @change="changePic($event)"
            >
              <el-option
                v-for="item in picoptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </p>
        </div>
        <div class="setColor">
          <p>
            <label>颜色：</label
            ><el-color-picker v-model="color"></el-color-picker>
          </p>
          <p>
            <label>线宽：</label>
            <el-input-number
              v-model="num"
              controls-position="right"
              @change="handleChange"
              :min="1"
              :max="10"
            ></el-input-number>
          </p>
          <p>
            <el-button type="primary" @click="restCanvas">重新绘制</el-button>
            <!-- <el-button type="primary" @click="saveCanvas">保存绘制</el-button> -->
          </p>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" @click="submitForm()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { updateCoordinate, getCoordinate } from "@/utils/api/index";
export default {
  props: {
    title: String,
  },
  data() {
    return {
      canvas: null,
      ctx: null,
      imgpic: null,
      drawingSurfaceImageData: "",
      color: "#00ff00",
      num: 5,
      flag: false,
      x: 0,
      y: 0,
      isShow: false,
      fileList: [],
      pictureData: "",
      picoptions: [],
      picvalue: "",
      linePoints: [],
      localPoints: [],
      picsrc: "",
      channelId: "", //通道id
      termId: "",
      markId: "",
      cmdid: "",
      photoId: "",
      loading: false,
      nopic: require("@/assets/img/nopic.jpg"),
    };
  },
  mounted() {},
  methods: {
    //切换通道
    changePic(val) {
      var obj = {};
      obj = this.picoptions.find(function (i) {
        return i.id === val;
      });
      console.log(obj);
      // console.log(id);
      this.picsrc = obj.path;
      this.channelId = obj.id;
      this.photoId = obj.photoId;
      this.restCanvas();
      this.getcanvansPic(this.pictureData, this.channelId);
      // console.log(this.picsrc);
    },
    //获取线宽
    handleChange(value) {
      console.log(value);
    },
    // 保存确定操作
    submitForm() {
      this.isShow = false;
      this.saveCanvas();
      this.$parent.terminalList(); //刷新
    },
    display(val) {
      console.log(val);
      this.isShow = true;
      this.pictureData = val; //获取当前列表数据
      this.picoptions = val.list; //获取所有通道
      this.channelId = val.list[0].id;
      this.picvalue = val.list[0].name; //获取第一个通道
      this.termId = val.id; //装置id
      this.getcanvansPic(val, this.channelId);
    },
    hide() {
      this.isShow = false;
      this.pictureData = "";
      this.picoptions = [];
      this.picvalue = "";
      this.picsrc = "";
    },
    getcanvansPic(val, channelid) {
      this.loading = true;
      getCoordinate({
        channelId: channelid,
        needPic: "0",
        termId: this.termId,
      })
        .then((res) => {
          console.log(res);
          this.markId = res.data.markId;

          if (res.data.path !== null) {
            this.picsrc = res.data.path;
            if (res.data.list.length !== 0) {
              this.localPoints = res.data.list;
              this.drawline();
            }
            this.loading = false;
          } else {
            this.picsrc = this.nopic;
            this.loading = false;
          }
        })
        .catch((err) => {});

      // this.picsrc = val.list[0].path;

      // this.markId = val.markId;
      // this.cmdid = val.cmdid;
      // this.photoId = val.list[0].photoId;
      console.log("this.canvas");
      this.$nextTick(function () {
        // codeing
        this.canvas = this.$refs.myCanvas;
        this.imgpic = this.$refs.picJpg;
        console.log(this.canvas);
        console.log(this.imgpic);
        this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
        this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
        this.ctx = this.canvas.getContext("2d");
        //console.log(localStorage.getItem("piclinePoints"));
      });
    },
    mousedown(e) {
      //console.log("鼠标落下");
      this.saveDrawingSurface();
      this.flag = true;
      this.x = e.offsetX; // 鼠标落下时的X
      this.y = e.offsetY; // 鼠标落下时的Y
      console.log(this.x, this.y);
      console.log(this.flag);
    },
    mouseup(e) {
      //console.log("鼠标抬起");
      console.log(
        this.x / this.imgpic.width,
        this.y / this.imgpic.height,
        e.offsetX / this.imgpic.width,
        e.offsetY / this.imgpic.height
      );
      this.drawRect(e);
      this.flag = false;
      this.linePoints.push({
        x1: this.x / this.imgpic.width,
        y1: this.y / this.imgpic.height,
        x2: e.offsetX / this.imgpic.width,
        y2: e.offsetY / this.imgpic.height,
      });
      console.log(this.linePoints);
    },
    //保存和恢复绘图面板

    saveDrawingSurface() {
      this.drawingSurfaceImageData = this.ctx.getImageData(
        0,
        0,
        this.canvas.width,
        this.canvas.height
      );
    },

    restoreDrawingSurface() {
      this.ctx.putImageData(this.drawingSurfaceImageData, 0, 0);
    },

    mousemove(e) {
      //console.log("鼠标移动");
      if (this.flag) {
        this.restoreDrawingSurface();
        this.drawRect(e);
      }
    },
    drawRect(e) {
      if (this.flag) {
        console.log("绘制图形");
        let x = this.x;
        let y = this.y;
        // ctx.save();
        this.ctx.beginPath();
        //设置线条颜色，必须放在绘制之前
        this.ctx.strokeStyle = this.color;
        // 线宽设置，必须放在绘制之前
        this.ctx.lineWidth = this.num;
        // console.log(x, y, e.offsetX, e.offsetY);
        // this.ctx.strokeRect(x, y, e.offsetX - x, e.offsetY - y);

        this.ctx.moveTo(x, y);
        this.ctx.lineTo(e.offsetX, e.offsetY);
        // this.ctx.moveTo(this.defult[0].x1, this.defult[0].y1);
        // this.ctx.lineTo(this.defult[0].x2, this.defult[0].y2);
        this.ctx.closePath();

        this.ctx.stroke();
      } else {
        console.log("aaaaaaaa");
      }
    },
    drawline() {
      console.log(this.localPoints);
      this.ctx.beginPath();
      //设置线条颜色，必须放在绘制之前
      this.ctx.strokeStyle = this.color;
      // 线宽设置，必须放在绘制之前
      this.ctx.lineWidth = this.num;
      if (this.localPoints.length !== 0) {
        for (var i = 0; i < this.localPoints.length; i++) {
          this.ctx.moveTo(
            this.localPoints[i].x1 * this.imgpic.width,
            this.localPoints[i].y1 * this.imgpic.height
          );
          this.ctx.lineTo(
            this.localPoints[i].x2 * this.imgpic.width,
            this.localPoints[i].y2 * this.imgpic.height
          );
        }
      }

      // this.ctx.moveTo(x, y);
      // this.ctx.lineTo(e.offsetX, e.offsetY);

      this.ctx.closePath();

      this.ctx.stroke();
    },
    //点击保存
    saveCanvas() {
      console.log(this.linePoints);
      updateCoordinate({
        boderWidth: this.num,
        channelId: this.channelId,
        color: this.color,
        height: this.imgpic.height,
        id: this.markId,
        list: this.linePoints,
        termId: this.termId,
        width: this.imgpic.width,
      })
        .then((res) => {
          this.localPoints = [];
          console.log(this.linePoints);
          console.log("qing");
          console.log(res);
          this.$message({
            type: "success",
            message: "绘制保存成功",
            showClose: true,
          });
        })
        .catch((err) => {});
    },
    restCanvas() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.linePoints = [];
      console.log(this.linePoints);
    },
  },
};
</script>
<style lang="less">
.pictureTagsDialog {
  .el-dialog {
    height: 672px;
    .el-dialog__body {
      height: 540px;
    }
  }

  .picPannel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    height: 100%;
    .imgbox {
      //flex: 1;
      width: 960px;
      height: 540px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      .myCanvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }

    .setBox {
      width: 230px;
      padding: 12px;
      border: 3px solid #2d8cf0;
      .infoCompany {
        display: flex;
        flex-direction: column;
        line-height: 32px;
        margin-bottom: 16px;
      }
    }
    .setColor {
      display: flex;
      flex-direction: column;
      line-height: 32px;
      p {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
      }
    }
  }
}
</style>
