<template>
  <div id="select-modal">
    <el-dialog
      title="选班重学"
      class="select-modal"
      :visible.sync="selectClassModal"
      width="800px"
    >
      <div>
        <el-radio
          v-for="(item, index) in gradeList"
          :key="index"
          class="radio"
          v-model="gradeValue"
          :disabled="
            item.studentNum > 0 && item.studentNum == item.studentUpper
          "
        >
          <div>
            {{ item.className }}
            <span v-if="item.classEndTime">
              有效期至：{{
                $tools.timestampToTime(item.classEndTime, true, true)
              }}</span
            >
            <span v-if="item.classEndTime"
              >本班还剩{{
                $tools.GetRTime(item.classEndTime)
              }}天将结束学习</span
            >
          </div>
          <div></div
        ></el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="selectClassOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "selectClassModal",
  computed: {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      selectClassModal: false,
      gradeList: [],
      gradeValue: -1,
      selectItem: {},
    };
  },
  mounted() {},
  methods: {
    showModal(item) {
      this.gradeValue = -1;
      this.selectItem = item;
      this.goodsGradeList(item.goodsId);
      this.selectClassModal = true;
    },
    selectClassOk() {
      if (this.gradeValue == -1) {
        this.$message({
          type: "success",
          message: "请选择班级",
        });
        return;
      }
      this.$request
        .changeGrade({
          goodsId: this.selectItem.goodsId,
          gradeId: this.gradeValue,
          oldGradeId: this.selectItem.gradeId,
          orderGoodsId: this.selectItem.orderGoodsId,
          userId: this.selectItem.userId,
        })
        .then((res) => {
          this.selectClassModal = false;
          this.$message({
            type: "success",
            message: "选班成功",
          });

          this.$emit("selectClassOk");
        })
        .catch((err) => {
          this.$message({
            type: "warning",
            message: err.msg,
          });
        });
    },
    goodsGradeList(id) {
      let self = this;
      this.$request
        .goodsGradeList({
          goodsId: id,
        })
        .then((res) => {
          self.gradeList = res.rows;
          if (self.gradeList.length == 0) {
            let item = {
              className: "系统分班",
              gradeId: 0,
            };
            self.gradeList.push(item);
          } else {
            let isGradeFull = self.gradeList.every(
              (item) =>
                item.studentNum > 0 && item.studentNum == item.studentUpper
            );
            //所有班级都满了
            if (isGradeFull) {
              let item = {
                className: "系统分班",
                gradeId: 0,
              };
              self.gradeList.unshift(item);
            }
          }
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.select-modal {
  .radio {
    cursor: pointer;
    margin-right: 24px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    margin-top: 2px;
    min-height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #f5f9ff;
    border-radius: 8px;
    box-sizing: border-box;

    &.right {
      background: #37c65b;
    }
    &.wrong {
      background: #ff3a30;
    }
  }
}
</style>
