<template>
  <div style="overflow: auto; position: relative">
    <div class="svg-contain">
      <svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        style="background-color: #000000"
        viewBox="0 0 1920 1080"
        width="100%"
        height="100%"
      >
        <defs />
        <g
          style="cursor: pointer"
          v-for="(item, index) in svgLists"
          :key="item"
          :id="item.id"
          @mousedown="
            MousedownSvg(
              item.id,
              index,
              item.svgPositionX,
              item.svgPositionY,
              $event
            )
          "
          :title="item.title"
          :type="item.type"
          :transform="
            'translate(' +
            item.svgPositionX +
            ',' +
            item.svgPositionY +
            ') rotate(' +
            item.angle +
            ') scale(' +
            item.size +
            ')'
          "
        >
          <SvgComponents
            :svg_color="item.svgColor"
            :svgtype="item.type"
            :text="item.svgText"
            :font-size="item.fontSize"
            :height="item.height"
            :size="item.size"
            :svgInfoData="svgInfoData"
          ></SvgComponents>
        </g>
      </svg>
    </div>
    <div class="btns-content">
      <a-button type="primary" @click="testF">模拟硬件</a-button>
      <a-button type="primary" @click="testG">取消模拟硬件</a-button>
    </div>
  </div>
</template>
<script>
import SvgComponents from "@/components/SvgComponents.vue";
export default {
  components: { SvgComponents },
  data() {
    return {
      svgLists: [],
      svgInfoData: [],
      analogDataTimer: "", //模拟数据定时器
      userInfo: "",
      editable: false,
    };
  },
  mounted() {
    window.onbeforeunload = (e) => {
      alert(1);
      if (!this.modified) {
        return;
      }
      // 通知浏览器不要执行与事件关联的默认动作
      e.preventDefault();
      // Chrome 需要 returnValue 被设置成空字符串
      e.returnValue = "";
    };
    window.addEventListener("beforeunload", (e) => {
      alert("1", e);
      localStorage.setItem("abcde", "asdas");
    });
  },
  methods: {
    //设置表格属性
    setTableAttr(id, rowCount, colCount) {
      //根据当前id找到当前表格的index
      let tableIndex = this.svgLists.indexOf(
        this.svgLists.filter((f) => f.id == id)[0]
      );
      if (tableIndex == -1) {
        return;
      }
      let svgType = this.svgLists.filter((f) => f.id == id)[0].type;
      if (svgType != "TableSvg") {
        return;
      }
      let tableData = [];
      for (let r = 0; r < rowCount; r++) {
        let tableColDataList = [];
        for (let c = 0; c < colCount; c++) {
          if (
            this.svgLists[tableIndex].tableData.length >= r + 1 &&
            this.svgLists[tableIndex].tableData[r].cols.length >= c + 1
          ) {
            tableColDataList.push(
              this.svgLists[tableIndex].tableData[r].cols[c]
            );
          } else {
            let tableColData = {
              id: this.$UCore.GenUUid(),
              val: `${r + 1}行${c + 1}列`,
            };
            tableColDataList.push(tableColData);
          }
        }
        let tableRowData = {
          cols: tableColDataList,
        };
        tableData.push(tableRowData);
      }
      console.log(tableData);

      this.svgLists[tableIndex].tableData = tableData;

      let gAnyList = document.querySelectorAll("foreignObject");
      let data = "";
      data += " <table class='.divtable'>";
      for (var j = 0; j < tableData.length; j++) {
        data += "<tr>";
        for (var i = 0; i < tableData[j].cols.length; i++) {
          data +=
            "<td><input id=" +
            tableData[j].cols[i].id +
            " type='text' class='input' value=" +
            tableData[j].cols[i].val +
            " ></td>";
        }
        data += "</tr>";
      }
      data += "</table>";
      gAnyList[0].innerHTML = data;
      document.getElementsByClassName(".divtable")[0].style = `
        position: absolute;
        left: 0;
        top: 0;
        line-height: 20px;
        z-index: 111;
        cursor: pointer;
        font-size: 20px;`;
    },
    testF() {
      //找出所有断路器
      let anyCircuitBreakerList = this.svgLists.filter(
        (f) => f.type == "CircuitBreakerSvg"
      );
      //找出所有的电线开关
      let anyWireBreakList = this.svgLists.filter(
        (f) => f.type == "WireConnectionSvg" || f.type == "WireBreakOffSvg"
      );
      //查找所有表格值
      let anyTable = this.svgLists.filter((f) => f.type == "TableSvg")[0];
      let anyTableList;
      if (anyTable == "undefined" || anyTable == null) {
        anyTableList = [];
      } else {
        anyTableList = anyTable.tableData.map((m) => m.cols);
      }
      this.analogDataTimer = setInterval(function () {
        anyCircuitBreakerList.forEach((anyCircuitBreaker) => {
          //生成一个随机数
          let random = Math.round(Math.random() * 10);
          if (random < 5) {
            anyCircuitBreaker.svgColor = "#00FF00";
          } else {
            anyCircuitBreaker.svgColor = "#FF0000";
          }
        });
        anyWireBreakList.forEach((anyWireBreak) => {
          //生成一个随机数
          let random = Math.round(Math.random() * 10);
          if (random < 5) {
            anyWireBreak.type = "WireConnectionSvg";
            anyWireBreak.svgColor = "#FF0000";
          } else {
            anyWireBreak.type = "WireBreakOffSvg";
            anyWireBreak.svgColor = "#00FF00";
          }
        });
        anyTableList.forEach((anyTables) => {
          anyTables.forEach((anyTable) => {
            if (
              anyTable.type == "ff85bc7f-3b69-454f-8cf8-21c9f1903dd6" ||
              anyTable.id == "f8271273-d07d-4033-8b6c-6b52c04fe3e5" ||
              anyTable.id == "dc5931bc-7e8e-47f4-b28e-5bc42fb207da" ||
              anyTable.id == "560f5404-6539-422f-8fb9-77bac641e72b"
            ) {
              //生成一个随机数
              let random = Math.round(Math.random() * 100);
              anyTable.val = random;
            }
          });
        });
      }, 2000);
    },
    testG() {
      clearInterval(this.analogDataTimer);
    },
  },
  created() {
    let _this = this;
    _this.svgLists = JSON.parse(localStorage.getItem("svginfo"));

    //请求接口获取组件
    this.$axios
      .get(window.PLATFROM_CONFIG.Interface)
      .then(function (response) {
        _this.svgInfoData = response.data;
        console.log(response.data);
        console.log(JSON.stringify(response.data));
      })
      .catch(function (error) {
        console.log(error);
      });
  },
};
</script>
<style scoped lang="less">
.svg-contain {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.btns-content {
  position: fixed;
  left: 10px;
  bottom: 10px;
  button {
    margin-right: 10px;
  }
}
</style>