<template>
  <div>
    <UavList></UavList>
    <Player
      class="player"
      ref="player"
      v-if="showPlayer && uav"
      @close="onPlayerClose"
    />
    <ControlPanel v-if="uav && showPanel"></ControlPanel>
  </div>
</template>

<script>
import { mapState } from "vuex";
import UavList from "./components/uavList";
import Player from "./components/player";
import ControlPanel from "./components/controlPanel";
import linkFusion from "./mixins/linkFusion";

export default {
  name: "UavApplications",
  mixins: [linkFusion],
  components: {
    UavList,
    Player,
    ControlPanel,
  },
  inject: ['bus'],
  data() {
    return {
      pointListFlag: false,
      aiPopup: null, //识别图标
      keyFlag: false, //NX状态
      videoItem: 0,
      showCenter: false,
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter/uav", [
      "uav",
      "showPlayer",
      "showPanel",
    ]),
  },
  created() {
    // 等待航线上传成功在执行
    // 判断是否以一键任务
    /* Bus.$on("off_take", () => {
      this.takeOff = true;
    }); */
  },
  mounted() {},
  beforeDestroy() {
    this.$store.commit('MMCFlightControlCenter/setState', {
      key: 'listCollapse',
      value: false
    })
    
  },
  methods: {
    getcanvas(val, item) {
      let data = null;
      if (item.jsonData) {
        data = JSON.parse(item.jsonData);
      } else {
        data = item;
      }
      // let targets = data.targets;
      setTimeout(() => {
        this.canvas = this.$refs.canvas;
        this.canvas.width = 1000;
        this.canvas.height = 500;
        this.image = new Image();
        this.image.src = val;
        this.image.onload = () => {
          if (this.aiType >= 4 && this.aiType != 13) {
            this.drawImage(data.targets);
          } else if (this.aiType == 1) {
            this.drawImage(data.detections);
          } else if (this.aiType == 2) {
            this.drawImage(data.aiPlateShiJuResultInfoDtoList);
          } else if (this.aiType == 3 || this.aiType == 13) {
            this.drawImage(data);
          }
        };
      }, 50);
    },
    drawImage(list) {
      this.ctx = this.canvas.getContext("2d");
      this.ctx.drawImage(
        this.image,
        0,
        0,
        this.canvas.width,
        this.canvas.height
      );
      this.ctx.lineWidth = 2;
      this.ctx.strokeStyle = "red";
      if (this.aiType >= 4 && this.aiType != 13) {
        list.forEach((targets) => {
          let plate_detection = {
            x: 0,
            y: 0,
            h: 0,
            w: 0,
          };
          plate_detection.x =
            (this.canvas.width * targets.bbox.box.left_top_x) /
            this.image.width;
          plate_detection.y =
            (this.canvas.height * targets.bbox.box.left_top_y) /
            this.image.height;
          plate_detection.h =
            (this.canvas.height *
              (targets.bbox.box.right_bottom_y - targets.bbox.box.left_top_y)) /
            this.image.height;
          plate_detection.w =
            (this.canvas.width *
              (targets.bbox.box.right_bottom_x - targets.bbox.box.left_top_x)) /
            this.image.width;

          this.ctx.strokeRect(
            plate_detection.x,
            plate_detection.y,
            plate_detection.w,
            plate_detection.h
          );
          this.ctx.fillStyle = "rgba(0,0,0,0.8)";
          let text =
            targets.bbox.label +
            ":" +
            (targets.bbox.prob * 100).toFixed(2) +
            "%（相似度）";
          let offX = 0;
          let offY = 0;
          if (plate_detection.x + text.length * 11 > 1000) {
            offX = 1000 - text.length * 11;
          } else {
            offX = plate_detection.x - 5;
          }
          if (plate_detection.y - 20 < 0) {
            offY = plate_detection.y + plate_detection.h;
          } else {
            offY = plate_detection.y - 22;
          }
          this.ctx.fillRect(
            // plate_detection.x - 5,
            offX,
            offY,
            text.length * 11,
            20
          );
          this.ctx.fillStyle = "white"; // 设置文本颜色
          this.ctx.font = "16px Arial"; // 设置文本字体大小和样式
          this.ctx.fillText(
            text,
            // plate_detection.x - 5,
            offX,
            offY + 15
          ); // 绘制文本
        });
      } else if (this.aiType == 1) {
        list.forEach((targets) => {
          let plate_detection = {
            x: 0,
            y: 0,
            h: 0,
            w: 0,
          };
          plate_detection.x =
            (this.canvas.width * targets.x) / this.image.width;
          plate_detection.y =
            (this.canvas.height * targets.y) / this.image.height;
          plate_detection.h =
            (this.canvas.height * targets.h) / this.image.height;
          plate_detection.w =
            (this.canvas.width * targets.w) / this.image.width;

          this.ctx.strokeRect(
            plate_detection.x,
            plate_detection.y,
            plate_detection.w,
            plate_detection.h
          );
          this.ctx.fillStyle = "rgba(0,0,0,0.5)";
          this.ctx.fillRect(
            plate_detection.x - 5,
            plate_detection.y - 22,
            20,
            20
          );
          this.ctx.fillStyle = "white"; // 设置文本颜色
          this.ctx.font = "12px Arial"; // 设置文本字体大小和样式
          this.ctx.fillText("人", plate_detection.x - 3, plate_detection.y - 8); // 绘制文本
        });
      } else if (this.aiType == 2) {
        list.forEach((targets) => {
          let plate_detection = {
            x: 0,
            y: 0,
            h: 0,
            w: 0,
          };
          plate_detection.x =
            (this.canvas.width * targets.yiSaPlateDetection.x) /
            this.image.width;
          plate_detection.y =
            (this.canvas.height * targets.yiSaPlateDetection.y) /
            this.image.height;
          plate_detection.h =
            (this.canvas.height * targets.yiSaPlateDetection.h) /
            this.image.height;
          plate_detection.w =
            (this.canvas.width * targets.yiSaPlateDetection.w) /
            this.image.width;

          this.ctx.strokeRect(
            plate_detection.x,
            plate_detection.y,
            plate_detection.w,
            plate_detection.h
          );
          this.ctx.fillStyle = "rgba(0,0,0,0.5)";
          this.ctx.fillRect(
            plate_detection.x - 5,
            plate_detection.y - 22,
            60,
            20
          );
          this.ctx.fillStyle = "white"; // 设置文本颜色
          this.ctx.font = "12px Arial"; // 设置文本字体大小和样式
          this.ctx.fillText(
            targets.plateNum,
            plate_detection.x - 3,
            plate_detection.y - 8
          ); // 绘制文本
        });
      } else if (this.aiType == 3) {
        list.forEach((targets) => {
          let plate_detection = {
            x: 0,
            y: 0,
            h: 0,
            w: 0,
          };
          plate_detection.x =
            (this.canvas.width * targets.bbox[0]) / this.image.width;
          plate_detection.y =
            (this.canvas.height * targets.bbox[1]) / this.image.height;
          plate_detection.h =
            (this.canvas.height * (targets.bbox[3] - targets.bbox[1])) /
            this.image.height;
          plate_detection.w =
            (this.canvas.width * (targets.bbox[2] - targets.bbox[0])) /
            this.image.width;

          this.ctx.strokeRect(
            plate_detection.x,
            plate_detection.y,
            plate_detection.w,
            plate_detection.h
          );
          this.ctx.fillStyle = "rgba(0,0,0,0.5)";
          this.ctx.fillRect(
            plate_detection.x - 5,
            plate_detection.y - 22,
            20,
            20
          );
          this.ctx.fillStyle = "white"; // 设置文本颜色
          this.ctx.font = "16px Arial"; // 设置文本字体大小和样式
          this.ctx.fillText("人", plate_detection.x - 3, plate_detection.y - 8); // 绘制文本
        });
      } else if (this.aiType == 13) {
        list.crowdDensityDataList.forEach((targets) => {
          let plate_detection = {
            x: 0,
            y: 0,
            h: 0,
            w: 0,
          };
          plate_detection.x =
            (this.canvas.width * targets.bbox[0]) / this.image.width;
          plate_detection.y =
            (this.canvas.height * targets.bbox[1]) / this.image.height;
          plate_detection.h =
            (this.canvas.height * (targets.bbox[3] - targets.bbox[1])) /
            this.image.height;
          plate_detection.w =
            (this.canvas.width * (targets.bbox[2] - targets.bbox[0])) /
            this.image.width;

          this.ctx.strokeRect(
            plate_detection.x,
            plate_detection.y,
            plate_detection.w,
            plate_detection.h
          );
          this.ctx.fillStyle = "rgba(0,0,0,0.5)";
          let text = targets.desc;
          let offX = 0;
          let offY = 0;
          if (plate_detection.x + text.length * 11 > 1000) {
            offX = 1000 - text.length * 11;
          } else {
            offX = plate_detection.x - 5;
          }
          if (plate_detection.y - 20 < 0) {
            offY = plate_detection.y + plate_detection.h;
          } else {
            offY = plate_detection.y - 22;
          }
          this.ctx.fillRect(offX, offY, text.length * 11, 20);
          this.ctx.fillStyle = "white"; // 设置文本颜色
          this.ctx.font = "11px Arial"; // 设置文本字体大小和样式
          this.ctx.fillText(text, offX, offY + 15); // 绘制文本
        });
      }
    },
    onPlayerClose(){
      this.$store.commit('MMCFlightControlCenter/uav/setState', {
        key: 'uav',
        value: {
          ...this.uav,
          showPlayer: false
        }
      })
      this.$store.commit('MMCFlightControlCenter/uav/setState', {
        key: 'showPlayer',
        value: false
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.player {
  z-index: 1 !important;
}
</style>
