import { getImg } from "@/utils";
import {
  Group,
  Mesh,
  MeshPhongMaterial,
  PlaneGeometry,
  RepeatWrapping,
  TextureLoader,
  // Vector2,
} from "three";
import { CSS3DSprite } from "three/examples/jsm/renderers/CSS3DRenderer.js";
// import { degToRad } from "three/src/math/MathUtils.js";

const lineGroup = new Group();
const lineLabelGroup = new Group();
lineLabelGroup.name = "线标签";
lineGroup.name = "线组";

const lineyType = [
  {
    name: "白线",
    type: 0,
    desc: "正常",
    color: "#ffffff",
  },
  {
    name: "绿线",
    type: 1,
    desc: "充裕",
    color: "#2ecc71",
  },
  {
    name: "红线",
    type: 2,
    desc: "不足",
    color: "#c12c1f",
  },
];

/**
 *
 * @param position
 * @param long
 * @param rotation
 * @param color
 * @param name
 */
function getBuildGirdLine(
  position: { x: any; y: any; z: any },
  long: number,
  rotation: number,
  color: string,
  type: Number,
  name: undefined | String,
  deg?: number,
  visible?: boolean
) {
  let plan = new PlaneGeometry(type ? 0.1 : 0.05, long);
  const texture = new TextureLoader().load(getImg("models/flyLine.png"));
  texture.needsUpdate = true; //使用贴图时进行更新
  texture.wrapS = texture.wrapT = RepeatWrapping;
  // texture.repeat = new Vector2(1, 2);
  texture.repeat.set(1, 5);
  // texture.offset.y = Math.random() * 5;
  let material = new MeshPhongMaterial({
    color,
    side: 2,
    transparent: type ? true : false,
    // opacity: 0.8,
    depthWrite: type ? false : true,
    // depthTest: type ? false : true,
    blending: 2,
    // alphaTest: 0.8,
    map: type && texture,
  });
  let mesh = new Mesh(plan, material);
  //   mesh.rotation.z = degToRad(rotation);
  mesh.position.set(position.x, position.y, position.z);
  mesh.rotateX(-Math.PI / 2);
  mesh.rotateZ(rotation + (deg || 0));
  //@ts-ignore
  mesh.name = name;
  mesh.visible = visible == undefined ? true : visible;

  mesh.layers.toggle(1);
  lineGroup.add(mesh);
  // scene.position.set(2.4, 1.8, -0.3);
  //@ts-ignore
  //   mesh.key = key;
  //@ts-ignore
  mesh.animate = function () {
    //@ts-ignore
    mesh.material.map.offset.y -= 0.01;
    //@ts-ignore
    mesh.animateIndex = requestAnimationFrame(mesh.animate);
  };
  //@ts-ignore
  type && mesh.animate();
}

//线类型
function initLineType() {
  lineyType.forEach((item) => {
    getBuildGirdLine({ x: 0, y: 0.1, z: -4.4 }, 7, 0, item.color, 0, item.name);
  });
}

function tag3D(html: string, name: string) {
  // 创建div元素(作为标签)
  let div = document.createElement("div");
  div.innerHTML = html;
  div.id = name;
  // div.style.color = "#ffffff";
  // div.classList.add("tag");
  //div元素包装为CSS3模型对象CSS3DObject
  let label = new CSS3DSprite(div);
  div.style.pointerEvents = "none"; //避免HTML标签遮挡三维场景的鼠标事件
  // 设置HTML元素标签在three.js世界坐标中位置
  // label.position.set(x, y, z);
  //缩放CSS3DObject模型对象
  label.scale.set(0.02, 0.02, 0.02); //根据相机渲染范围控制HTML 3D标签尺寸
  label.rotateY(Math.PI / 2); //控制HTML标签CSS3对象姿态角度
  // label.rotateX(-Math.PI/2);
  return label; //返回CSS3模型标签
}

/**
 * 加载区域划分线
 */
function initBuildGirdLines() {
  //电网到负荷
  const dwfhlabel = tag3D(
    `
    <div class="text-[#ffffff] text-xs">
      <div>日购电</div>
      <div>0kW·h</div>
    </div>
  `,
    "rgd_title"
  );
  dwfhlabel.position.set(0, 0.1, -3.6);
  getBuildGirdLine({ x: 0, y: 0.1, z: -3.6 }, 7, 0, "#ffffff", 0, "日购电");
  getBuildGirdLine(
    { x: 0, y: 0.102, z: -3.6 },
    7,
    0,
    "#feff3f",
    1,
    "日购电_",
    0,
    false
  );

  //储能到负荷
  const cnfhlabel = tag3D(
    `
    <div class="text-[#ffffff] text-xs">
      <div>放电量</div>
      <div>0kW·h</div>
    </div>
  `,
    "fdl_title"
  );
  cnfhlabel.position.set(-4.1, 0.1, -8);
  getBuildGirdLine(
    { x: -4.1, y: 0.1, z: -8 },
    7.1,
    -Math.PI / 2,
    "#ffffff",
    0,
    "放电量"
  );
  getBuildGirdLine(
    { x: -4.1, y: 0.102, z: -8 },
    7.1,
    -Math.PI / 2,
    "#feff3f",
    1,
    "放电量_",
    0,
    false
  );

  //电网到光伏
  const dwgflabel = tag3D(
    `
    <div class="text-[#fff] text-xs">
      <div>日上网</div>
      <div>0kW·h</div>
    </div>
  `,
    "rsw_title"
  );
  dwgflabel.position.set(-3.8, 0.1, 0);
  getBuildGirdLine(
    { x: -3.8, y: 0.1, z: 0 },
    7.5,
    -Math.PI / 2,
    "#ffffff",
    0,
    "日上网"
  );
  getBuildGirdLine(
    { x: -3.8, y: 0.102, z: 0 },
    7.5,
    -Math.PI / 2,
    "#feff3f",
    1,
    "日上网_",
    0,
    false
  );

  //光伏到储能
  const gfcnlabel = tag3D(
    `
    <div class="text-[#ffffff] text-xs">
      <div>日充电</div>
      <div>0kW·h</div>
    </div>
  `,
    "rcd_title"
  );
  gfcnlabel.position.set(-8, 0.1, -4.2);
  getBuildGirdLine({ x: -8, y: 0.1, z: -4.2 }, 6.7, 0, "#ffffff", 0, "日充电");
  getBuildGirdLine(
    { x: -8, y: 0.102, z: -4.2 },
    6.7,
    0,
    "#feff3f",
    1,
    "日充电_",
    0,
    false
  );
  // getBuildGirdLine({ x: -8, y: 0.1, z: -6 }, 3.5, 0, "#ffffff", 0, "线5");
  // getBuildGirdLine(
  //   { x: -3.9, y: 0.1, z: -2 },
  //   8.5,
  //   Math.PI / 0.74,
  //   "#ffffff",
  //   0,
  //   "线6"
  // );

  //光伏到负荷
  const gffhlabel = tag3D(
    `
    <div class="text-[#fff] text-xs">
      <div>日自用</div>
      <div>0kW·h</div>
    </div>
  `,
    "rzy_title"
  );
  gffhlabel.position.set(-4, 0.1, -4);
  getBuildGirdLine(
    { x: -4, y: 0.1, z: -4 },
    10,
    -Math.PI / 0.8,
    "#ffffff",
    0,
    "日自用",
    Math.PI
  );
  getBuildGirdLine(
    { x: -4, y: 0.102, z: -4 },
    10,
    -Math.PI / 0.8,
    "#feff3f",
    1,
    "日自用_",
    Math.PI,
    false
  );
  // getBuildGirdLine(
  //   { x: -4.1, y: 0.1, z: -5.8 },
  //   8,
  //   -Math.PI / 0.74,
  //   "#2ecc71",
  //   0,
  //   "线8",
  // );
  // getBuildGirdLine(
  //   { x: -4.1, y: 0.102, z: -5.8 },
  //   8,
  //   -Math.PI / 0.74,
  //   "#feff3f",
  //   1,
  //   "线8_"
  // );

  lineLabelGroup.add(dwfhlabel, dwgflabel, cnfhlabel, gfcnlabel, gffhlabel);
}

function resetLines() {
  lineGroup.children.forEach((item: any) => {
    if (item.name.includes("_")) {
      item.visible = false;
    } else {
      //@ts-ignore
      item.material.color.set("#ffffff");
    }
  });
  labelColor("rsw_title", "#ffffff");
  labelColor("rgd_title", "#ffffff");
  labelColor("fdl_title", "#ffffff");
  labelColor("rcd_title", "#ffffff");
  labelColor("rzy_title", "#ffffff");

  setLabelText("rsw_title", "0");
  setLabelText("rgd_title", "0");
  setLabelText("fdl_title", "0");
  setLabelText("rcd_title", "0");
  setLabelText("rzy_title", "0");
}

function labelColor(name: string, color: string) {
  //@ts-ignore
  document.getElementById(name).firstElementChild.style.color = color;
}

function setLabelText(name: string, value: string) {
  //@ts-ignore
  document.getElementById(name).firstElementChild.lastElementChild.innerText = `${value}kW·h`;
}

export {
  lineGroup,
  lineLabelGroup,
  getBuildGirdLine,
  initBuildGirdLines,
  initLineType,
  resetLines,
  labelColor,
  setLabelText,
};
