<template>
  <div>
    <Row>
      <i-col span="24">
        <Alert type="error" v-if="errMsg.show">{{errMsg.msg}}</Alert>
      </i-col>
      <i-col span="12">
        <video id="video" width="200px" height="200px" autoplay="autoplay"></video>
      </i-col>
      <i-col span="12">
        <canvas id="canvas" width="300px" height="300px"></canvas>
      </i-col >
      <i-col span="3">
        <Button type="primary" @click="TakePhoto">拍照</Button>
      </i-col>
      <i-col span="12">
        <Button type="primary" :loading="loading" @click="savePhoto">
          <span v-if="!loading">保存</span>
          <span v-else>正在保存...</span>
        </Button>
      </i-col>
      </Row>
  </div>
</template>

<script>
// import { upBase64 } from '@/api/common'
import { createUpLoadFiles, getSign } from '../../api/common'
export default {
  name: 'face-camera',
  props: {
    isPlay: false,
    upPicData: {
      type: String,
      default: () => {
        return 'jie-yu'
      }
    }

  },
  data () {
    return {
      errMsg: {
        show: false,
        msg: ''
      },
      mediaStreamTrack: Object,
      loading: false,
      is_photo: false
    }
  },
  created () {
    // let that = this
    setTimeout(function () {
      // that.openCamera()
    }, 1000)
  },
  watch: {
    isPlay (bol) {
      if (bol === true) {
        this.newOpenCamera()
      } else {
        console.log('准备关闭摄像头')
        this.mediaStreamTrack.stop()
      }
    }
  },
  methods: {
    // 拍照
    TakePhoto () {
      alert()
      let video = document.getElementById('video')
      let canvas = document.getElementById('canvas')
      let ctx = canvas.getContext('2d')
      let data = ctx.drawImage(video, 0, 0, 300, 300)
      console.log(data)
      this.is_photo = true
    },
    newOpenCamera () {
      let that = this
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
      if (navigator.getUserMedia) {
        navigator.getUserMedia({ audio: true, video: { width: 200, height: 200 } },
          function (stream) {
            let video = document.getElementById('video')

            that.mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1]
            video.srcObject = stream
            video.play()
          },
          function (err) {
            console.log('The following error occurred: ' + err.name)
          }
        )
      } else {
        console.log('getUserMedia not supported')
      }
    },
    modalChange (e) {
      this.$emit('modal-change', e)
      console.log(e, '模态框发生变化')
    },
    ShowInfo (op) {
      this.errMsg = { show: true, msg: op }
      let that = this
      setTimeout(function () {
        that.errMsg = { show: false, msg: '' }
      }, 2000)
    },
    savePhoto () {
      if (this.is_photo === true) {
        this.loading = true
        this.upimg()
      } else {
        this.ShowInfo('请先拍照！！！')
      }
    },
    // upimg () {
    //   let that = this
    //   let imgData = document.getElementById('canvas').toDataURL('image/png')
    //   let data = imgData.substr(22)
    //   upBase64(data).then(data => {
    //     that.loading = false
    //     that.$emit('img-result', data.data)
    //   })
    // },
    datetime2str (date) {
      let time1 = date.getFullYear() + ''
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hh = date.getHours()
      let mm = date.getMinutes()
      let ss = date.getSeconds()
      time1 += month < 10 ? '0' + month : month
      time1 += day < 10 ? '0' + day : day
      time1 += hh < 10 ? '0' + hh : hh
      time1 += mm < 10 ? '0' + mm : mm
      time1 += ss < 10 ? '0' + ss : ss
      return time1
    },
    upimg (base64img) {
      let that = this
      let imgData = document.getElementById('canvas').toDataURL('image/png')
      let data = imgData.substr(22)
      // upBase64(data).then(data => {
      //   that.loading = false
      //   that.$emit('img-result', data.data)
      // })
      this.backImgUrl = ''
      // let that = this
      this.loading = true
      let params = {}
      params.file = base64img
      params.filePath = this.filePath
      params.fileName = this.fileName
      var time = new Date().getTime()
      this.timeStep = time.toString()
      let param = {
        filePath: this.datetime2str(new Date()),
        fileName: this.datetime2str(new Date()) + '.png',
        timestamp: this.timeStep
      }
      getSign(param).then(res => {
        if (res.data.errcode === 0) {
          createUpLoadFiles(res.data.data.docking_url, { sign: res.data.data.sign, timestamp: this.timeStep, filePath: param.filePath, fileName: param.fileName, file: data }).then(res => {
            if (res.data.errcode === 0) {
              that.loading = false
              that.backImgUrl = res.data.data
              console.log(res.data.data, '222')
              console.log(that.backImgUrl, '1111')
              that.loading = false
              that.$emit('img-result', res.data.data)
            } else {
              that.loading = false
              // that.$Notice.error({ title: '上传失败', desc: '请重新拍照' })
            }
          })
        } else {
          // this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
        }
      })
    }
  }
}
</script>
