<template>
  <div class="com-upload">
    <p>四川大厦的地图上传功能</p>
    <div class="file-upload">
      <div class="file-upload-text">上传文件</div>
      <input
        class="file-upload-input"
        id="upfile"
        type="file"
        webkitdirectory
        @change="getFile"
      />
    </div>

    <div class="fileName">{{ fileName }}</div>
    <div class="status">{{ status }}</div>
  </div>
</template>
  
<script lang="ts">
import { saveMapPointInfo } from "@/apis/envmonitor";
import { number } from "echarts";
import { Toast } from "vant";
import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";

export default defineComponent({
  components: {},
  setup() {
    let allObj: any = [];
    let spaceArr: any = [];
    let floorObj: any = {};
    const proxyData = reactive({
      allObj: allObj,
      floorObj: floorObj,
      spaceArr: spaceArr,
      fileName: "",
      status: "",
      getFile(e: any) {
        console.log(e.target.files);
        let files: any = e.target.files;
        for (let i = 0; i < files.length; i++) {
          let fileSelect: any = files[i];
          let name: any = fileSelect.name;
          name = name.split(".")[0];
          let reader: any = new FileReader();
          if (typeof FileReader === "undefined") {
            console.log("您的浏览器不支持FileReader接口");
            return;
          }
          reader.readAsText(fileSelect, "gb2312"); //注意读取中文的是用这个编码，不是utf-8
          reader.onload = function () {
            let result: any = reader.result;
            proxyData.handPoint(result, name);
            if (i === files.length - 1) {
              // 处理数据的高度问题(因为取点的图是y是从下面开始获取的 )
              proxyData.formSpaceData();
              proxyData.floorObj.spaceList = proxyData.spaceArr;
              proxyData.saveMapPointInfo();
            }
          };
        }
      },
      // 地图数据处理结果保存
      saveMapPointInfo() {
        console.log("数据格式化---");
        console.log(proxyData.floorObj);
        Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: "正在上传...",
        });
        saveMapPointInfo(proxyData.floorObj)
          .then((res: any) => {
            if (res.result == "success") {
              proxyData.status = "上传成功";
              proxyData.fileName = "";
              let uploadEle: any = document.getElementById("upfile");
              uploadEle.value = null;
            }
            Toast.clear();
          })
          .catch(() => {
            Toast.clear();
          });
      },
      // 数据格式化
      formSpaceData() {
        proxyData.spaceArr.map((item: any) => {
          item.devicePointArr.map((dev: any) => {
            dev.left = dev.left * 1;
            dev.top = proxyData.floorObj.height* 1 - dev.top* 1;
            // dev.top = dev.top;
          });
          item.logoPointArr.map((dev: any) => {
            dev.left = dev.left * 1;
            dev.top = proxyData.floorObj.height* 1 - dev.top* 1;
            // dev.top = dev.top;
          });
          item.pointArr.map((dev: any) => {
            dev.left = dev.left * 1;
            dev.top = proxyData.floorObj.height* 1 - dev.top* 1;
            // dev.top = dev.top;
          });
          item.circlePointArr.map((dev: any) => {
            dev.left = dev.left * 1;
            dev.top = proxyData.floorObj.height* 1 - dev.top* 1;
            // dev.top = dev.top;
          });
          item.detailPointArr.map((dev: any) => {
            dev.left = dev.left * 1;
            dev.top = proxyData.floorObj.height* 1 - dev.top* 1;
            // dev.top = dev.top;
          });
        });
      },
      handPoint(result: any, name: any) {
        result = result.replace(/\"/g, "");
        let nameArr: any = name.split("-");
        let arr: any = result.split(/[(\r\n)\r\n]+/);
        if (nameArr && nameArr[0] == "L") {
          arr.map((item: any) => {
            if (item) {
              let itemArr: any = item.split(",");
              let obj: any = {
                width: itemArr[0] ? itemArr[0] * 1 : 0,
                height: itemArr[1] ? itemArr[1] * 1 : 0,
              };
              console.log(obj);
              if (obj.width && obj.height) {
                proxyData.floorObj.width = obj.width;
                proxyData.floorObj.height = obj.height;
                proxyData.floorObj.floorId = nameArr[1];
              }
            }
          });
        } else {
          if (nameArr[0]) {
            let pointObj: any = {
              spaceId: nameArr[1] ? nameArr[1].toString() : "",
              localName: nameArr[0] ? nameArr[0].toString() : "",
              canClick: nameArr[2] && nameArr[2] == "unc" ? false : true,
              pointArr: [],
              devicePointArr: [],
              circlePointArr: [],
              detailPointArr: [],
              logoPointArr: [],
            };

            arr.map((item: any, index: any) => {
              if (item) {
                let itemArr: any = item.split(",");
                let obj: any = {
                  left: itemArr[0],
                  top: itemArr[1],
                };
                if (pointObj.canClick && nameArr[2] && nameArr[2] == "c") {
                  pointObj.circlePointArr.push(obj);
                } else if (
                  !pointObj.canClick &&
                  nameArr[3] &&
                  nameArr[3] == "c"
                ) {
                  pointObj.circlePointArr.push(obj);
                } else if (!pointObj.canClick) {
                  pointObj.pointArr.push(obj);
                } else {
                  if (index < 1) {
                    pointObj.detailPointArr.push(obj);
                  } else if (index < 2) {
                    pointObj.logoPointArr.push(obj);
                  } else if (index < 3) {
                    pointObj.devicePointArr.push(obj);
                  } else {
                    pointObj.pointArr.push(obj);
                  }
                }
              }
            });

            let flag: any = false;
            proxyData.spaceArr.map((item: any) => {
              if (nameArr[1] && item.spaceId === nameArr[1]) {
                item.circlePointArr = pointObj.circlePointArr;
                flag = true;
              } else {
                if (item.spaceId === nameArr[0]) {
                  item.logoPointArr = pointObj.logoPointArr;
                  item.devicePointArr = pointObj.devicePointArr;
                  item.pointArr = pointObj.pointArr;
                  flag = true;
                }
              }
            });
            if (!flag) {
              proxyData.spaceArr.push(pointObj);
            }
          }
        }
      },
    });
    nextTick(() => {});
    onMounted(() => {});
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
  <style lang="scss" scoped>
.com-upload {
  padding: 20px;
  .file-upload {
    width: 90px;
    height: 36px;
    position: relative;
    overflow: hidden;
    border: 1px solid #0f996b;
    display: inline-block;
    border-radius: 4px;
    font-size: 14px;
    color: #0f996b;
    text-align: center;
    line-height: 36px;
    margin: 10px 0 auto auto;
  }
  .file-upload-input {
    background-color: transparent;
    position: absolute;
    width: 999px;
    height: 999px;
    top: -100px;
    left: -100px;
    cursor: pointer;
  }
  .fileName {
    margin-top: 14px;
    color: #000000;
    font-size: 16px;
  }
  .status {
    margin-top: 14px;
    color: red;
  }
}
</style>
  