<template>
  <div style="display: flex">
    <div>
      <canvas id="frontView" width="200" height="300"> </canvas>
      <span>正视图</span>
    </div>
    <div>
      <canvas id="rearView" width="200" height="300"> </canvas>
      <span>后视图</span>
    </div>
    <div>
      <canvas id="rightView" width="200" height="300"> </canvas>
      <span>右视图</span>
    </div>
    <div>
      <canvas id="leftView" width="200" height="300"> </canvas>
      <span>左视图</span>
    </div>
  </div>
  <canvas id="planform" width="800" height="800"> </canvas>
</template>

<script setup>
import { onMounted } from "vue";
import * as truf from "@turf/turf";
import { TempMap } from "./js/tempMap.js";
onMounted(() => {
  init();
});

function initData() {
  // 生成4组每组8个数据，每个数据在32上下浮动8整数
  var data = [];

  for (var i = 0; i < 7; i++) {
    var group = [];

    for (var j = 0; j < 8; j++) {
      var base = 32;
      var noise = Math.floor(Math.random() * 17) - 8; // 生成-8到8之间的随机整数
      var value = base + noise;
      group.push(value);
    }

    data.push(group);
  }
  return data;
}
function init() {
  let data = initData();
  generatePlanform(data);
  generateDataList(data);
}

function generateDataList(data) {
  let coordinates_list = [];
  let rear_list = [];
  let right_list = [];
  let left_list = [];
  //获取各个视图能看到的顶点
  for (let i = 0; i < data.length; i++) {
    coordinates_list.push([
      data[i][2],
      data[i][3],
      data[i][4],
      data[i][5],
      data[i][6],
    ]);
    rear_list.push([
      data[i][6],
      data[i][7],
      data[i][0],
      data[i][1],
      data[i][2],
    ]);
    right_list.push([
      data[i][4],
      data[i][5],
      data[i][6],
      data[i][7],
      data[i][0],
    ]);
    left_list.push([
      data[i][0],
      data[i][1],
      data[i][2],
      data[i][3],
      data[i][4],
    ]);
  }
  let list = generateViewData(coordinates_list);
  generateView(list, "frontView");
  list = generateViewData(rear_list);
  generateView(list, "rearView");
  list = generateViewData(right_list);
  generateView(list, "rightView");
  list = generateViewData(left_list);
  generateView(list, "leftView");
}
//计算各顶点坐标
function generateViewData(data) {
  let coordinates = [];
  let height = 30;
  let multiple = 1;
  let translationX = 80;
  let translationy = 60;
  for (let i = 0; i < data.length; i++) {
    let list = [];
    for (let j = 0; j < data[i].length; j++) {
      let item = data[i][j];
      let angle = (Math.PI * 2) / 8;
      list.push([
        Math.ceil(
          Math.cos(Math.PI - angle * j) * item * multiple + translationX
        ),
        i * height + translationy,
        item,
      ]);
    }

    coordinates.push(list);
  }
  return coordinates;
}
function drawPoint(ctx, x, y, radius, alpha) {
  // ctx.globalAlpha = alpha; //设置 Alpha 透明度
  ctx.beginPath();
  let gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
  gradient.addColorStop(0, "rgba(0,0,0,1)");
  gradient.addColorStop(1, "rgba(0,0,0,0)");
  ctx.fillStyle = gradient;
  ctx.arc(x, y, radius, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();
}

function generateView(data, canvasId) {
  const canvas = document.getElementById(canvasId);
  const ctx = canvas.getContext("2d");
  let tempMap = new TempMap();

  let max = 10;
  let min = -10;
  let num = 32;

  for (let i = 0; i < data.length; i++) {
    for (let j = 0; j < data[i].length; j++) {
      let x = data[i][j][0];
      let y = data[i][j][1];
      let value = data[i][j][2];
      let alpha = (num - value - min) / (max - min);

      drawPoint(ctx, x, y, 15, alpha);
    }
  }

  let img = ctx.getImageData(0, 0, canvas.width, canvas.height);
  let imgData = img.data;
  console.log("🚀 ~ generateView ~ imgData:", imgData);
  for (let i = 3; i < imgData.length; i += 4) {
    let alpha = imgData[i];

    let color = tempMap.colorPicker(alpha);
    imgData[i - 3] = color[0];
    imgData[i - 2] = color[1];
    imgData[i - 1] = color[2];
  }
  ctx.putImageData(img, 0, 0);
  ctx.beginPath();
  for (let i = 0; i < data.length; i++) {
    for (let j = 0; j < data[i].length; j++) {
      let x = data[i][j][0];
      let y = data[i][j][1];
      if (j == 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
    }
  }
  ctx.stroke();
  ctx.beginPath();
  for (let i = 0; i < data[0].length; i++) {
    for (let j = 0; j < data.length; j++) {
      let x = data[j][i][0];
      let y = data[j][i][1];
      if (j == 0) {
        ctx.moveTo(x, y);
      } else if (j == data.length - 1) {
        ctx.lineTo(x, y);
        ctx.stroke();
        ctx.beginPath();
      } else {
        ctx.lineTo(x, y);
      }
    }
  }
}
function generatePlanform(data) {
  const planform = document.getElementById("planform");
  const planformCtx = planform.getContext("2d");

  let translationX = 400;
  let translationY = 400;
  let multiple = 8;
  let container = [];
  const gradient = planformCtx.createRadialGradient(
    0 + translationX,
    0 + translationY,
    180,
    0 + translationX,
    0 + translationY,
    270
  );
  gradient.addColorStop(0, "rgba(0,0,255,1)");
  gradient.addColorStop(0.25, "rgba(0,255,255,1)");
  gradient.addColorStop(0.5, "rgba(0,255,0,1)");
  gradient.addColorStop(0.75, "rgba(255,255,0,1)");
  gradient.addColorStop(1, "rgba(255,0,0,1)");
  planformCtx.beginPath();
  for (var i = 0; i < data.length; i++) {
    let list = [];
    for (var j = 0; j < data[i].length; j++) {
      var angle = (j * Math.PI * 2) / data[i].length;
      var x = Math.cos(angle) * data[i][j] * multiple;
      var y = Math.sin(angle) * data[i][j] * multiple;
      x += translationX;
      y += translationY;
      if (j == 0) {
        planformCtx.moveTo(x, y);
      } else if (j == data[i].length - 1) {
        planformCtx.lineTo(x, y);
        planformCtx.fillStyle = gradient;
        planformCtx.fill();
        planformCtx.closePath();
        planformCtx.stroke();
      } else {
        planformCtx.lineTo(x, y);
      }
      list.push([x, y]);
    }
    container.push(list);
  }
  console.log("🚀 ~ generatePlanform ~ container:", container);

  let polygons = [];

  for (let i = 0; i < container.length; i++) {
    let model = [...container[i], container[i][0]];
    let poly = truf.polygon([model]);
    polygons.push(poly);
  }
  let intersection = truf.intersect(truf.featureCollection(polygons));
  if (intersection) {
    let result = intersection.geometry.coordinates[0];
    planformCtx.beginPath();
    for (var i = 0; i < result.length; i++) {
      let x = result[i][0];
      let y = result[i][1];
      if (i == 0) {
        planformCtx.moveTo(x, y);
      } else if (i == result.length - 1) {
        planformCtx.lineTo(x, y);
        planformCtx.fillStyle = "white";
        planformCtx.fill();
        planformCtx.closePath();
        planformCtx.stroke();
      } else {
        planformCtx.lineTo(x, y);
      }
    }
  }
  // planformCtx.beginPath();
  // planformCtx.strokeStyle = "red";
  // let c = [];
  // for (var i = 0; i < 8; i++) {
  //   var angle = (i * Math.PI * 2) / 8;
  //   var x = Math.cos(angle) * 32 * multiple;
  //   var y = Math.sin(angle) * 32 * multiple;
  //   x += translationX;
  //   y += translationY;
  //   if (i == 0) {
  //     planformCtx.moveTo(x, y);
  //   } else if (i == 7) {
  //     planformCtx.lineTo(x, y);
  //     planformCtx.closePath();
  //     planformCtx.stroke();
  //   } else {
  //     planformCtx.lineTo(x, y);
  //   }
  //   c.push([x, y]);
  // }
}
</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
body {
  margin: 0;
}
canvas {
  display: block;
}
</style>
