<template>
  <div class="scan-area">
    <div class="home-header">
      <div class="head-logo">
        <h1>试卷采集区域设置</h1>
      </div>
      <div class="head-back">
        <i-button type="default" @click="goback"
          ><i class="icon icon-left"></i>返回</i-button
        >
      </div>
    </div>
    <div class="home-body">
      <div class="home-main">
        <scan-area-steps
          :image-url="curImage.url"
          :cur-setting="curSetting"
          @on-finished="finished"
          v-if="curImage.url"
        ></scan-area-steps>
      </div>
    </div>
  </div>
</template>

<script>
import ScanAreaSteps from "../components/ScanAreaSteps";
import { getEarliestFile } from "../../../plugins/imageOcr";
import { mapActions } from "vuex";

export default {
  name: "scan-area",
  components: {
    ScanAreaSteps
  },
  data() {
    return {
      curImage: {
        url: "",
        name: ""
      },
      curSetting: {},
      config: {
        isPackageMode: true
      },
      setT: ""
    };
  },
  computed: {
    curSubject() {
      return this.$store.state.curSubject;
    }
  },
  created() {
    this.curSetting = this.curSubject.collectConfig || {};
    this.getInitFile();
  },
  methods: {
    ...mapActions("client", ["setCurSubject"]),
    getInitFile() {
      this.curImage = getEarliestFile();
      if (this.curImage.url) {
        if (this.setT) clearTimeout(this.setT);
      } else {
        this.setT = setTimeout(() => {
          this.getInitFile();
        }, 1000);
      }
    },
    finished(setting) {
      console.log(setting);
      const curSubject = Object.assign({}, this.curSubject, {
        collectConfig: setting
      });
      this.setCurSubject(curSubject);

      const scanName = this.config.isPackageMode ? "GroupScan" : "LineScan";
      this.$router.push({ name: scanName });
    }
  },
  beforeDestroy() {
    if (this.setT) clearTimeout(this.setT);
  }
};
</script>
