<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" append-to-body @close="closeDialog">
      <el-form ref="dataForm" :model="irisForm" label-well-code="right" label-width="0px" style="margin-top: 20px">
        <el-row type="flex" justify="center">
          <el-col :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 :span="12" style="text-align: center">
            <span>右眼虹膜，评分：{{ scoreRight }}</span>
          </el-col>
          <el-col :span="12" style="text-align: center">
            <span>左眼虹膜，评分：{{ scoreLeft }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="8" :span="8" 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>
        <el-button :disabled="saveBtnDisabeld" type="primary" @click="save">保存</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: '',
      scoreLeft: '0',
      scoreRight: '0',
      defaultPhoto: require('@/assets/global_images/eye.png'), // 默认图片路径
      irisForm: {
        eyeType: '3',
        personId: '',
        idCard: '',
        image_zy: '',
        image_yy: '',
        score_zy: '0',
        score_yy: '0'
      }, // 表单
      title: '' // 表头显示标题
    }
  },
  methods: {
    closeDialog() {
      this.photoRight = ''
      this.photoLeft = ''
      this.ws.send('Close')
    },
    WebSocketConnent() {
      this.photoLeft = ''
      this.photoRight = ''
      this.scoreLeft = '0'
      this.scoreRight = '0'
      const that = this
      this.ws = that.$root.ws
      this.eyeTypeDisabled = true
      this.startBtnDisabeld = true
      this.stopBtnDisabeld = false
      this.saveBtnDisabeld = true
      if (this.ws === null) {
        this.ws = new WebSocket(that.$root.wsURL)
        // 注册各类回调
        this.ws.onopen = function() {
          that.$message.success('采集设备启动中...')
          that.ws.send('StartCapture' + that.irisForm.eyeType)
        }
        this.ws.onclose = function() {
          that.$message.info('与ICS连接断开')
          that.$root.ws = null
        }
        this.ws.onerror = function() {
          that.$message.error('与ICS通信发生错误')
        }
        that.$root.ws = this.ws
      } else {
        this.ws.send('StartCapture' + this.irisForm.eyeType)
      }
      this.ws.onmessage = function(receiveMsg) {
        console.log(receiveMsg)

        that.startBtnDisabeld = false
        that.stopBtnDisabeld = true
        that.eyeTypeDisabled = false
        if (receiveMsg.data === '设备启动失败') {
          that.$message.error(receiveMsg.data + '，请点击“开始采集”重试')
        } else if (receiveMsg.data === '采集失败') {
          that.$message.error(receiveMsg.data)
        } else if (receiveMsg.data === 'ICS错误') {
          that.$message.error(receiveMsg.data)
        } else if (receiveMsg.data.indexOf('image') > -1) {
          const imageData = receiveMsg.data.split(':')[0].replace('image', '')
          const scoreData = receiveMsg.data.split(':')[1]

          that.saveBtnDisabeld = false
          debugger
          if (that.irisForm.eyeType === '3') {
            that.photoLeft = 'data:image/png;base64,' + imageData.split(';')[0]
            that.photoRight = 'data:image/png;base64,' + imageData.split(';')[1]
            that.scoreLeft = parseFloat(scoreData.split(';')[0]).toFixed(2)
            that.scoreRight = parseFloat(scoreData.split(';')[1]).toFixed(2)
          } else if (that.irisForm.eyeType === '2') {
            that.photoLeft = 'data:image/png;base64,' + imageData
            that.scoreLeft = parseFloat(scoreData).toFixed(2)
          } else if (that.irisForm.eyeType === '1') {
            that.photoRight = 'data:image/png;base64,' + imageData
            that.scoreRight = parseFloat(scoreData).toFixed(2)
          }
        }
      }
    },
    // 初始化对话框
    initDialog: function(dialogFormVisible, data, isAddPerson) {
      this.isAddperson = isAddPerson
      this.title = '采集虹膜 - ' + data.name + ' - ' + data.idCard
      this.irisForm.idCard = data.idCard
      this.dialogFormVisible = dialogFormVisible
      this.WebSocketConnent()
    },
    startCapture() {
      this.WebSocketConnent()
    },
    stopCapture() {
      this.eyeTypeDisabled = false
      this.startBtnDisabeld = false
      this.stopBtnDisabeld = true
      this.saveBtnDisabeld = true
      this.ws.send('StopCapture')
    },
    save() {
      if (this.photoLeft !== '') {
        this.irisForm.image_zy = this.photoLeft
      } else {
        this.irisForm.image_zy = this.photoRight
      }
      if (this.photoRight !== '') {
        this.irisForm.image_yy = this.photoRight
      } else {
        this.irisForm.image_yy = this.photoLeft
      }

      // 将虹膜照片数据发送到父组件
      this.$parent.personForm.irisData.leftImage = this.photoLeft
      this.$parent.personForm.irisData.rightImage = this.photoRight
      this.$parent.personForm.irisData.leftIrisScore = this.scoreLeft
      this.$parent.personForm.irisData.rightIrisScore = this.scoreRight

      // 编辑人员时，通知编辑页面人员虹膜已经重采
      if (this.isAddperson === '0') {
        this.$parent.reCaptureIris = '1'
      }

      this.$message.success('采集成功')
      this.edited = true
      this.dialogFormVisible = false
      this.closeDialog()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $tableTitleHeight:46px;
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
  .table-title{
    background-color:rgba(76, 142, 226, 1);
    height: $tableTitleHeight;
    .title-header{
      line-height:$tableTitleHeight;
      color: white;
      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;
    text-align: center;
  }
  .dialog-footer{
    text-align: center;
    margin-top: 10px;
    /*margin-left: 30px;*/
    margin-bottom: 15px;
  }
  .customWidth{
    width: 80%;
  }
</style>