<template>
  <div class="grading-level-set">
    <div class="part-box-top">
      <Button type="success" icon="md-add" @click="toAdd">新增</Button>
    </div>
    <div class="part-box">
      <table class="table">
        <tr>
          <th>档位</th>
          <th>最低分</th>
          <th>最高分</th>
          <th>给分间隔</th>
          <th>典型值</th>
          <th>类型</th>
          <th>给分项</th>
          <th>考点阀值%</th>
          <th>占比阀值%</th>
          <th>操作</th>
        </tr>
        <tr v-for="(level, index) in levels" :key="index">
          <td>
            <Input
              v-model="level.code"
              style="width: 60px"
              @on-blur="codeChange"
            ></Input>
          </td>
          <td>
            <InputNumber
              v-model="level.minScore"
              :min="0"
              :max="200"
            ></InputNumber>
          </td>
          <td>
            <InputNumber
              v-model="level.maxScore"
              :min="level.minScore + 1"
              :max="200"
            ></InputNumber>
          </td>
          <td style="min-width: 100px">
            <InputNumber
              v-model="level.intervalScore"
              :min="1"
              :max="100"
              v-if="level.levelType === 'ADMITED'"
            ></InputNumber>
          </td>
          <td>
            <InputNumber
              v-model="level.weight"
              :min="1"
              :max="100"
            ></InputNumber>
          </td>
          <td>
            <Select
              v-model="level.levelType"
              @on-change="levelTypeChange(level)"
              style="width: 120px"
            >
              <Option
                v-for="(val, key) in LEVEL_TYPE"
                :key="key"
                :value="key"
                >{{ val }}</Option
              >
            </Select>
          </td>
          <td style="min-width: 140px">
            <Input
              v-model="level.scoreList"
              v-if="level.levelType === 'UNADMIT'"
            ></Input>
          </td>
          <td>
            <Input v-model="level.kdpt" :min="1" :max="100"></Input>
          </td>
          <td>
            <Input v-model="level.pt" :min="1" :max="100"></Input>
          </td>
          <td>
            <Button size="small" type="error" @click="toDelete(index)"
              >删除</Button
            >
          </td>
        </tr>
      </table>

      <div class="text-center">
        <Button type="primary" @click="toSubmit" :disabled="isSubmit"
          >确定</Button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { levelList, uploadLevel } from "@/api";
import { LEVEL_TYPE } from "@/constants/enumerate";

const initLevel = {
  id: null,
  workId: null,
  code: null,
  levelValue: 0,
  maxScore: null,
  minScore: null,
  intervalScore: null,
  weight: null,
  levelType: "ADMITED",
  scoreList: null,
  pt: null,
  kdpt: null
};

export default {
  name: "grading-level-set",
  data() {
    return {
      LEVEL_TYPE,
      workId: this.$route.params.workId,
      letterRelateNumber: {},
      levels: [],
      worKDetail: {},
      isSubmit: false
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      letters.split("").map((item, index) => {
        this.letterRelateNumber[item] = index + 1;
      });

      this.getList();
    },
    async getList() {
      const data = await levelList(this.workId);
      this.worKDetail = data;
      this.levels = data.levels;
    },
    checkLevelCodeIsContinuous() {
      let levelIsContinuous = true;
      for (var i = 0, num = this.levels.length; i < num; i++) {
        if (i > 0) {
          const beforeCodeNum = this.letterRelateNumber[
            this.levels[i - 1].code
          ];
          const curCodeNum = this.letterRelateNumber[this.levels[i].code];
          levelIsContinuous =
            levelIsContinuous && curCodeNum - beforeCodeNum === 1;

          if (!levelIsContinuous) {
            return false;
          }
        }
      }

      return true;
    },
    levelTypeChange(level) {
      if (level.levelType === "ADMITED") {
        level.scoreList = null;
      } else {
        level.intervalScore = null;
      }
    },
    codeChange() {
      this.levels.sort((a, b) => {
        if (
          !a.code ||
          !b.code ||
          !this.letterRelateNumber[a.code] ||
          !this.letterRelateNumber[b.code]
        )
          return 0;

        return (
          this.letterRelateNumber[a.code] - this.letterRelateNumber[b.code]
        );
      });
    },
    getNextLevelCode() {
      const codeNumbers = this.levels.map(
        level => this.letterRelateNumber[level.code] || 0
      );
      const maxCodeNumber = Math.max.apply(null, codeNumbers);
      const nextLevel = Object.entries(this.letterRelateNumber).find(
        ([key, val]) => {
          return maxCodeNumber < val;
        }
      );
      return nextLevel ? nextLevel[0] : "";
    },
    toAdd() {
      let level = { ...initLevel };
      level.workId = this.workId;
      level.code = this.getNextLevelCode();
      this.levels.push(level);
    },
    toDelete(index) {
      this.levels.splice(index, 1);
    },
    async toSubmit() {
      if (!this.checkLevelCodeIsContinuous()) {
        this.$Message.error("请保持档位连续！");
        return;
      }

      if (this.isSubmit) return;
      this.isSubmit = true;
      const data = await uploadLevel(this.worKDetail).catch(() => {
        this.isSubmit = false;
      });

      if (!data) return;

      this.isSubmit = false;
      this.$Message.success("保存成功！");
    }
  }
};
</script>
