<template>
  <div>
    <el-tooltip content="AI识别" placement="bottom">
      <div class="menu-item">
        <img src="../../assets/images/car1.png" @click="aiVisible = !aiVisible" />
        <div class="ai-list" v-if="aiVisible">
          <el-tooltip
            v-for="(item,index) in aiIdentifyList"
            :key="index"
            :content="item.title"
            placement="bottom"
          >
            <div class="ai-item" @click="onAiIdentify(item.type)">
              <img class="img_src" :src="item.Img" />
            </div>
          </el-tooltip>
        </div>
      </div>
    </el-tooltip>
    <el-dialog :title="`${aiTitle}结果`" :visible.sync="aiResultShow">
      <el-image style="width: 100px; height: 100px" :src="aiResultImg" fit="contain"></el-image>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "axios";
import { Control_API } from "../../../../../../api";
import { AI_API } from "../../../../../../api";
import testImg from './img';

function blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.readAsDataURL(blob);
  });
}

export default {
  name: "AIList",
  data() {
    return {
      aiVisible: false,
      aiIdentifyList: [
        {
          title: "人脸识别",
          type: "face",
          Img: require("../../assets/images/人脸识别.png"),
        },
        {
          title: "车牌识别",
          type: "car",
          Img: require("../../assets/images/车牌检测.png"),
        },
        {
          title: "人流识别",
          type: "person",
          Img: require("../../assets/images/人流识别.png"),
        },
        {
          title: "火焰烟雾",
          type: "smoke",
          Img: require("../../assets/images/火焰烟雾.png"),
        },
        {
          title: "漏油识别",
          type: "oilLeak",
          Img: require("../../assets/images/车辆识别.png"),
        },
        {
          title: "裸土识别",
          type: "bareSoil",
          Img: require("../../assets/images/异物检测.svg"),
        },
      ],
      aiResultShow: false, //ai识别结果展示
      aiTitle: "",
      aiResultImg: "", //ai结果图
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter", ["cesiumViewer"]),
    ...mapState("MMCFlightControlCenter/uav", ["uav"]),
  },
  methods: {
    /**
     * ai识别事件
     */
    onAiIdentify(type) {
      let find = this.aiIdentifyList.find((item) => item.type === type);
      this.aiTitle = find.title;
      // 截图做ai识别
      this.$emit("screenShot", {
        callback: async (blob) => {
          let base64 = await blobToBase64(blob);
          let results = [
            /* {
              x: 0,
              y: 0,
              width: 0,
              height: 0,
              label: "",
              prob: 1,
            }, */
          ];
          switch (type) {
            // 用的百度
            case "face":
              break;

            // 另一种识别结果
            case "bareSoil":
              break;

            // 共达地通用数据结构
            default:
              let res = await AI_API[type]({
                image: base64,
              });
              results = res.data.targets.map((item) => {
                return {
                  x: item.bbox.box.left_top_x,
                  y: item.bbox.box.left_top_y,
                  width:
                    item.bbox.box.right_bottom_x - item.bbox.box.left_top_x,
                  height:
                    item.bbox.box.right_bottom_y - item.bbox.box.left_top_x,
                  label: item.bbox.label,
                  prob: item.bbox.prob,
                };
              });
              break;
          }
          // 将识别结果绘制到图片上
          let img = new Image();
          img.onload = function () {
            let width = img.width;
            let height = img.height;
            console.log("图片宽度:", width, "高度:", height);

            // 现在可以在Canvas上绘制图片和矩形框
            let canvas = drawOnCanvas(img, width, height, results);

            // 展示识别结果
            this.aiResultImg = canvas.toDataURL("image/png");
            this.aiResultShow = true;
            // 识别结果上传到视图库
          };
          // img.src = base64;
          img.src = testImg;
        },
      });
    },
  },
  drawOnCanvas(img, width, height, aiResults) {
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");

    // 设置Canvas大小与图片相同
    canvas.width = width;
    canvas.height = height;

    // 绘制图片
    ctx.drawImage(img, 0, 0, width, height);

    // 绘制矩形框
    aiResults.forEach((item) => {
      ctx.beginPath();
      ctx.rect(item.x, item.y, item.width, item.height); // 你可以调整这些值来改变矩形框的位置和大小
      ctx.strokeStyle = "red"; // 矩形框的颜色
      ctx.lineWidth = 1; // 矩形框的边框宽度
      ctx.stroke();

      ctx.fillStyle = "white"; // 文字颜色
      ctx.textAlign = "left";

      // 绘制文字背景
      ctx.fillStyle = "rgba(255, 0, 0, 0.5)"; // 背景颜色
      ctx.fillRect(item.x, item.y - 50, item.width, item.height); // 背景的位置和大小

      // 绘制文字
      ctx.fillText(`${item.label}: ${prob}`, item.x, item.y); // 文字内容和位置
    });

    return canvas;
  },
};
</script>

<style>
</style>