<template>
  <div class="mark-action grade-action">
    <div class="action-search">
      <Input v-model.trim="filter.code" placeholder="请输入号码">
        <Select
          v-model="filter.codeType"
          placeholder="类型"
          slot="prepend"
          style="width: 100px"
        >
          <Option
            v-for="(val, key) in CODE_TYPE"
            :key="key"
            :value="key"
            :label="val"
          ></Option>
        </Select>
        <Button icon="ios-search" slot="append" @click="search"></Button>
      </Input>
    </div>

    <div class="action-paper-info">
      <p>{{ curPaper.examNumber }}</p>
      <p>No.{{ curPaper.sn }}</p>
    </div>

    <p class="mark-info">{{ curMark }}</p>

    <div class="action-grade-info">
      <h3 class="grade-info-name">{{ curLevel.name }}</h3>
      <p class="grade-info-range">
        <span>{{ curLevel.range[0] }}</span>
        <span>~</span>
        <span>{{ curLevel.range[1] }}</span>
      </p>
    </div>
    <div class="action-grade-list action-mark-list">
      <div
        class="action-grade-list-item"
        v-for="(level, index) in levels"
        :key="index"
      >
        <p>{{ level }}</p>
      </div>
    </div>

    <div class="action-grade-history">
      <h3>评卷记录</h3>
      <div class="action-grade-list grade-history-list">
        <div
          class="action-grade-list-item"
          v-for="(his, hindex) in gradingHistory"
          :key="hindex"
        >
          <p>{{ his.name }}</p>
          <p>{{ his.value }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { CODE_TYPE } from "@/constants/enumerate";

export default {
  name: "mark-action",
  props: {
    paper: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      filter: {
        codeType: "examNumber",
        code: ""
      },
      CODE_TYPE,
      curPaper: {
        examNumber: "2020105133",
        sn: "2020105133"
      },
      gradingHistory: [],
      levels: [],
      curLevel: {
        name: "A",
        range: [5, 20]
      },
      curMark: 95
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      let levels = [];
      let [start, end] = this.curLevel.range;
      for (let i = start; i <= end; i++) {
        levels.push(i);
      }
      this.levels = levels;
      this.gradingHistory = "ABCDEFGHIJK".split("").map((item, index) => {
        return {
          id: index,
          name: "张珊",
          value: item
        };
      });
    },
    search() {
      this.$emit("code-search", this.filter);
    }
  }
};
</script>
