<template>
  <a-row class="photo">
    <div class="img">
      <viewer class="iv" :images="images">
        <a-icon v-if="!imgSrc" theme="twoTone" :style="{ fontSize: '32px' }" type="camera" />
        <img v-else :src="imgSrc" width="32px" height="32px" />
      </viewer>
      <div class="photo-btn-grid">
        <p-button class="btn" type="link" v-if="showTag == 0" @click="start">启动摄像头</p-button>
        <p-button class="btn" type="link" v-if="showTag == 1" @click="photograph">拍照</p-button>
        <p-button class="btn close" type="link" v-if="showTag == 1" @click="stop">关闭摄像头</p-button>
      </div>
    </div>
    <div class="source">
      {{ fileName }}
    </div>
  </a-row>
</template>
<script>
import axios from 'axios'
import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: {
    inline: true,
    button: true,
    navbar: true,
    title: true,
    toolbar: true,
    tooltip: true,
    movable: true,
    zoomable: true,
    rotatable: true,
    scalable: true,
    transition: true,
    fullscreen: true,
    keyboard: true,
    url: 'data-source'
  }
})

const request = axios.create({
  timeout: 60000 // 请求超时时间
})

export default {
  name: 'photograph',
  props: ['photographUrl'],
  data() {
    return {
      imgSrc: '',
      showTag: 0,
      sourceId: '',
      fileBlob: null,
      fileName: ''
    }
  },
  computed: {
    images() {
      return [this.imgSrc]
    }
  },
  methods: {
    req(command) {
      return request({
        url: this.photographUrl,
        method: 'post',
        data: { command }
      })
    },
    test() {

      this.req('isRunning')
        .then(d => {
          if (d.data && d.data.success && d.data.data) {
            this.showTag = 1
          } else {
            this.showTag = 0
          }
        })
        .catch(e => {
          this.$message.error('摄像头状态检测失败，请打开摄像头服务')
        })
    },
    start() {
      this.req('start')
        .then(d => {
          if (d.data && d.data.success) {
            this.showTag = 1
          } else {
            this.$message.error('开启摄像头失败')
          }
        })
        .catch(e => {
          this.$message.error('开启摄像头失败')
        })
    },
    photograph() {

      this.req('pic').then(d => {
        if (d.data && d.data.success) {
          this.imgSrc = 'data:image/jpg;base64,' + d.data.data
          this.fileBlob = this.dataURLtoFile(this.imgSrc)

          this.$emit('photograph', this.fileBlob)
        } else {
          this.$message.error('拍照失败')
        }
      })
    },
    stop() {
      this.req('stop')
        .then(d => {
          if (d.data && d.data.success) {
            this.showTag = 0
          } else {
            this.$message.error('关闭摄像头失败')
          }
        })
        .catch(e => {
          this.$message.error('关闭摄像头失败')
        })
    },
    dataURLtoFile(dataurl) {
      let filename = new Date().getTime() + '.jpg'
      this.fileName = filename
      // 获取到base64编码
      const arr = dataurl.split(',')
      // 将base64编码转为字符串
      const bstr = window.atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n) // 创建初始化为0的，包含length个元素的无符号整型数组
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, {
        type: 'image/jpeg'
      })
    }
  },
  mounted() {
    this.test()
  },
  destroyed() {
    //this.stop();
  }
}
</script>
<style lang="less" scoped>
.photo {
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 2px 8px;
  .source {
    font-size: 12px;
    line-height: 1.5
  }
  .img {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    .iv {
      //border: 1px solid #e8e8e8;
      height: 35px;
      width: 35px;
      &:hover {
        cursor: pointer;
      }
      display: inline;
    }
  }
  .btn {
    margin-left: 10px;
    flex-grow: 0;
  }
}
</style>
