<template>
  <div>
    <el-button type="primary" style="width:200px" class="mt20" @click="openCamara">
      {{placeholder}}
    </el-button>
    <el-dialog :visible.sync="openCamaraDialog" :close-on-click-modal="false" width="600px">
      <!--canvas截取流-->
      <el-row>
        <el-col :span="12">
          <video ref="video"  width="240" height="180" autoplay></video>
          <div style="mt20" class="tc">
            <el-button size="medium" type="primary" @click="photograph">采集</el-button>
          </div>
        </el-col>

        <el-col :span="12">
          <canvas ref="canvas"  width="240" height="180"></canvas>
          <div style="mt20" class="tc">
            <el-button size="medium" type="primary" @click="useImage">使用图片</el-button>
          </div>
        </el-col>

        <el-col :span="24">
          <div style="mt20" class="tc">
            <el-button size="medium" type="primary" @click="closeCamera">关闭页面</el-button>
          </div>
        </el-col>

      </el-row>



    </el-dialog>
  </div>
</template>
<script>
  import {
    httpServer
  } from "@/components/httpServer/httpServer.js";
  export default {
    data() {
      return {
        openCamaraDialog: false,
        isnotbtn: false,
        isnotcanvas: false,
        imageBase64: ''
      }
    },
    props: ['placeholder', 'width'],
    mounted() {
      console.log("mounted")
    },
    methods: {
      openCamara() {
        this.openCamaraDialog = true;
        this.callCamera()
      },
      // 调用摄像头
      callCamera() {
        // H5调用电脑摄像头API
        navigator.mediaDevices
          .getUserMedia({
            video: true,
          })
          .then((success) => {
            this.isnotbtn = true
            // 摄像头开启成功
            this.$refs["video"].srcObject = success;
            // 实时拍照效果
            this.$refs["video"].play();
          })
          .catch((error) => {
            this.$message.error(
              "摄像头开启失败，请检查摄像头是否可用！或者打开摄影头"
            );
            console.error("摄像头开启失败，请检查摄像头是否可用！");
          });
      },
      // 拍照
      photograph() {
        let ctx = this.$refs["canvas"].getContext("2d");
        // 把当前视频帧内容渲染到canvas上
        ctx.drawImage(this.$refs["video"], 0, 0, 240, 180);
        // 转base64格式、图片格式转换、图片质量压缩
        let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 1); // 由字节转换为KB 判断大小
        this.imageBase64 = imgBase64.replace("data:image/jpeg;base64,", "");
        // let str = imgBase64.replace("data:image/jpeg;base64,", "");
        // let strLength = str.length;
        // let fileLength = parseInt(strLength - (strLength / 8) * 2); // 图片尺寸  用于判断
        // let size = (fileLength / 1024).toFixed(2);
        // console.log(size); // 上传拍照信息  调用接口上传图片 .........

        // 保存到本地
        // this.dialogCamera = false;
        // let ADOM = document.createElement("a");
        // ADOM.href = imgBase64 ;
        // ADOM.download = new Date().getTime() + ".jpeg";
        // ADOM.click();
      },
      useImage() {
        let param = {
          image: this.imageBase64
        }
        httpServer("user.addFeatureImg", param).then(res => {
          if( res.code != 200) return
          this.$emit("onFinish", res.data.url);
        })

      },
      // 关闭摄像头
      closeCamera() {
        this.openCamaraDialog = false;
        if (!this.$refs["video"].srcObject) {
          this.dialogCamera = false;
          return;
        }
        let stream = this.$refs["video"].srcObject;
        let tracks = stream.getTracks();
        tracks.forEach((track) => {
          track.stop();
        });
        this.$refs["video"].srcObject = null;
        this.isnotbtn = false

      },
    },
  };
</script>
<style scoped>
  .imagbtn {
    display: flex;
    align-content: center;
    justify-content: start;
  }

  .querybtn {
    width: 50px;
    height: 50px;
    margin: auto 0;
    border-radius: 15px;
    /* font-size:30px; */
  }
</style>
