<template>
  <div id="collect">
    <el-row type="flex" justify="space-around" style="text-align: center">
      <template v-if="!isWork">
        <el-col :span="6">
          <el-button type="primary" @click="toStart('start')">开始采集</el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="toStart('force')">强制采集</el-button>
        </el-col>
      </template>
      <el-col :span="6" v-else>
        <el-button type="primary" @click="toStopCapture()">停止采集</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="toClose()">关闭设备</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="toSave()" :disabled="(!left && !right) || imgs.length <= 0">保存虹膜信息</el-button>
      </el-col>
    </el-row>

    <el-row type="flex" justify="space-around" :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card>
          <template #header>
            <el-row type="flex" justify="space-around" style="text-align: center; font-size: 24px">
              <el-col :span="6">左眼</el-col>
            </el-row>
          </template>
          <div style="text-align: center">
            <el-empty v-if="!left" description="无虹膜采集结果"></el-empty>
            <el-image v-else :src="left" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <el-row type="flex" justify="space-around" style="text-align: center; font-size: 24px">
              <el-col :span="6">右眼</el-col>
            </el-row>
          </template>
          <div style="text-align: center">
            <el-empty v-if="!right" description="无虹膜采集结果"></el-empty>
            <el-image v-else :src="right" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';
const _ = require('lodash');
export default {
  name: 'collect',
  props: {
    irisData: { type: Array },
  },
  components: {},
  data: function () {
    return {
      // 正在采集状态
      isWork: false,
      // 左眼信息
      left: undefined,
      // 右眼信息
      right: undefined,
      imgs: [],
    };
  },
  created() {},
  methods: {
    // 保存虹膜信息
    toSave() {
      if ((this.left || this.right) && this.imgs.length <= 0) {
        this.$message.warning('未重新采集虹膜，无需上传');
        return;
      }
      this.$emit('save', this.imgs);
    },
    // 开启设备
    async toStart(type) {
      this.toClear();
      await this.toClose();
      const obj = {
        operation: 'connect',
        state: 'req',
        devicemode: 0,
      };
      const ax = axios.create({ baseURL: 'http://127.0.0.1:13211/' });
      let res = await ax.post('bio/microserver/connect', obj);
      res = _.get(res, 'data', {});
      if (res.code !== 0) {
        this.$message.error('设备开启失败');
      }
      this.isWork = true;
      // 正常采集
      if (type !== 'force') this.toCapture();
      // 强制采集
      else this.toForceCapture();
    },
    // 关闭设备
    async toClose() {
      const obj = {
        operation: 'disconnect',
        state: 'req',
      };
      const ax = axios.create({ baseURL: 'http://127.0.0.1:13211/' });
      let res = await ax.post('bio/microserver/connect', obj);
      res = _.get(res, 'data', {});
      if (res.code !== 0) {
        this.$message.error('设备关闭失败');
      }
      this.isWork = false;
    },
    // 开始采集
    async toCapture() {
      const obj = {
        operation: 'capture',
        state: 'req',
        mode: 0,
        irismode: 3,
        timeout: 20,
      };
      const ax = axios.create({ baseURL: 'http://127.0.0.1:13211/' });
      let res = await ax.post('bio/microserver/capture', obj);
      res = _.get(res, 'data', {});
      if (res.code !== 0) {
        this.$message.error(res.message || '采集失败');
        return;
      }
      const imgs = this.dealImage(res);
      if (_.isArray(imgs) && imgs.length > 0) {
        for (const i of imgs) {
          const { code, sizeCode } = i;
          if (sizeCode === 1) this.$set(this, 'left', code);
          else this.$set(this, 'right', code);
        }
      }
      this.$set(this, 'imgs', imgs);
      this.isWork = false;
      this.toClose();
    },
    // 强制采集
    async toForceCapture() {
      const obj = {
        operation: 'forcecapture',
        state: 'req',
        delaytime: 3,
      };
      const ax = axios.create({ baseURL: 'http://127.0.0.1:13211/' });
      let res = await ax.post('bio/microserver/forcecapture', obj);
      res = _.get(res, 'data', {});
      if (res.code !== 0) {
        this.$message.error('采集失败');
        return;
      }
      const imgs = this.dealImage(res);
      if (_.isArray(imgs) && imgs.length > 0) {
        for (const i of imgs) {
          const { code, sizeCode } = i;
          if (sizeCode === 1) this.$set(this, 'left', code);
          else this.$set(this, 'right', code);
        }
      }
      this.$set(this, 'imgs', imgs);
      this.isWork = false;
      this.toClose();
    },
    // 处理结果;强制/正常采集都这么处理
    dealImage(result) {
      let imgs = _.get(result, 'CapIrisImage');
      if (imgs.length <= 0) {
        this.$message.error('未采集到虹膜信息');
        return;
      }
      imgs = imgs.filter((i) => i.Image.image_format === 3);
      imgs = imgs.map((i) => ({ code: this.toBase64(i.Image.image_buf), size: i.eye_flag === 1 ? '左眼' : '右眼', sizeCode: i.eye_flag }));
      return imgs;
    },
    // 停止采集
    async toStopCapture() {
      const obj = {
        operation: 'stop_capture',
        state: 'req',
      };
      const ax = axios.create({ baseURL: 'http://127.0.0.1:13211/' });
      let res = await ax.post('bio/microserver/capture', obj);
      res = _.get(res, 'data', {});
      if (res.code === 0) {
        this.$message.success('采集已停止');
        this.isWork = false;
      }
    },
    // 转换成base64码,能看的那种
    toBase64(code) {
      if (code) {
        const suffix = 'jpge';
        const base64 = `data:image/${suffix};base64,${code}`;
        return base64;
      }
    },
    toClear() {
      this.left = undefined;
      this.right = undefined;
      this.imgs = [];
    },
  },
  watch: {
    irisData: {
      immediate: true,
      deep: true,
      handler(val) {
        if (_.isArray(val) && val.length > 0) {
          for (const i of val) {
            const { type, data } = i;
            if (type.includes('左眼')) this.$set(this, 'left', data);
            else this.$set(this, 'right', data);
          }
        }
      },
    },
  },
};
</script>

<style lang="less" scoped></style>
