<template>
  <div class="subject part-box">
    <div class="part-head">
      <h2>选择科目</h2>
    </div>
    <div class="subject-list">
      <ul>
        <li
          v-for="(item, index) in subjects"
          :key="index"
          @click="selectSubject(item)"
        >
          <span class="subject-name">{{ item.name }}</span>
          <span class="subject-icon"></span>
        </li>
      </ul>
    </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: "Camera"
      });
    }
  }
};
</script>
