<template>
  <div class="home">
    <div class="home-header">
      <div class="head-back">
        <i-button type="default" @click="goback"
          ><i class="icon icon-left"></i>返回</i-button
        >
      </div>
      <div class="head-user">
        <span class="user-name"
          ><Icon type="md-person" size="16" /> {{ username }}</span
        >
        <span class="user-logout" @click="logout">
          <Icon type="md-power" size="20" />
        </span>
      </div>
      <div class="head-info">
        <span>{{ examName }}</span>
        <span>{{ curSubject.name }}</span>
      </div>
    </div>
    <div class="home-body">
      <router-view />
    </div>

    <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>
</template>

<script>
import uploadTaskMixin from "../mixins/uploadTaskMixin";
import { mapState } from "vuex";

export default {
  name: "home",
  mixins: [uploadTaskMixin],
  data() {
    return {
      showProgress: false,
      examName: ""
    };
  },
  computed: {
    ...mapState("client", ["curSubject", "scanNo", "uploadNo"]),
    curProgress() {
      return !this.scanNo ? 0 : Math.ceil((this.uploadNo * 100) / this.scanNo);
    },
    username() {
      return this.$store.state.user.name;
    }
  },
  created() {
    this.examName = this.$ls.get("user", { examName: "" }).examName;
  },
  methods: {
    logout() {
      this.$ls.clear();
      this.$router.push({ name: "Login" });
    }
  },
  beforeDestroy() {
    this.stopUpload();
  }
};
</script>
