SEEC-II-FrontEnd/src/components/CheckList/index.vue

<template>
  <div>
    <card-judge-item
      v-for="item in value"
      :key="item.id"
      :success="item.level"
      :state="item.state"
    >
      <div>
        <b-checkbox
          class="checkbox-section"
          v-model="item.level"
          :type="item.state === 'SOLVING' ? 'is-primary' : 'is-success'"
          :disabled="judgeDisable(item)"
        >
          <b-tooltip :label="item.explain" position="is-top">
            {{ item.content }}
          </b-tooltip>
        </b-checkbox>
        <b-tooltip :label="`申诉备注 : ${item.remark}`" type="is-warning">
          <b-tag v-if="item.state === 'PENDING'" type="is-warning">
            学生申诉
          </b-tag>
          <b-tag v-if="item.state === 'SOLVING'" type="is-primary">
            处理申诉
          </b-tag>
        </b-tooltip>
      </div>

      <input
        v-model="item.comment"
        class="input-custom"
        :class="{
          'input-custom--success': item.level,
          'input-custom--danger': !item.level,
          'input-custom--primary': item.state === 'SOLVING',
          'input-custom--warning': item.state === 'PENDING',
          'input-custom--end': item.state === 'ARGUED'
        }"
        :disabled="judgeDisable(item)"
        type="text"
        placeholder="填写备注"
        style="box-shadow:none;border-color:white"
      />
      <div
        class="action-section--warning action-section "
        v-if="item.state === 'PENDING' && review.state === 'ARGUING'"
      >
        <span
          @click="acceptArgue(item)"
          :class="{ 'is-loading': acceptArgueLoading }"
          class="button is-warning"
          >接受申诉</span
        >
        <span
          @click="refuseArgue(item)"
          :class="{ 'is-loading': refuseArgueLoading }"
          class="button is-danger"
          >拒绝申诉</span
        >
      </div>
      <div
        class="action-section--primary action-section "
        v-if="item.state === 'SOLVING' && review.state === 'SOLVING'"
      >
        <span
          @click="submitSolution(item)"
          :class="{ 'is-loading': submitSolutionLoading }"
          class="button is-primary"
        >
          提交处理好的申诉
        </span>
      </div>
    </card-judge-item>
  </div>
</template>

<script>
import CardJudgeItem from "@/components/CardJudgeItem/index";
export default {
  name: "CheckListItem",
  components: { CardJudgeItem },
  props: {
    value: {
      type: Array,
      default: () => []
    },
    review: {
      type: Object,
      default: () => ({
        state: "DEFAULT"
      })
    },
    isTeacher: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      acceptArgueLoading: false,
      refuseArgueLoading: false,
      submitSolutionLoading: false
    };
  },
  watch: {
    value: {
      handler(newValue) {
        this.$emit("onchange", newValue);
      },
      deep: true
    }
  },
  methods: {
    judgeDisable(item) {
      if (this.isTeacher) {
        return false;
      }
      return (
        item.state === "PENDING" ||
        item.state === "ARGUED" ||
        this.review.state === "ARGUING"
      );
    },
    async acceptArgue(item) {
      this.acceptArgueLoading = true;
      await this.$emit("accept-argue", item);
      this.acceptArgueLoading = false;
    },
    async refuseArgue(item) {
      this.refuseArgueLoading = true;
      await this.$emit("refuse-argue", item);
      this.refuseArgueLoading = false;
    },
    async submitSolution(item) {
      this.submitSolutionLoading = true;
      await this.$emit("submit-solution", item);
      this.submitSolutionLoading = false;
    }
    // getColor(state) {}
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/app";
.checkbox-section {
  padding: $default-margin;
}

.argue-section {
  padding: $default-margin;
  background-color: $warning;
}

.action-section {
  .button {
    border-radius: 0;
  }

  &--warning {
    .button {
      width: 50%;
    }
  }

  &--primary {
    .button {
      width: 100%;
    }
  }
}

.input-custom {
  padding: $default-margin;
  width: 100%;
  border: 0;
  box-shadow: none;
  color: hsl(0, 0%, 21%);
  font-size: $size-normal;

  &--danger {
    background-color: #fff8fa;
  }

  &--success {
    background-color: #ebfff2;
  }

  &--primary {
    background-color: lighten($primary, 30%);
  }

  &--warning {
    background-color: lighten($warning, 30%);
  }

  &--end {
    background-color: lighten($grey, 50%);
  }

  &::placeholder {
    /*color: hsl(0, 0%, 96%);*/
  }
}
</style>