<template>
  <div>
    <UavList></UavList>
    <Player
      class="player"
      ref="player"
      v-if="showPlayer && uav"
      :pointListFlag="pointListFlag"
      @imgUrl="getimgUrl"
      @startLinePoint="startLinePoint"
      :scheduleData="scheduleData"
      :NXdata="NXdata"
      :lineLableName="lineLableName"
      :device="uav"
      @close="onPlayerClose"
    />
    <ControlPanel v-if="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,
  },
  data() {
    return {
      pointListFlag: false,
      aiPopup: null, //识别图标
      scheduleData: {}, //航线执行进度
      keyFlag: false, //NX状态
      NXdata: {}, //NX数据
      lineLableName: "", //当前航线标签
      videoItem: 0,
      showCenter: false,
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter/uavApplications", [
      "uav",
      "showPlayer",
      "showPanel",
    ]),
    taskId() {
      return this.$store.state.fckernel.taskId;
    },
    YJTaskInfo() {
      return this.$store.state.fckernel.YJTaskInfo;
    },
    lineInfo() {
      return this.$store.state.fckernel.lineInfo;
    },
    uav_mounts() {
      let { mounts } = this.uav.control;
      return mounts
        .map((item) => {
          let find_item = this.mount.list.find(
            (m) => m.name === item.gimbalName
          );
          return find_item || undefined;
        })
        .filter((item) => item);
    },
  },
  created() {
    // 等待航线上传成功在执行
    // 判断是否以一键任务
    /* Bus.$on("off_take", () => {
      this.takeOff = true;
    }); */
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    startLinePoint() {
      this.pointListFlag = !this.pointListFlag;
      if (this.pointListFlag) {
        this.pointFlag = true;
        setTimeout(() => {
          this.pointFlag = false;
        }, 1000);
      }
    },
    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); // 绘制文本
        });
      }
    },
    async getimgUrl(val, aiType, item) {
      this.aiType = aiType;
      this.imgshow = true;
      this.imgshowurl = val;
      //人流
      if (aiType == 3) {
        this.aiTotal = item.detectPersonCount;
        this.getcanvas(val, item);
      }
      //车流
      if (aiType == 13) {
        // this.aiTotal = item.detectPersonCount;
        let data = JSON.parse(item.jsonData).label;
        console.log(data, "datatat");
        let car = "";
        let van = "";
        let truck = "";
        let bus = "";
        for (let t in data) {
          if (t == "car" && data["car"]) {
            car = "小轿车" + data["car"] + "辆";
          } else if (t == "truck" && data["truck"]) {
            truck = "卡车" + data["truck"] + "辆";
          } else if (t == "van" && data["van"]) {
            van = "面包车" + data["van"] + "辆";
          } else if (t == "bus" && data["bus"]) {
            bus = "巴士" + data["bus"] + "辆";
          }
        }
        this.aiTotal = car + truck + van + bus;
        this.getcanvas(val, item);
      }
      //游泳
      if (aiType >= 4) {
        this.getcanvas(val, item);
      }
      //人脸
      if (aiType == 1 || aiType == 2) {
        let data = {
          fileKey: item.visitUrl,
          aiType: aiType,
        };
        let res = await API.FCKERNEL.getFaceResultByFileKey(data);
        if (aiType == 1) {
          this.faceList = res.faceImageInfo?.faceResults;
          this.faceShow = true;
          this.getcanvas(val, res.faceImageInfo);
        } else {
          this.carList = res.aiPlateShiJuResultInfoDtoList;
          this.carShow = true;
          this.getcanvas(val, res);
        }
      }
    },
    onPlayerClose(){
      this.$store.dispatch("MMCFlightControlCenter/uavApplications/showPlayer", this.uav);
    }
  },
};
</script>

<style lang="scss" scoped>
.player {
  /* position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0; */
}
</style>
