<template>
  <div class="container">
    <div>
      <div class="app-canvas">
        <el-row type="flex" align="middle" style="height: 40px;">
          <el-col :span="7">
            <el-button @click="big" type="danger" icon="el-icon-circle-plus-outline" >放大</el-button>
            <el-button @click="small" type="danger" icon="el-icon-remove-outline" >缩小</el-button>
            <el-button @click="replay" :disabled="isDisabled" type="success" :icon="buttonIcon" >回放</el-button>
          </el-col>
          <el-col :span="17">
            <el-progress v-show="isShow" :percentage="percentage"></el-progress>
          </el-col>
        </el-row>
        <el-row>
          <div id="page_canvas"></div>
        </el-row>
      </div>
    </div>
    <div class="right-board">
        <el-divider content-position="left">平台无人机</el-divider>
          <span>位置&nbsp;&nbsp;</span><label>{{ uavlo }}</label><br>
          <span>速度</span><br>
          <span>姿态</span><br>
        <el-divider content-position="left">目标无人机群</el-divider>
        <li v-for='(item, index) in targetAry' :key="index">
          <span>编号&nbsp;&nbsp;</span><label>{{ item.name }}</label><br>
          <span>位置&nbsp;&nbsp;</span><label>{{ item.loc }}</label><br>
          <span>速度</span><br>
          <span>姿态</span><br>
        </li>
    </div>
  </div>
</template>

<script>
import * as PIXI from "pixi.js";

export default {
  data() {
    return {
      webSocket: null,
      app: null,
      texture: null,
      sprite: null,
      container: null,
      line: null,
      uavlo: "x: 0, y: 0",
      prex: 0,
      prey: 0,
      isDisabled: true,
      isShow: false,
      percentage: 0,
      current: 0,
      totalPercentage: 0,
      buttonIcon: "el-icon-video-play",
      bizId: "",
      targetUavAry: [],
      targetAry: [],
    };
  },
  created() {

  },
  mounted() {
    this.initCanvas();
    this.initContainer();
  },
  methods: {
    connectWebSocket() {
      const wsUri = "ws://127.0.0.1:8080/websocket/message";
      this.webSocket = new WebSocket(wsUri);
      const self = this;

      this.webSocket.onopen = function (event) {
        self.initContainer();
        console.log("WebSocket连接成功!");
      };

      this.webSocket.onmessage = function (event) {
        self.app.stage.addChild(self.container);
        const dataObj = JSON.parse(event.data);
        if (self.isShow) {
          self.current++;
          self.percentage = Math.round((self.current / self.totalPercentage) * 100);
          if (self.percentage === 100) {self.buttonIcon = "el-icon-video-play";}
        } else {
          self.totalPercentage++;
        }
        self.bizId = dataObj.bizId;
        self.isDisabled = !(dataObj.finished === 'true');

        const lx = dataObj.platformAircraft.coordinateX;
        const ly = dataObj.platformAircraft.coordinateY;
        self.sprite.x = lx;
        self.sprite.y = ly;
        self.uavlo = "x:" + self.sprite.x + ", y:" + self.sprite.y;

        if (self.targetUavAry.length == 0) {
          const total = dataObj.targetAircraft[0].aircrafts.length;
          for (let i = 0; i < total; i++) {
            const uav = new PIXI.Sprite(self.texture);
            uav.anchor.set(0.5);
            uav.scale.set(0.7);
            uav.x = dataObj.targetAircraft[0].aircrafts[i].coordinateX;
            uav.y = dataObj.targetAircraft[0].aircrafts[i].coordinateY;
            self.targetUavAry.push(uav);
            self.container.addChild(uav);

            const newObj = {name: dataObj.targetAircraft[0].aircrafts[i].aircraftNumber, loc:'x:' + uav.x +' , y:' + uav.y};
            self.targetAry.push(newObj);
          }
        } else {
          for (let i = 0; i < self.targetUavAry.length; i++) {
            const uav = self.targetUavAry[i];
            uav.x = dataObj.targetAircraft[0].aircrafts[i].coordinateX;
            uav.y = dataObj.targetAircraft[0].aircrafts[i].coordinateY;
            self.targetAry.splice(i, 1, {name: dataObj.targetAircraft[0].aircrafts[i].aircraftNumber, loc:'x:' + uav.x +' , y:' + uav.y});
          }
        }

        //平台无人机轨迹
        self.drawLine(lx, ly);
      };

      this.webSocket.onclose = function (event) {
        self.clearContainer(self.container);
        //数组清空
        self.targetUavAry.splice(0, self.targetUavAry.length);
        self.targetAry.splice(0, self.targetAry.length);
        console.log('WebSocket连接断开!');
      };

      this.webSocket.onerror = function(event) {
        console.log('WebSocket连接异常: ' + event.code + ' ' + event.reason + ' ' + event.wasClean);
      };
    },
    big() {
      this.container.scale.x += 0.1;
      this.container.scale.y += 0.1;
    },
    small() {
      this.container.scale.x -= 0.1;
      this.container.scale.y -= 0.1;
    },
    replay() {
      if (this.webSocket) {
        this.clearContainer(this.container);
        //数组清空
        this.targetUavAry.splice(0, this.targetUavAry.length);
        this.targetAry.splice(0, this.targetAry.length);
        this.initContainer();
        this.webSocket.send("REPLAY:" + this.bizId);
        this.isShow = true;
        this.buttonIcon = "el-icon-video-pause";
        this.current = 0;
      } else {
        console.log("WebSocket未连接！");
      }
    },
    drawLine(x, y) {
      if (this.prex == 0 && this.prey == 0) {
          this.line.moveTo(x, y);
          this.prex = x;
          this.prey = y;
      } else {
          this.line.moveTo(this.prex, this.prey);
      }
      this.line.lineTo(x, y);
    },
    initContainer(){
      //创建容器
      this.container = new PIXI.Container();

      //创建一个纹理
      this.texture = PIXI.Texture.from("./textures/uav.png");
      //创建一个精灵
      this.sprite = new PIXI.Sprite(this.texture);
      this.sprite.anchor.set(0.5);
      this.sprite.scale.set(0.1);
      this.sprite.x = 300;
      this.sprite.y = 300;
      this.container.addChild(this.sprite);

      //创建一个纹理
      const texture1 = PIXI.Texture.from("./textures/uav-tar.png");
      //创建一个精灵
      const sprite1 = new PIXI.Sprite(texture1);
      sprite1.anchor.set(0.5);
      sprite1.scale.set(0.06);
      sprite1.x = 500;
      sprite1.y = 300;
      this.container.addChild(sprite1);

      const fx = sprite1.x - 37;
      const fy = sprite1.y - 25;

      const circle = new PIXI.Graphics();
      circle.beginFill(0xFF0000); // 红色
      circle.drawCircle(0, 0, 10);
      circle.endFill();
      circle.x = fx;
      circle.y = fy;

      // 创建数字文字
      const text = new PIXI.Text("24", {
        fontFamily: 'Arial',
        fontSize: 14,
        fill: 0xFFFFFF, // 白色填充
        align: 'center',
      });
      text.anchor.set(0.5);
      // 计算文字位置以便在圆形内居中
      text.x = fx;
      text.y = fy;
      this.container.addChild(circle);
      this.container.addChild(text);

      this.app.stage.addChild(this.container);
    },
    clearContainer(c) {
      while (c.children.length > 0) {
        c.removeChild(c.children[0]);
      }
    },
    initCanvas() {
      const pageCanvas = document.getElementById("page_canvas");
      const width = pageCanvas.offsetWidth;
      //const height = pageCanvas.offsetHeight;
      this.app = new PIXI.Application({
        width: width, // default: 800 宽度
        height: window.innerHeight, // default: 600 高度
        antialias: true, // default: false 反锯齿
        transparent: false, // default: false 透明度
        resolution: 1, // default: 1 分辨率
        backgroundAlpha: 0, // 设置背景颜色透明度   0是透明
      });
      this.app.renderer.backgroundColor = 0x66CCFF; // 设置canvas背景颜色
      // 将创建好的canvas添加到元素当中去
      pageCanvas.appendChild(this.app.view);
    },
  },
  beforeDestroy() {
    if (this.webSocket) {
      this.webSocket.close();
    }
  }
};
</script>

<style scoped>
.container {
  display: grid;
  grid-template-columns: 80% 20%; /* 两栏按比例分 */
}
.right-board {
  padding: 2px; margin: 2px;height:730px;
  overflow: auto; /* 当内容超出元素边界时显示滚动条 */
}
.app-canvas {
  padding: 2px;
  margin: 2px;
}
</style>
