<template>
  <div class="scan-area home-main">
    <scan-area-steps
      :image-url="curImage.url"
      :cur-setting="curSetting"
      @on-finished="finished"
      v-if="curImage.url"
    ></scan-area-steps>
    <div class="waiting" v-else>
      <Icon class="ivu-load-loop" type="ios-loading" />
      <p>获取图片中，请稍后...</p>
    </div>
  </div>
</template>

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

export default {
  name: "scan-area",
  components: {
    ScanAreaSteps
  },
  data() {
    return {
      curImage: {
        url: "",
        name: ""
      },
      curSetting: {},
      config: {
        isPackageMode: true
      },
      setT: ""
    };
  },
  computed: {
    ...mapState("client", ["curSubject", "clientConfig"])
  },
  mounted() {
    this.curSetting = this.curSubject.collectConfig || {};
    this.getInitFile();
  },
  methods: {
    ...mapActions("client", ["updateCurSubject"]),
    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.updateCurSubject(curSubject);

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