<template>
  <div class="subject">
    <div class="login-home">
      <h1 class="login-title">科目选择</h1>
      <div class="subject-list">
        <ul>
          <li
            v-for="(item, index) in subjects"
            :key="index"
            @click="selectSubject(item)"
          >
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "subject",
  data() {
    return {
      subjects: []
    };
  },
  computed: {
    ...mapState("client", ["scanArea"])
  },
  mounted() {
    const user = this.$ls.get("user");
    if (user && user.subjects) {
      this.subjects = user.subjects;
    }
  },
  methods: {
    ...mapMutations("client", ["setCurSubject"]),
    selectSubject(subject) {
      const curSuject = this.scanArea[subject.id] || subject;
      this.$ls.set("curSuject", curSuject);
      this.setCurSubject(curSuject);

      this.$router.push({
        name: "GroupScan"
      });
      // this.$router.push({
      //   name: "Camera"
      // });
    }
  }
};
</script>
