<template>
  <div style="position:relative ;z-index: 999;color: #fff;">
    <img :src="AngleUrl" alt="" style="width:100%;position:absolute;top: 0px;">
    <canvas ref="myCanvas" width="1280" height="720" style="
          position: relative;
          z-index: 2;
          display: block;margin: auto;background: transparent;cursor: pointer">
    </canvas>
    <div class="anglePopup" v-drag>
      <div style="font-family: 'Arial Negreta', 'Arial Normal', 'Arial' font-weight: 700;
    font-style: normal; font-size: 16px;color: #fff;">表计参数</div>
      <el-table :data="ArrData"  style="width: 100%;margin-top:10px;height: 260px; overflow: auto;"
      :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }">
        <el-table-column prop="index" label="序号" width="60" align="center" />
        <el-table-column prop="label" label="读数" align="center"  />
        <el-table-column prop="angle" label="角度(°)" align="center"  />
        <el-table-column  label="操作" align="center"  >
          <template #default="scope">
            <div style="display: flex;justify-content: center;align-items: center;">
              <img src="@/assets/newimg/ht_sc.png" alt="" title="删除" @click="handleDelete(scope.row.index)" style="cursor: pointer; ">
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-scrollbar height="220px">
        <div style="display:flex;text-align:center;line-height:30px;">
          <div style="width:25%;height:30px;border-right:1px solid #209f84;border-bottom:1px solid #209f84;">序号</div>
          <div style="width:25%;height:30px;border-right:1px solid #209f84;border-bottom:1px solid #209f84;">读数</div>
          <div style="width:25%;height:30px;border-right:1px solid #209f84;border-bottom:1px solid #209f84;">角度(度)</div>
          <div style="width:25%;height:30px;border-right:1px solid #209f84;border-bottom:1px solid #209f84;">删除</div>
        </div>
        <div v-for="(item, index) in ArrData" :key="index">
          <div style="display:flex;text-align:center;line-height:30px;">
            <div style="width:25%;height:30px;border-right:1px solid #209f84;border-bottom:1px solid #209f84;">
              {{ item.index }}</div>
            <div style="width:25%;height:30px;border-right:1px solid #209f84;border-bottom:1px solid #209f84;">
              {{ item.label }}</div>
            <div style="width:25%;height:30px;border-right:1px solid #209f84;border-bottom:1px solid #209f84;">
              {{ item.angle }}</div>
            <div
              style="width:25%;height:30px;border-right:1px solid #209f84;border-bottom:1px solid #209f84;display: flex;justify-content: center;align-items: center;">
              <img src="@/assets/3d/sc.png" alt="" title="删除" @click="handleDelete(index)" style="cursor: pointer; ">
            </div>
          </div>
        </div>
      </el-scrollbar> -->

    </div>
    <div style="display: flex;align-items: center;height: 40px;color: #000;width:120%;">
      <!-- <div style="width:150px ;padding-left: 10px;color: rgb(247, 0, 0);">测量角度：{{ draw_angle }}</div> -->
      <div style="padding-left: 20px;color:#fff;width:135px;"> 表计量程读数：</div>
      <el-input v-model="label" style="margin-left:10px;width: 80px;" />
      <div style="padding-left: 0px;margin-left: 10px;color:#fff;width:60px;"> 相对角度:</div>
      <el-input class="du" v-model="draw_angle" style="margin-left:10px;width: 100px;color: red ;font-weight: 600;">
        <template #append>度</template>
      </el-input>
      <el-button type="primary" style="margin-left:10px" @click="clickSave">添加表计参数</el-button>
      <el-button type="primary" style="margin-left:650px;" @click="closeAngle">确定</el-button>

    </div>

  </div>
</template>

<script>
export default {
  props: ['AngleUrl', 'arrdata'],
  name: "TestCanvas",
  data() {
    return {
      draw_angle: null,
      index: 0,
      label: '',
      angle: '',
      arrData: [],
      ArrData: []
    }
  },
  methods: {
    setMinAngle() {
      this.angle = this.draw_angle
      // this.$emit('setMinAngle',this.min_angle)
    },
    setMaxAngle() {
      this.max_angle = this.draw_angle
      // this.$emit('setMaxAngle',this.max_angle)
    },
    closeAngle() {
      var info
      if (this.ArrData.length < 2) {
        this.$message({
          message: '至少需要两个及以上表计量程角度',
          type: 'warning'
        });
        return false
      }

      info = this.arrData
      this.$emit('closeAngle', info)
    },
    // 删除
    handleDelete(index) {
      this.ArrData.splice(index, 1)
    },
    clickSave() {
      this.angle = this.draw_angle
      this.ArrData.push({ label: Number(this.label), angle: this.angle })
      this.arrData = this.ArrData.sort(this.sortBy('label', 1));
      for (var i = 0; i < this.ArrData.length; i++) {
        for (var j = i + 1; j < this.ArrData.length; j++) {
          if (this.ArrData[i].label != undefined) {
            if (this.ArrData[i].label == this.ArrData[j].label) {
              this.$message({
                message: '表计量程读数不能相同',
                type: 'warning'
              });
              this.ArrData.pop()
              return false
            } else {
              break
            }
          }
        }
      }
      for (var i = 0; i < this.ArrData.length; i++) {
        for (var j = i + 1; j < this.ArrData.length; j++) {
          if (this.ArrData[i].angle != undefined) {
            if (Number(this.ArrData[i].angle) > Number(this.ArrData[j].angle) || Number(this.ArrData[i].angle) == Number(this.ArrData[j].angle)) {
              this.$message({
                message: '表计量程角度小于上一角度或与上一角度相等',
                type: 'warning'
              });
              this.ArrData.pop()
              return false
            } else {
              break
            }
          }
        }
      }
      this.arrData.forEach((res, index) => {
        res.index = index
      })
    },
    sortBy(attr, rev) {
      if (rev == undefined) { rev = 1 } else { (rev) ? 1 : -1; }
      return function (a, b) {
        a = a[attr];
        b = b[attr];
        if (Number(a) < Number(b)) { return rev * -1 }
        if (Number(a) > Number(b)) { return rev * 1 }
        return 0;
      }
    },
  },
  mounted: function () {
   
    if (this.arrdata) {
      if (this.arrdata.length > 2) {
        this.ArrData = JSON.parse(JSON.stringify(this.arrdata))
      }
    }
    var c = this.$refs.myCanvas;
    var ctx = c.getContext("2d");

    var moveNum = false;//声明变量
    let X1 = 0;//声明变量
    let Y1 = 0;//声明变量
    let X2 = 0;//声明变量
    let Y2 = 0;//声明变量
    let X3 = 0;//声明变量
    let Y3 = 0;//声明变量
    let moveNum1 = 1;//声明变量
    let XK1 = false
    let XK2 = false
    let XK3 = false
    if (c != null) {
      c.onmousedown = (e) => {//鼠标按下事件
        var e = e || event;//解决兼容问题
        var x = e.offsetX;//找到鼠标的横坐标
        var y = e.offsetY;//鼠标的纵坐标即
        if (Math.pow(x - X1, 2) + Math.pow(y - Y1, 2) < Math.pow(5, 2)) {
          XK1 = true
          moveNum = true;
        } else {
          XK1 = false
        }
        if (Math.pow(x - X2, 2) + Math.pow(y - Y2, 2) < Math.pow(5, 2)) {
          XK2 = true
          moveNum = true;
        } else {
          XK2 = false
        }
        if (Math.pow(x - X3, 2) + Math.pow(y - Y3, 2) < Math.pow(5, 2)) {
          XK3 = true
          moveNum = true;
        } else {
          XK3 = false
        }

        if (XK1 == true || XK2 == true || XK3 == true) {
          return
        }
        ctx.lineWidth = 2;//线条的粗细
        ctx.strokeStyle = '#fff';//将颜色的值赋给线条样式
        if (moveNum1 == 1) {
          X3 = x;//声明变量 红色点
          Y3 = y;//声明变量 红色点
          X1 = x;//声明变量
          Y1 = y + 100;//声明变量

          // ctx.moveTo(x,y);//画笔的起点位置
          ctx.beginPath();
          ctx.fillStyle = '#fff'
          ctx.arc(X1, Y1, 5, 0, 2 * Math.PI);
          ctx.fill();

          ctx.beginPath();
          ctx.fillStyle = '#ff0000'
          ctx.arc(X3, Y3, 5, 0, 2 * Math.PI);
          ctx.fill();

          ctx.beginPath();
          ctx.moveTo(X1, Y1);
          ctx.lineTo(X3, Y3);
          ctx.stroke();

          moveNum1 = 2

        } else if (moveNum1 == 2) {
          X2 = x;//声明变量
          Y2 = y;//声明变量
          var e = e || event;//解决兼容问题
          ctx.beginPath();
          ctx.fillStyle = '#fff'
          ctx.arc(x, y, 5, 0, 2 * Math.PI);
          ctx.fill();
          ctx.beginPath();
          ctx.moveTo(X3, Y3);
          ctx.lineTo(X2, Y2);
          ctx.stroke();
          const getAngle = ({ x: X1, y: Y1 }, { x: X2, y: Y2 }) => {
            const dot = X1 * X2 + Y1 * Y2
            const det = X1 * Y2 - Y1 * X2
            const angle = Math.atan2(det, dot) / Math.PI * 180
            return (angle + 360) % 360
          }
          const angle = getAngle({
            x: X1 - X3,
            y: Y1 - Y3,
          }, {
            x: X2 - X3,
            y: Y2 - Y3,
          });
          this.draw_angle = angle.toFixed(1)
          moveNum = true;
          moveNum1 = 3
        } else if (moveNum1 == 3) {


        }
        // moveNum = true;//令moveNum等于true，
      };
    }

    c.onmousemove = (e) => {//鼠标移动事件
      if (moveNum == true) {
        var e = e || event;//解决兼容问题
        if (XK3 == true) {
          X3 = e.offsetX;//找到鼠标的横坐标
          Y3 = e.offsetY;//鼠标的纵坐标即
        }
        if (XK1 == true) {
          X1 = e.offsetX;//找到鼠标的横坐标
          Y1 = e.offsetY;//鼠标的纵坐标即
        }
        if (XK2 == true) {
          X2 = e.offsetX;//找到鼠标的横坐标
          Y2 = e.offsetY;//鼠标的纵坐标即
        }
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.beginPath();
        ctx.fillStyle = '#fff'
        ctx.arc(X1, Y1, 5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.fillStyle = '#ff0000'
        ctx.arc(X3, Y3, 5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(X1, Y1);
        ctx.lineTo(X3, Y3);
        ctx.stroke();
        ctx.beginPath();
        ctx.fillStyle = '#fff'
        ctx.arc(X2, Y2, 5, 0, 2 * Math.PI);
        ctx.fill();
        if (X2 != 0) {
          ctx.beginPath();
          ctx.moveTo(X3, Y3);
          ctx.lineTo(X2, Y2);
          ctx.stroke();
        }
        const getAngle = ({ x: X1, y: Y1 }, { x: X2, y: Y2 }) => {
          const dot = X1 * X2 + Y1 * Y2
          const det = X1 * Y2 - Y1 * X2
          const angle = Math.atan2(det, dot) / Math.PI * 180
          return (angle + 360) % 360
        }
        const angle = getAngle({
          x: X1 - X3,
          y: Y1 - Y3,
        }, {
          x: X2 - X3,
          y: Y2 - Y3,
        });
        this.draw_angle = angle.toFixed(1)
      }
    };
    c.onmouseup = () => {//鼠标弹起事件
      return moveNum = false;//返回moveNum为false即为无值得情况，则什么也不做即结束绘画
    };
    document.onmouseup = () => {//鼠标弹起事件
      return moveNum = false;//返回moveNum为false即为无值得情况，则什么也不做即结束绘画
    };
  }
}
</script>
<style lang="scss" scoped>
:deep(.el-input-group__append) {
  padding: 0 5px
}

.anglePopup {
  position: fixed;
  width: 360px;
  height: 340px;
  right: 380px;
  top: 75px;
  z-index: 99999;
  background: #131a25;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0px 0px 10px #40a0ff57;
}
.du {
  :deep(.el-input__inner){
    color: red !important;
  }
}
</style>
