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 class="image-info">
          <div v-if="image.level" class="image-level">{{ image.level }}</div>
          <div
            :class="['image-checkbox', { 'image-checked': image.checked }]"
            @click="toCheck"
          >
            <Icon v-if="image.checked" type="md-checkmark" />
          </div>
          <div class="image-title" @click="toCheck">{{ image.title }}</div>
        </div>
        <div class="image-rotate" @click="toRotate">
          <Icon type="md-refresh-circle" />
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
import ImageViewContain from "@/components/ImageViewContain";

export default {
  name: "marker-image-view",
  components: { ImageViewContain },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  created() {
    this.image = this.$objAssign(this.initImage, this.data);
  },
  data() {
    return {
      initImage: {
        id: "",
        thumbSrc: "",
        title: "",
        level: "",
        deg: 0,
        checked: false
      },
      image: {}
    };
  },
  methods: {
    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);
    },
    toCheck() {
      this.image.checked = !this.image.checked;
      this.$emit("to-check", this.image);
    }
  }
};
</script>