msyj-admin-org/src/modules/grading/marker/MarkerImageView.vue

<template>
  <div class="marker-image-view">
    <image-view-contain
      ref="ImageViewContain"
      :image="image"
      @to-review="toReview"
    ></image-view-contain>
    <div class="image-view-footer">
      <slot>
        <div v-if="IS_LEVEL" class="image-info">
          <div v-if="image.level" class="image-level">{{ image.level }}</div>
          <div v-if="image.sample" class="image-sample">标</div>
          <div
            v-else
            :class="[
              'image-checkbox',
              {
                'image-selected': image.selected
              }
            ]"
            @click="toSelect"
          >
            <Icon v-if="image.selected" type="md-checkmark" />
          </div>
        </div>
        <div v-else class="image-info">
          <div v-if="image.level" class="image-level">{{ image.level }}</div>
          <div v-if="image.score" class="image-level">{{ image.score }}</div>
        </div>
        <div
          v-if="IS_LEVEL"
          class="image-title"
          :title="image.title"
          @click="toSelect"
        >
          {{ image.title }}
        </div>
        <div class="image-action">
          <div class="image-action-li" @click="toMark">
            <Icon :class="{ 'mark-act': image.mark }" type="md-bookmark" />
          </div>
          <div class="image-action-li" @click="toRotate">
            <Icon type="md-refresh-circle" />
          </div>
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
import ImageViewContain from "@/components/ImageViewContain";
import { markTask } from "@/api";

export default {
  name: "marker-image-view",
  components: { ImageViewContain },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    },
    stage: {
      type: String,
      default: "LEVEL"
    },
    canSelect: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    IS_LEVEL() {
      return this.stage === "LEVEL";
    }
  },
  created() {
    this.initData();
  },
  watch: {
    "data.selected": {
      handler() {
        this.initData();
      }
    }
  },
  data() {
    return {
      initImage: {
        id: "",
        thumbSrc: "",
        title: "",
        level: "",
        score: "",
        deg: 0,
        mark: false,
        sample: false,
        selected: false
      },
      loading: false,
      image: {}
    };
  },
  methods: {
    initData() {
      this.image = this.$objAssign(this.initImage, this.data);
    },
    toReview() {
      this.$emit("to-review", this.data);
    },
    toRotate() {
      const image = this.image;
      image.deg += 90;
      if (image.deg === 360) image.deg = 0;

      this.$refs.ImageViewContain.resizeImage(image.deg);
    },
    async toMark() {
      if (this.loading) return;
      this.loading = true;
      const res = await markTask({
        markTaskId: this.image.id,
        isMark: !this.image.mark
      }).catch(() => {});
      this.loading = false;
      if (!res) return;
      this.image.mark = !this.image.mark;
    },
    toSelect() {
      if (this.image.sample || !this.IS_LEVEL) return;
      this.image.selected = !this.image.selected;
      this.$emit("to-select", this.image);
    },
    changeSelect(selected) {
      if (this.image.sample) return;
      this.image.selected = selected;
      this.$emit("to-select", this.image);
    }
  }
};
</script>