<template>
  <modal  :show.sync="show" v-ref:modal backdrop="false">
    <header slot="modal-header" class="modal-header">
      <button type="button" class="close" @click="show = !show"><span class="glyphicon glyphicon-remove"></span></button>
      <h4 class="modal-title" style="text-align: center">高拍仪</h4>
    </header>
    <article slot="modal-body" class="modal-body form-horizontal">
      <div class="form-group" v-if="isusetype">
        <label class="col-sm-2 control-label">文件类型：</label>
        <div class="col-sm-10">
          <input-select
            class="select select_list"
            :value.sync="fusetype"
            v-model="fusetype"
            :options="$appdata.getParam('使用类型')"
            :valueSingle="true"></input-select>
        </div>
      </div>
      <div class="form-group" v-if="isremark">
        <label class="col-sm-2 control-label">文件说明：</label>
        <div class="col-sm-10">
          <input class="form-control input_view" style=""
                 v-model="fremarks"
                 :value="fremarks"/>
        </div>
      </div>
      <div class="form-group">
        <img id="cam" :src="cameraurl" style="height: 100%;width: 100%">
      </div>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-primary" @click="photo()">确认</button>
    </footer>
  </modal>
</template>

<script>
export default {
  title: '高拍仪',
  data () {
    return {
      cameraurl: null,
      fusetype: null,
      fremarks: null
    }
  },
  props: ['show', 'isusetype', 'isremark'],
  methods: {
    // 打开视频
    cam_switch (capID) {
      if (capID === 1) {
        this.cameraurl = 'http://127.0.0.1:38088/video=stream&camidx=0'
      }
      if (capID === 2) {
        this.cameraurl = 'http://127.0.0.1:38088/video=stream&camidx=1'
      }
    },
    async photo () {
      let camidx = 0
      if (this.cameraurl === 'http://127.0.0.1:38088/video=stream&camidx=0') {
        camidx = 0
      } else if (this.cameraurl === 'http://127.0.0.1:38088/video=stream&camidx=1') {
        camidx = 1
      } else {
        this.$showMessage('请先打开视频')
        return
      }
      let param = {
        camidx: camidx
      }
      let res = await this.$resetpost(
        'http://127.0.0.1:38088/video=grabimage',
        param,
        {warnMsg: null, resolveMsg: null}
      )
      if (res.data.code != '0') {
        this.$showMessage(res.data.message)
        return
      }
      this.$dispatch('photo-finish', res.data.photoBase64, this.fusetype, this.fremarks)
    }
  },
  ready () {
    this.cameraurl = 'http://127.0.0.1:38088/video=stream&camidx=0'
  }
}
</script>

<style scoped>
.modal-bk{
  border-radius:18px 0;
}
.header{
  background-color: #d8e9f3;
  height: 88px;
}
.title{
  position: absolute;
  font-family:PingFang-SC-Bold;
  font-size:36px;
  color: #666666;
  margin-top: 32px;
  margin-left: 300px;
  margin-bottom: 0px;
}
.operation{
  font-family:PingFang-SC-Medium;
  font-size: 22px;
  color:#666666;
  line-height: 5px;
}
.operation-group{
  margin-left: 36px;
  margin-top: 20px;
}
.photo{
  font-family: PingFang-SC-Medium;
  font-size: 20px;
  color: #ffffff;
  margin-left: 20px;
  border-radius: 4px;
  background-color: #2fadf5;
  height: 32px;
  width: 92px;
  line-height:12px;
}
.readIDCard{
  font-family: PingFang-SC-Medium;
  font-size: 20px;
  color: #ffffff;
  border-radius: 4px;
  background-color: #2fadf5;
  margin-left: 20px;
  width: 120px;
  height: 32px;
  line-height: 12px;
}
.stop{
  border-radius: 4px;
  border: 1px solid #2fadf5;
  font-family: PingFang-SC-Medium;
  font-size: 20px;
  color: #2fadf5;
  width: 120px;
  height: 32px;
  line-height: 12px;
}
.showInfo{
  float: left;
  width: 640px;
  display: inline-block;
  margin-top: 20px;
  margin-left: 36px;
}
#Console{
  margin-left: 18px;
  border-radius: 4px;
  border: 1px solid #b5b5b5;
  height:300px;
  width:322px;
  resize:none;
  background-color: #f6f6f6;
}
.img{
  height:300px;
  width:300px;
  float: left;
  border-radius: 4px;
  border: 1px solid #b5b5b5;
}
#cam{
  border-radius: 4px;
  border:1px solid #b5b5b5;
  display: inline-block
}
.IdCard{
  height: 950px;
  width: 692px;
  display: inline-block;
  border-radius: 20px;
  background-color: #fafafa;
  border: 1px solid #d8f1ff;
  margin-left: 40px;
  margin-top: 20px;
}
.IdInput{
  border-radius: 4px;
  border: 1px solid #939393;
  width: 400px;
  height: 38px;
  margin-left: 20px;
}
.IdInputDiv{
  margin-top: 20px;
  margin-left: 100px;
}
.IdHint{
  font-family: PingFang-SC-Medium;
  font-size: 18px;
  color: #7e7c81;
}
#PhotoBuffer,#PhotoDisplay{
  border-radius: 4px;
  background-color: #ffffff;
  border: 1px solid #939393;
  margin-left: 20px;
}
</style>
