<template>
  <div>
    <input type="file" @change="handleFileChange" />
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="Control_No" label="序號" width="180" />
    <el-table-column prop="Index" label="編號" width="180" />
    <el-table-column prop="ID" label="ID" width="180" />
    <el-table-column prop="BH" label="編號" width="180" />
    <el-table-column prop="Piece_Name" label="部位名稱" width="180" />
    <el-table-column prop="data" label="日期" />'
    <el-table-column label="精品圖片">
      <template v-slot="scope">
        <!-- 在這里訪問tableData.vertices中的數(shù)據(jù) -->
        <div id="imageContainer">
          <!-- 使用scope.row來獲取當前行的數(shù)據(jù) -->
          <img :src="generateCanvasImage(scope.row.vertices)" alt="精品圖片" />
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import DXFParser from 'dxf-parser';
export default {
  data() {
    return {
      tableData: [],
    }
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const contents = e.target.result;
        // const decoder = new TextDecoder('utf-8');
        // const decodedContents = decoder.decode(contents);
        const parser = new DXFParser();
        const dxf = parser.parseSync(contents);
        // 處理解析后的DXF數(shù)據(jù)
        this.processDXF(dxf);
        // console.log(this.processDXF(dxf))
      };
      reader.readAsText(file);
      // reader.readAsArrayBuffer(file)
    },
    processDXF(dxf) {
      // 在這里處理解析后的DXF數(shù)據(jù)
      console.log(dxf);
      this.tableData.splice(0, this.tableData.length);
      // 示例：繪制一些圖形到canvas上
      console.log(dxf.blocks)
      // dxf.blocks.forEach((e)=>{
      //   console.log(e)
      // })
      var Control_No = 1;
      for (var key in dxf.blocks) {
        if ('entities' in dxf.blocks[key]) {
          // console.log(dxf.blocks[key].entities[0].type)
          for (var i in dxf.blocks[key].entities) {
            if ("TEXT" === dxf.blocks[key].entities[i].type) {
              var ver = [];
              for (var w = 4; w < dxf.blocks[key].entities.length; w++) {
                if (dxf.blocks[key].entities[w].vertices) {
                  dxf.blocks[key].entities[w].vertices[0].new = true
                  ver = ver.concat(dxf.blocks[key].entities[w].vertices);
                }
              }
              console.log(ver.concat(dxf.blocks[key].entities[5].vertices))
              var newItem = {
                Control_No: Control_No++,
                Index: key,
                ID: dxf.blocks[key].entities[0].text,
                BH: dxf.blocks[key].entities[1].text,
                Piece_Name: dxf.blocks[key].entities[2].text,
                vertices: ver,
                data: dxf.blocks[key].entities[3].text
              };
              this.tableData.push(newItem); // 將新對象添加到tableData數(shù)組中
              break;
            }
          }
        }
      }
    },
    generateCanvasImage(vertices) {
      // 獲取Canvas元素
      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      // 設(shè)置多邊形的顏色
      var color = "#FF0000"; // 十六進制顏色值，例如 16711680 對應的顏色為紅色
      // 頂點坐標列表
      // 計算圖形的包圍框
      var minX = Number.MAX_VALUE;
      var minY = Number.MAX_VALUE;
      var maxX = Number.MIN_VALUE;
      var maxY = Number.MIN_VALUE;
      for (var i = 0; i < vertices.length; i++) {
        var vertex = vertices[i];
        minX = Math.min(minX, vertex.x);
        minY = Math.min(minY, vertex.y);
        maxX = Math.max(maxX, vertex.x);
        maxY = Math.max(maxY, vertex.y);
      }
      // 計算縮放因子
      var width = maxX - minX;
      var height = maxY - minY;
      var scale = Math.min(canvas.width / width, canvas.height / height);
      // 繪制多邊形
      ctx.beginPath();
      ctx.strokeStyle = color; // 設(shè)置描邊顏色
      ctx.lineWidth = 1; // 設(shè)置線寬
      // 移動到第一個頂點
      ctx.moveTo((vertices[0].x - minX) * scale, (vertices[0].y - minY) * scale);
      // 依次連接頂點
      for (var e = 1; e < vertices.length; e++) {
        if (vertices[e].new === true) {
          console.log("true");
          // 如果條件成立，移動到當前頂點位置，不連接上一次的頂點
          ctx.moveTo((vertices[e].x - minX) * scale, (vertices[e].y - minY) * scale);
        } else {
          // 否則繼續(xù)連接頂點
          ctx.lineTo((vertices[e].x - minX) * scale, (vertices[e].y - minY) * scale);
        }
      }
      // 關(guān)閉多邊形路徑
      ctx.closePath();
      // 繪制多邊形
      ctx.stroke();
      // 將Canvas內(nèi)容轉(zhuǎn)換為圖片路徑
      var imgDataURL = canvas.toDataURL("image/png");
      // 在HTML頁面上顯示圖片
      var imgElement = document.createElement("img");
      imgElement.src = imgDataURL;
      return imgElement.src
      // 將圖片元素添加到頁面中的圖片容器
      // var container = document.getElementById("imageContainer");
      // container.appendChild(imgElement);
    }
  }
}
</script>