<template>
  <div class="home">
    <router-view />

    <div class="home-progress" v-if="showProgress">
      <div class="progress-item progress-name">
        <span>今日上传进度：</span>
      </div>
      <div class="progress-item progress-info">
        <span>已采集：{{ scanNo }}</span>
        <span>/</span>
        <span>已上传：{{ uploadNo }}</span>
      </div>
      <div class="progress-item progress-main">
        <i-progress
          :percent="curProgress"
          :stroke-width="10"
          status="active"
          text-inside
        ></i-progress>
      </div>
    </div>

    <div
      class="home-logout"
      style="position: fixed;bottom: 40px;right: 20px;z-index: 1000;;height:30px;width:30px;font-size:20px;;background: #fff;color:#333;text-align: center;line-height: 30px;cursor: pointer;"
      @click="$router.push('Login')"
    >
      <Icon type="md-log-out" />
    </div>
  </div>
</template>

<script>
import authUnvalidMixin from "../mixins/authUnvalidMixin";
import initStoreMixin from "../mixins/initStoreMixin";
import uploadTaskMixin from "../mixins/uploadTaskMixin";

export default {
  name: "home",
  mixins: [authUnvalidMixin, initStoreMixin, uploadTaskMixin],
  data() {
    return {
      showProgress: false
    };
  },
  computed: {
    scanNo() {
      return this.$store.state.scanNo;
    },
    uploadNo() {
      return this.$store.state.uploadNo;
    },
    curProgress() {
      return !this.scanNo ? 0 : Math.ceil((this.uploadNo * 100) / this.scanNo);
    }
  },
  created() {
    // TODO:遵循file-upload项目的逻辑
    // 探索多线程编程
    // this.initStore();
    // this.initUploadProgress();
  },
  methods: {},
  beforeDestroy() {
    this.stopUpload();
  }
};
</script>
