<template>
  <div class="page">
    <div class="top">
      <div class="example">
        <div>文案与模板提示区域</div>
      </div>
      <div class="model">
        <img :src="modelUrl" alt="" />
      </div>
    </div>

    <div class="bottom">
      <video
        v-if="!isSuccess"
        id="video"
        muted
        autoplay="autoplay"
        :controls="false"
      ></video>

      <div v-if="!isSuccess">
        <div class="selectImg">
          <img src="../../assets/img/selectImg.png" />
          <div class="uploadText">上传照片</div>
        </div>

        <div id="action" @click="takePicture">
          <div class="circleInside"></div>
        </div>
      </div>

      <div v-if="isSuccess">
        <div class="selectImg">
          <img src="../../assets/img/selectImg.png" />
          <div class="uploadText">上传照片</div>
        </div>

        <div class="confirm" @click="confirmPhoto">
          <img src="../../assets/img/success.png" />
          <div class="uploadText">就这张了</div>
        </div>

        <div class="reTry" @click="reTry">
          <img src="../../assets/img/reTry.png" />
          <div class="uploadText">重新拍摄</div>
        </div>
      </div>

      <canvas
        v-if="isShowCanvas"
        id="canvas"
        style="width: 1530; height: 950"
      ></canvas>

      <div v-if="isSuccess" class="preview">
        <img :src="imgSrc" />
      </div>
    </div>
    <!-- Top section -->
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";

let imgSrc = ref("");
let isSuccess = ref(false);
let isShowCanvas = ref(true);
let modelUrl = ref("");

const startCamera = () => {
  function getUserMedia(constraints, success, error) {
    if (navigator.mediaDevices.getUserMedia) {
      //最新的标准API
      navigator.mediaDevices
        .getUserMedia({
          audio: {
            echoCancellation: true,
          },
          video: {
            facingMode: "user",
          },
        })
        .then(success)
        .catch(error);
    } else if (navigator.webkitGetUserMedia) {
      //webkit核心浏览器
      navigator.webkitGetUserMedia(constraints, success, error);
    } else if (navigator.mozGetUserMedia) {
      //firfox浏览器
      navigator.mozGetUserMedia(constraints, success, error);
    } else if (navigator.getUserMedia) {
      //旧版API
      navigator.getUserMedia(constraints, success, error);
    }
  }

  const video = document.querySelector("video.uni-video-video");
  let canvas = document.querySelector("canvas.uni-canvas-canvas");
  const action = document.querySelector("#action");
  let context = canvas.getContext("2d");

  function success(stream) {
    //兼容webkit核心浏览器
    let CompatibleURL = window.URL || window.webkitURL;
    //将视频流设置为video元素的源
    console.log(stream);

    //video.src = CompatibleURL.createObjectURL(stream);
    video.srcObject = stream;
    video.play();
  }

  function error(error) {
    console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
  }

  if (
    navigator.mediaDevices.getUserMedia ||
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia
  ) {
    //调用用户媒体设备, 访问摄像头
    getUserMedia(
      {
        audio: false,
        video: true,
      },
      success,
      error
    );
  } else {
    alert("不支持访问用户媒体");
  }

  action.addEventListener("click", function () {
    canvas.width = 1530;
    canvas.height = 950;
    context.drawImage(video, 0, 0);
    const dataURL = canvas.toDataURL("image/png");
    imgSrc.value = dataURL;
    setTimeout(() => {
      isShowCanvas.value = false;
      isSuccess.value = true;
    }, 10);
  });

  // 备用方案
  // action.addEventListener("click", function () {
  //   context.drawImage(video, -50, -50, 310, 220);
  //   const dataURL = canvas.toDataURL("image/png");
  //   imgSrc.value = dataURL;

  //   setTimeout(() => {
  //     isShowCanvas.value = false;
  //     isSuccess.value = true;
  //   }, 10);
  //   console.log(dataURL);
  // });
};

const takePicture = () => {
  console.log("Take Picture !");
};

const confirmPhoto = () => {};

const reTry = () => {
  isSuccess.value = false;
  isShowCanvas.value = true;
  imgSrc.value = "";
  setTimeout(() => {
    startCamera();
  }, 10);
};

onLoad((options) => {
  console.log(options, "options");
  modelUrl.value = options.modelUrl;
});

onMounted(() => {
  console.log(this);

  startCamera();
});
</script>

<style lang="scss" scoped>
.page {
  width: 100vw;
  height: 100vh;
  padding: 0;

  .top {
    display: flex;
    width: 100%;
    height: 32%;
    .example {
      width: 60%;
      height: 100%;
      color: #000;
      background-color: #fff;
    }
    .model {
      position: relative;
      width: 40%;
      height: 100%;
      background-color: #000000;
      img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
      }
    }
  }
  .bottom {
    position: relative;
    width: 100%;
    height: 68%;
    video {
      width: 100%;
      height: 100%;
    }

    .selectImg {
      position: absolute;
      left: 65rpx;
      bottom: 75rpx;
      width: 68rpx;
      height: 68rpx;
      border: 5rpx solid #ffffff;
      border-radius: 5rpx;
      z-index: 99;
      img {
        position: absolute;
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%);
        width: 70%;
        height: 70%;
      }
      .uploadText {
        position: absolute;
        left: 50%;
        bottom: -40rpx;
        width: 150%;
        font-size: 20rpx;
        transform: translateX(-40%);
      }
    }

    #action {
      position: absolute;
      left: 50%;
      bottom: 45rpx;
      width: 120rpx;
      height: 120rpx;
      transform: translateX(-50%);
      background-color: #ffffff;
      border-radius: 60rpx;
      z-index: 99;
      .circleInside {
        position: absolute;
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%);
        width: 100rpx;
        height: 100rpx;
        background-color: #ffffff;
        border-radius: 50%;
        border: 6rpx solid #000;
      }
    }

    .confirm {
      position: absolute;
      left: 50%;
      bottom: 75rpx;
      width: 80rpx;
      height: 80rpx;
      // border: 5rpx solid #ffffff;
      transform: translateX(-50%);
      border-radius: 60rpx;
      z-index: 99;
      img {
        position: absolute;
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%);
        width: 100%;
        height: 100%;
      }
      .uploadText {
        position: absolute;
        left: 50%;
        bottom: -40rpx;
        width: 150%;
        font-size: 20rpx;
        transform: translateX(-32%);
      }
    }

    .reTry {
      position: absolute;
      right: 65rpx;
      bottom: 75rpx;
      width: 68rpx;
      height: 68rpx;
      border: 5rpx solid #ffffff;
      border-radius: 5rpx;
      z-index: 99;
      img {
        position: absolute;
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%);
        width: 70%;
        height: 70%;
      }
      .uploadText {
        position: absolute;
        left: 50%;
        bottom: -40rpx;
        width: 150%;
        font-size: 20rpx;
        transform: translateX(-40%);
      }
    }

    .preview {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      img {
        position: absolute;
        top: 110rpx;
        width: 120%;
        height: 60%;
      }
    }
  }
}
</style>
