<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" style="width: 1600px" append-to-body @close="closeDialog">
      <el-form ref="dataForm" :model="irisForm" label-well-code="right" label-width="95px" style="margin-top: 20px">
        <el-row type="flex" justify="center">
          <el-col :offset="2" :span="12">
            <div class="avatar">
              <el-image
                :src="photoRight!==''?photoRight:defaultPhoto"
                fit="fill"
                style="width: 280px; height: 195px"
                border/>
            </div>
          </el-col>
          <el-col :span="12">
            <el-row>
              <div class="avatar">
                <el-image
                  :src="photoLeft!==''?photoLeft:defaultPhoto"
                  fit="fill"
                  style="width: 280px; height: 195px"/>
              </div>
            </el-row>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :offset="6" :span="4">
            <span>右眼虹膜</span>
          </el-col>
          <el-col :offset="7" :span="4">
            <span>左眼虹膜</span>
          </el-col>
        </el-row>
        <el-row >
          <el-col :offset="5" :span="12" style="margin-top: 30px">
            <el-form-item prop="eyeType">
              <el-select :disabled="eyeTypeDisabled" v-model="irisForm.eyeType">
                <el-option key="3" label="双眼" value="3" />
                <el-option key="2" label="左眼" value="2"/>
                <el-option key="1" label="右眼" value="1"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-footer">
        <el-button :disabled="startBtnDisabeld" type="primary" @click="startCapture">开始采集</el-button>
        <el-button :disabled="stopBtnDisabeld" type="primary" @click="stopCapture">停止采集</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'CaptureIris',
  data() {
    return {
      isAddperson: '0',
      edited: false,
      ws: null,
      eyeTypeDisabled: false,
      startBtnDisabeld: true,
      stopBtnDisabeld: false,
      saveBtnDisabeld: true,
      name: '',
      dialogFormVisible: false, // 对话框是否显示
      photoLeft: '', // 图片路径
      photoRight: '',
      defaultPhoto: require('@/assets/global_images/eye.png'), // 默认图片路径
      irisForm: {
        eyeType: '3',
        personId: '',
        idCardNo: '',
        image_zy0: '',
        image_yy0: '',
        image_zy1: '',
        image_yy1: ''
      }, // 表单
      title: '' // 表头显示标题
    }
  },
  methods: {
    closeDialog() {
      this.photoRight = ''
      this.photoLeft = ''
      if (this.edited) {
        this.edited = false
        if (this.isAddPerson === '1') this.$parent.addSuccess()
        else this.$parent.fetchData(true)
      }
      this.ws.send('Close')
    },
    WebSocketConnent() {
      this.photoLeft = ''
      this.photoRight = ''
      var _this = this
      this.ws = _this.$root.ws
      this.eyeTypeDisabled = true
      this.startBtnDisabeld = true
      this.stopBtnDisabeld = false
      this.saveBtnDisabeld = true
      if (this.ws === null) {
        this.ws = new WebSocket(_this.$root.wsURL)
        // 注册各类回调
        this.ws.onopen = function() {
          _this.$message.success('采集设备启动中...')
          _this.ws.send('StartCapture' + _this.irisForm.eyeType)
        }
        this.ws.onclose = function() {
          _this.$message.info('与ICS连接断开')
          _this.$root.ws = null
        }
        this.ws.onerror = function() {
          _this.$message.error('与ICS通信发生错误')
        }
        _this.$root.ws = this.ws
      } else {
        this.ws.send('StartCapture' + this.irisForm.eyeType)
      }
      this.ws.onmessage = function(receiveMsg) {
        _this.startBtnDisabeld = false
        _this.stopBtnDisabeld = true
        _this.eyeTypeDisabled = false
        if (receiveMsg.data === '设备启动失败') {
          _this.$message.error(receiveMsg.data + '，请点击“开始采集”重试')
        } else if (receiveMsg.data === '采集失败') {
          _this.$message.error(receiveMsg.data)
        } else if (receiveMsg.data === 'ICS错误') {
          _this.$message.error(receiveMsg.data)
        } else if (receiveMsg.data.indexOf('image') > -1) {
          var data = receiveMsg.data.replace('image', '')
          _this.saveBtnDisabeld = false
          if (_this.irisForm.eyeType === '3') {
            _this.photoLeft = 'data:image/png;base64,' + data.split(';')[0]
            _this.photoRight = 'data:image/png;base64,' + data.split(';')[1]
          } else if (_this.irisForm.eyeType === '2') {
            _this.photoLeft = 'data:image/png;base64,' + data
          } else if (_this.irisForm.eyeType === '1') {
            _this.photoRight = 'data:image/png;base64,' + data
          }
        }
      }
    },
    // 初始化对话框
    initDialog: function(dialogFormVisible, row, isAddPerson) {
      this.title = '采集虹膜 - ' + row.name + ' - ' + row.idCardNo
      this.irisForm.personId = row.id
      this.irisForm.idCardNo = row.idCardNo
      this.dialogFormVisible = dialogFormVisible
      this.isAddPerson = isAddPerson
      this.WebSocketConnent()
    },
    startCapture() {
      this.WebSocketConnent()
    },
    stopCapture() {
      this.eyeTypeDisabled = false
      this.startBtnDisabeld = false
      this.stopBtnDisabeld = true
      this.saveBtnDisabeld = true
      this.ws.send('StopCapture')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $tableTitleHeight:46px;
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
  .table-title{
    background-color:rgba(243, 243, 243, 1);
    height: $tableTitleHeight;
    .title-header{
      line-height:$tableTitleHeight;
      color: #606266;
      font-size: 15px;
      i{
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }
  .edit_btns{
    .edit_btn{
      float:right;
      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
    }
  }
  .avatar {
    margin: 10px;
    display: block;
  }
  .dialog-footer{
    text-align: center;
    margin-top: 10px;
    margin-left: 30px;
    margin-bottom: 15px;
  }
  .customWidth{
    width: 80%;
  }
</style>