<template>
  <AuthImage
    :auth-src="thumbnailImageSrc"
    class="image-capture"
  />
</template>
<script>
import Common from '../common/Common.js';
import AuthImage from '../widget/AuthImage.vue';
export default {
  components: {
    AuthImage,
  },
  data: function () {
    return {
      deviceId: '',
      cameraNo: '',
      imageSrc: undefined,
      imageServerBaseUrl: '', //定时器
      controller: '', //抓拍程序请求地址
      captureServerUrl: '', // 正在抓拍
      running: false,
      thumbnailImageSrc: undefined, // 缩略图
      oldImageName: '',
      capturenMemoryServerUrl: '', //抓拍至内存的抓拍请求地址
      captureUrl: '',
    };
  },

  watch: {
    imageSrc: function () {
      this.getThumbnailImg();
    },
  },

  mounted: function () {
    this.getCameraNo();
  },

  beforeUnmount: function () {
    this.stop();
  },
  methods: {
    start: function () {
      this.capture();
      this.controller = window.setInterval(this.capture, 1000);
      console.log('开始抓拍。');
    },
    stop: function () {
      if (this.controller) {
        window.clearInterval(this.controller);
        console.log('停止抓拍。');
      }
    },

    /**
			 * 获取当前的图片
			 */
    getCurrentImage: function () {
      if (this.imageSrc == undefined || this.imageSrc.length == 0) {
        return undefined;
      } else {

        return this.captureUrl + 'CaptureResource/image?fileName=' + this.imageSrc;
      }
    },
    capture: function () {
      //发送请求进行抓拍
      var _self = this;
      // 如果正在抓拍，则返回
      if (_self.running == true) {
        return;
      }
      if (_self.capturenMemoryServerUrl == undefined || _self.capturenMemoryServerUrl.length == 0) {
        return;
      }
      _self.running = true;
      $.ajax({
        url: _self.capturenMemoryServerUrl,
        type: 'GET',
        contentType: 'application/json',
        data: {
          'deviceId': _self.deviceId,
          'channelNo': _self.cameraNo,
        },
        success: function (data) {
          console.log('抓拍接口调用结束1。' + data);
          setTimeout(function () {
            _self.imageSrc = data;
          }, 500);
          _self.running = false;
          console.log('抓拍接口调用结束2。');
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          // add by jack 20171107
          // Common.processException(XMLHttpRequest, textStatus, errorThrown);
          // window.clearInterval(_self.controller); 
          _self.running = false;
        },
      });
      console.log('图片地址：' + this.oldImageName);
      this.thumbnailImageSrc = this.oldImageName;
    },

    getCameraNo: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('OAConfigResource/queryConfig'),
        type: 'get',
        dataType: 'json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.cameraNo = data.cameraNo;
          _self.deviceId = data.deviceId;
          _self.imageServerBaseUrl = data.imageServerBaseUrl;
          _self.captureServerUrl = data.captureServerUrl;
          _self.capturenMemoryServerUrl = data.capturenMemoryServerUrl;
          _self.captureUrl = _self.capturenMemoryServerUrl.match(/(\S*)CaptureResource/)[1];
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
			 * 获取缩略图
			 * @param {Object} src
			 */
    getThumbnailImg: function () {
      if (this.imageSrc != undefined && this.imageSrc.length > 0) {
        //var srcInfos = this.imageSrc.split("\\"); 
        //this.thumbnailImageSrc = this.imageServerBaseUrl + srcInfos[0] + "\\thumbnail\\" + srcInfos[1];
        //this.oldImageName = this.imageServerBaseUrl + "\\" + this.imageSrc;
        this.oldImageName = this.captureUrl + 'CaptureResource/image?fileName=' + this.imageSrc;
      } else {
        //this.oldImageName = undefined;
      }
    },
  },
};
</script>
<style scoped>
	.image-capture {
		width: auto;
		height: auto;
		max-height: 100%;
		max-width: 100%;
	}
</style>