<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 { mapMutations } from "vuex";

export default {
  name: "subject",
  data() {
    return {
      // subjects: this.$ls.get("subjects", [])
      subjects: [
        {
          id: 1,
          name: "素描"
        },
        {
          id: 2,
          name: "绘画"
        }
      ]
    };
  },
  computed: {
    scanArea() {
      return this.$store.state.scanArea;
    }
  },
  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: "Entrance"
      // });
      this.$router.push({
        name: "Camera"
      });
    }
  }
};
</script>
