<template>
  <div class="mark-action grade-action">
    <!-- 查询 -->
    <div class="action-search" v-if="rights.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-grade-change-search" v-if="rights.gradeChangeSearch">
      <Select v-model="filter.codeType" placeholder="类型" 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="gradeChangeSearch"
      ></Button>
    </div>
    <!-- 头部信息 ------ -->
    <!-- 试卷状态 -->
    <!-- 状态：已评，待评，改档，改档打分 -->
    <div class="action-paper-state" v-if="rights.paperState">
      <p class="paper-state-cont">{{ step.typeName }}</p>
    </div>
    <!-- 试卷信息 -->
    <div class="action-paper-info" v-if="rights.paperInfo">
      <p>{{ curPaper.examNumber }}</p>
      <p>No.{{ curPaper.sn }}</p>
    </div>
    <!-- 改档信息 -->
    <div class="action-grade-change" v-if="rights.gradeChange">
      <p>原档位：</p>
      <p>申请档位：</p>
    </div>
    <div class="action-grade-change-status" v-if="rights.gradeChange">
      <p>已同意</p>
    </div>
    <!-- 档位信息 -->
    <!-- 已评/待评（已评档位），改档打分（已评档位） -->
    <div class="action-grade-info" v-if="rights.gradeInfo">
      <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-mark-info" v-if="rights.markInfo">
      <p>{{ curPaper.score }}</p>
    </div>
    <!-- 选择分数 / 档位 -->
    <div class="action-grade-list action-mark-list" v-if="rights.gradeList">
      <div
        class="action-grade-list-item"
        v-for="(level, index) in levelList"
        :key="index"
      >
        <p>{{ level.name }}</p>
        <p>{{ level.range[0] }}~{{ level.range[1] }}</p>
      </div>
    </div>
    <div class="action-grade-pass" v-if="rights.gradeList">
      <Button type="primary" @click="toPass">跳过</Button>
    </div>
    <!-- 评卷记录 -->
    <div class="action-grade-history" v-if="rights.markHis">
      <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";
// 三种情况：
// 管理员(ADMIN)，科组长(MARK_LEADER)，评卷员(MARKER)
// 管理员：查询，头部信息，评卷记录
// 科组长：查询，头部信息，选择档位，评卷记录
// 评卷员：头部信息，选择分数
const initRights = {
  search: false,
  gradeChangeSearch: false,
  paperState: false,
  paperInfo: false,
  gradeChange: false,
  gradeInfo: false,
  markInfo: false,
  gradeList: false,
  markHis: false
};

export default {
  name: "mark-action",
  props: {
    paper: {
      type: Object,
      default() {
        return {};
      }
    },
    levels: {
      type: Array,
      default() {
        return [];
      }
    },
    userRole: {
      type: String,
      default: "MARKER"
    },
    step: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      rights: {
        ...initRights
      },
      roleRight: {
        ADMIN: {
          done: [
            "search",
            "gradeHis",
            "paperState",
            "paperInfo",
            "gradeInfo",
            "markInfo"
          ],
          editGrade: [
            "search",
            "gradeChangeSearch",
            "paperState",
            "paperInfo",
            "gradeChange"
          ]
        },
        MARK_LEADER: {
          done: [
            "search",
            "gradeList",
            "gradeHis",
            "paperState",
            "paperInfo",
            "gradeInfo",
            "markInfo"
          ],
          editGrade: [
            "search",
            "gradeList",
            "paperState",
            "paperInfo",
            "gradeChange"
          ]
        },
        MARKER: {
          done: [
            "gradeList",
            "paperState",
            "paperInfo",
            "gradeInfo",
            "markInfo"
          ],
          undo: ["gradeList", "paperState", "paperInfo", "gradeInfo"],
          editGrade: ["gradeList", "paperState", "paperInfo", "gradeChange"],
          editGradeMark: ["gradeList", "paperState", "paperInfo", "gradeInfo"]
        }
      },
      filter: {
        codeType: "examNumber",
        code: ""
      },
      CODE_TYPE,
      curPaper: {
        examNumber: "2020105133",
        sn: "2020105133"
      },
      levelList: [],
      gradingHistory: [],
      curLevel: {
        name: "A",
        range: [5, 20]
      },
      curMark: 95
    };
  },
  computed: {
    IS_ADMIN() {
      return this.userRole === "ADMIN";
    },
    IS_MARKER() {
      return this.userRole === "MARKER";
    },
    IS_MARK_LEADER() {
      return this.userRole === "MARK_LEADER";
    }
  },
  watch: {
    paper(val) {
      this.rebuildRight();
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.gradingHistory = "ABCDEFGHIJK".split("").map((item, index) => {
        return {
          id: index,
          name: "张珊",
          value: item
        };
      });
    },
    rebuildRight() {
      this.rights = { ...initRights };
      const rights = this.roleRight[this.userRole][this.step.type] || [];
      rights.map(key => {
        this.rights[key] = true;
      });

      this.updateCurLevel();
      this.updateLevelList();
    },
    updateCurLevel() {
      if (!this.paper.level) return;
      const paperLevel = this.levels.find(
        level => level.name === this.paper.level
      );
      this.curLevel = {
        name: paperLevel.name,
        range: paperLevel.range
      };
    },
    updateLevelList() {
      if (!this.curLevel.range) return;
      let levelList = [];
      let [start, end] = this.curLevel.range;
      for (let i = start; i <= end; i++) {
        levelList.push({ name: i });
      }
      this.levelList = levelList;
    },
    search() {
      this.$emit("code-search", this.filter);
    },
    toPass() {
      this.$emit("on-pass");
    },
    gradeChangeSearch() {
      this.$emit("grade-change-search", this.filter);
    }
  }
};
</script>
