<template>
  <div class="image-orientation">
    <div class="part-head">
      <h2>图片方向设置</h2>
    </div>
    <div class="image-orient-main">
      <div class="image-orient-cont">
        <img
          :src="imageUrl"
          :style="contStyle"
          ref="editImage"
          @load="imageLoad"
        />
      </div>
      <div class="image-cover-box" :style="coverBoxStyle">
        <div
          class="image-cover-item"
          v-for="(item, index) in coverItems"
          :key="index"
          :style="item"
        ></div>
      </div>
      <div class="image-orient-btns">
        <div
          class="image-orient-icon"
          title="逆时针旋转90度"
          @click="toRotate(0)"
        >
          <i class="icon icon-left-rotate"></i>
        </div>
        <div
          class="image-orient-icon"
          title="顺时针旋转90度"
          @click="toRotate(1)"
        >
          <i class="icon icon-right-rotate"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "image-orientation",
  props: {
    imageUrl: {
      type: String,
      require: true
    },
    curSetting: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      contStyle: {},
      picRotate: 0,
      coverItems: [],
      coverBoxStyle: {}
    };
  },
  mounted() {
    const defImageRotate =
      (this.curSetting && this.curSetting.imageRotate) || 0;
    this.picRotate = defImageRotate;
    this.contStyle = {
      transform: `translate(-50%, -50%) rotate(${this.picRotate}deg)`
    };
    this.$emit("on-ready");
  },
  methods: {
    toRotate(type) {
      if (type) {
        this.picRotate += 90;
        if (this.picRotate === 360) this.picRotate = 0;
      } else {
        if (this.picRotate === 0) this.picRotate = 360;
        this.picRotate -= 90;
      }

      this.contStyle = {
        transform: `translate(-50%, -50%) rotate(${this.picRotate}deg)`
      };
      this.coverBoxStyle.transform = this.contStyle.transform;
    },
    imageLoad() {
      const imgDom = this.$refs.editImage;
      const rate = imgDom.clientWidth / imgDom.naturalWidth;

      this.coverBoxStyle = {
        width: imgDom.clientWidth + "px",
        height: imgDom.clientHeight + "px",
        transform: this.contStyle.transform
      };
      const codeAreaSize = this.transformSize(this.curSetting.codeArea, rate);
      this.coverItems.push({
        width: codeAreaSize.width,
        height: codeAreaSize.height,
        top: codeAreaSize.y,
        left: codeAreaSize.x
      });
      const coverAreaSize = this.transformSize(this.curSetting.coverArea, rate);
      this.coverItems.push({
        width: coverAreaSize.width,
        height: coverAreaSize.height,
        top: coverAreaSize.y,
        left: coverAreaSize.x
      });
      this.getTailorCoverArea(imgDom).map(item => {
        this.coverItems.push(this.transformSize(item, rate));
      });
    },
    getTailorCoverArea(imgDom) {
      const tailorArea = this.curSetting.tailorArea;
      const { naturalWidth, naturalHeight } = imgDom;
      return [
        {
          width: tailorArea.x,
          height: naturalHeight,
          top: 0,
          left: 0
        },
        {
          width: naturalWidth - tailorArea.x - tailorArea.width,
          height: naturalHeight,
          top: 0,
          right: 0
        },
        {
          width: naturalWidth,
          height: tailorArea.y,
          top: 0,
          left: 0
        },
        {
          width: naturalWidth,
          height: naturalHeight - tailorArea.y - tailorArea.height,
          bottom: 0,
          left: 0
        }
      ];
    },
    transformSize(sizes, rate) {
      let newSizes = {};
      Object.keys(sizes).map(key => {
        newSizes[key] = sizes[key] * rate + "px";
      });
      return newSizes;
    },
    checkValid() {
      this.$emit("on-next", { imageRotate: this.picRotate });
    },
    pass() {
      this.$emit("on-next", { imageRotate: null });
    }
  }
};
</script>
