<template>
  <div>
    <el-dialog
      custom-class="check-media"
      destroy-on-close
      v-model="showCheckMediaVideo"
      :close-on-click-modal="false"
      :fullscreen="screenWidth < 900"
      :show-close="false"
      width="60%"
    >
      <el-alert
        v-if="isVideoAvailable === undefined || isAudioAvailable === undefined"
        >检测中。</el-alert
      >
      <el-alert
        v-else-if="isVideoAvailable === true && isAudioAvailable === true"
        type="success"
        >摄像头工作正常，麦克风工作正常。</el-alert
      >
      <el-alert
        v-else-if="isVideoAvailable === true && isAudioAvailable === false"
        type="warning"
        >摄像头工作正常，麦克风无法正常工作。</el-alert
      >
      <el-alert
        v-else-if="isVideoAvailable === false && isAudioAvailable === true"
        type="warning"
        >摄像头无法正常工作，麦克风工作正常。</el-alert
      >
      <el-alert v-else type="error"
        >摄像头无法正常工作，麦克风无法正常工作。</el-alert
      >
      <!-- <div id="row"> -->
      <div id="check-media-wrap" ref="checkMediaWrapRef">
        <video id="check-media-video" ref="checkMediaVideoRef"></video>
        <!-- <el-icon class="microphone-icon" :size="50"> -->
        <Microphone
          v-if="isAudioAvailable === undefined"
          class="microphone-loading"
        />
        <Microphone
          v-else-if="isAudioAvailable === true"
          class="microphone-on"
        />
        <Mute v-else class="microphone-off" />
        <!-- </el-icon> -->
      </div>
      <!-- </div> -->
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="close">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="MediaCheck">
import { nextTick, onMounted, ref } from "vue";
import {
  FullScreen,
  CloseBold,
  Microphone,
  Mute,
} from "@element-plus/icons-vue";
const screenWidth = ref(0);
screenWidth.value = screen.width;
const checkMediaVideoRef = ref(null);
const checkMediaWrapRef = ref(null);
const showCheckMediaVideo = ref(true);
const isVideoAvailable = ref(undefined);
const isAudioAvailable = ref(undefined);
const videoStream = ref(null);
const audioStream = ref(null);

onMounted(() => {
  nextTick(async () => {
    const videoWidth = checkMediaWrapRef.value.offsetWidth;
    const videoHeight = checkMediaWrapRef.value.offsetHeight;
    try {
      videoStream.value = await navigator.mediaDevices.getUserMedia({
        video: { width: videoWidth, height: videoHeight },
      });
      checkMediaVideoRef.value.srcObject = videoStream.value;
      checkMediaVideoRef.value.play();
      isVideoAvailable.value = true;
    } catch (error) {
      console.log(error);
      isVideoAvailable.value = false;
    }
    try {
      audioStream.value = await navigator.mediaDevices.getUserMedia({
        audio: true,
      });
      isAudioAvailable.value = true;
    } catch (error) {
      console.log(error);
      isAudioAvailable.value = false;
    }
  });
});

const emit = defineEmits(["close"]);

const close = () => {
  try {
    videoStream.value.getTracks().forEach((track) => track.stop());
  } catch (error) {
    console.log(error);
  }
  try {
    audioStream.value.getTracks().forEach((track) => track.stop());
  } catch (error) {
    console.log(error);
  }
  showCheckMediaVideo.value = false;
  emit("close");
};
</script>
<style lang="scss" scoped>
// :deep(.check-media) {
:deep(.el-dialog__body) {
  text-align: center;
  #check-media-wrap {
    display: inline-block;
    margin: 1vw auto;
    border-radius: 1vw;
    overflow: hidden;
    width: 36vw;
    height: 24vw;
    background-color: #000;
    position: relative;
    // #check-media-video {
    //   width: 100%;
    //   height: 100%;
    // }
    svg {
      position: absolute;
      left: 1vw;
      bottom: 1vw;
      width: 3vw;
      height: 3vw;
    }
    .microphone-loading {
      color: #fff;
    }
    .microphone-on {
      color: springgreen;
    }
    .microphone-off {
      color: indianred;
    }
  }
}
// }

@media screen and (max-width: 900px) {
  :deep(.check-media) {
    .el-dialog__body {
      #check-media-wrap {
        margin: 2vw auto;
        width: 80vw;
        height: 54vw;
        svg {
          width: 6vw;
          height: 6vw;
        }
      }
    }
  }
}
</style>
