<template>
  <section class="mainbox" v-if="svgForList">
    <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: rgba(0, 244, 253, 0.1);
            border: 1px solid rgba(0, 244, 253, 0.1);
          "
          viewBox="0 0 1920 1080"
          width="100%"
          height="100%"
        >
          <defs />
          <g
            style="cursor: pointer"
            v-for="(item, index) in svgLists"
            :key="index"
            :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"
              :size="item.size"
              :height="item.height"
              :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>
        <a-button type="primary" @click="editChart">编辑</a-button>
      </div>
    </div>
  </section>
</template>
<script>
import SvgComponents from "@/components/SvgComponents.vue";
import api from "@/api/site/systemImg";
import { ElMessage } from "element-plus";
export default {
  components: { SvgComponents },
  data() {
    return {
      svgLists: [],
      svgInfoData: [],
      analogDataTimer: "", //模拟数据定时器
      userInfo: "",
      editable: false,
      svgForList: false,

      setInterval: null,
    };
  },
  mounted() {
    if (JSON.stringify(this.$route.query) != "{}") {
      this.$store.state.siteId = this.$route.query.siteId;
    }
    this.$nextTick(() => {
      this.Interface();
    });
  },
  methods: {
    Interface() {
      var _this = this;

      //请求接口获取组件
      this.setInterval = setInterval(() => {
        api.getHookupComponentComplete({ siteId: this.$store.state.siteId }).then((requset) => {
          if (requset.data.length > 0) {
            _this.svgLists = requset.data;
          } else {
            ElMessage.error("当前站点下无可查看配电图,即将为您跳转到编辑页！");
            this.editChart();
          }
        });
      }, 1000);

      api.gethookupComponentBasics().then((requset) => {
        if (requset.status === "SUCCESS") {
          _this.svgInfoData = requset.data;
          setTimeout(() => {
            _this.svgForList = true;
          }, 1000);
        } else {
          ElMessage.error(requset.msg);
        }
      });
    },
    editChart() {
      this.$router.push({
        path: "/CircuitEdit1",
        name: "CircuitEdit1",
      });
    },
    MousedownSvg(id, index, svgPositionX, svgPositionY, $event) {
      console.log(id, index, svgPositionX, svgPositionY, $event);
    },
  },
  unmounted() {
    //销毁定时器
    clearInterval(this.setInterval);
  },
};
</script>
<style scoped lang="less">
.svg-contain {
  position: fixed;
  left: 0;
  right: 0;
  top: 1.2rem;
  bottom: 0;
}
.btns-content {
  position: fixed;
  left: 10px;
  bottom: 10px;
  button {
    margin-right: 10px;
  }
}
* {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
</style>

