<script setup lang="ts">
import { onBeforeUnmount, ref } from "vue";

defineOptions({
  name: "AlgorithmTesting"
});

const loading = ref(true);
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

setTimeout(() => {
  loading.value = !loading.value;
}, 800);
const type = ref("");

const captureStatus = ref(false);
const restore = ref(false);
function capture() {
  captureStatus.value = !captureStatus.value;
  if (captureStatus.value) {
    onStart();
  } else {
    onPauseOrClose("close");
  }
}
const picUrl = ref(
  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
);

const playCamera = ref(true);
let wsPlayVideo;
let wsClosePause;

function onStart() {
  playCamera.value = true;
  if (wsPlayVideo === undefined) {
    wsPlayVideo = new WebSocket(
      // window.serverConfig.VUE_APP_HOST_WS + "/camera"
      "ws://192.168.10.14:9001" + "/camera"
    );
  } else {
    wsPlayVideo.send("continue");
    console.log("1111");
  }

  wsPlayVideo.onmessage = function (evt) {
    console.log(playCamera.value, "connect");
    if (evt.data === "connect") {
      wsPlayVideo.send("start");
    } else if (playCamera.value) {
      picUrl.value = "data:image/png;base64," + evt.data;
    }
  };
}

function onPauseOrClose(command) {
  playCamera.value = false;
  if (command === "close") {
    picUrl.value =
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg";
    restore.value = false;
  }
  if (command === "pause") {
    loading.value = true;
    setTimeout(() => {
      loading.value = !loading.value;
      picUrl.value =
        "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg";
      restore.value = true;
    }, 800);
  }

  if (wsClosePause === undefined) {
    wsClosePause = new WebSocket("ws://192.168.10.14:9001" + "/pause");
    wsClosePause.onopen = function (evt) {
      console.log(evt);
      if (command === "close") {
        wsClosePause.send("close");
        wsClosePause = undefined;
      } else if (command === "pause") {
        wsClosePause.send("pause");
      }
    };
  } else {
    if (command === "close") {
      wsClosePause.send("close");
      wsClosePause = undefined;
      wsClosePause = undefined;
    } else if (command === "pause") {
      wsClosePause.send("pause");
    }
  }
}
function onRestore() {
  if (!restore.value) {
    onPauseOrClose("pause");
  } else {
    onStart();
    restore.value = false;
  }
}
onBeforeUnmount(() => {
  if (wsClosePause !== undefined) {
    wsClosePause.send("close");
  }
});
</script>

<template>
  <div class="main">
    <h2>算法实测</h2>
    <el-card shadow="hover">
      <el-row :gutter="24" justify="space-between">
        <el-col :xs="12" :sm="12">
          <div
            v-loading="loading"
            element-loading-text="Loading..."
            :element-loading-spinner="svg"
            element-loading-svg-view-box="-10, -10, 50, 50"
            element-loading-background="rgba(122, 122, 122, 0.8)"
          >
            <img id="imgCamera" :src="picUrl" class="w-[100%] h-[100%]" />
          </div>

          <!-- <el-image :src="picUrl" class="w-[100%] h-[100%]" /> -->
        </el-col>
        <el-col :xs="12" :sm="12">
          <div class="mb-2">检测类型</div>
          <el-select
            v-model="type"
            placeholder="请选择类型"
            :style="{ width: '100%' }"
          >
            <el-option label="周长" value="1" />
            <el-option label="材料" value="2" />
          </el-select>
          <div class="mt-6">
            <el-button
              :color="captureStatus ? '#F56C6C' : '#1C0D82'"
              @click="capture"
              style="color: #fff"
              >{{ captureStatus ? "关闭相机" : "开启相机" }}</el-button
            >
            <el-button
              :disabled="!captureStatus"
              color="#1C0D82"
              @click="onRestore"
              >{{ restore ? "恢复" : "拍摄" }}</el-button
            >
            <!-- <el-button color="#1C0D82" @click="onStart()">{{
              "恢复"
            }}</el-button> -->
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
