<script>
import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
import { grid } from "../data";
import ImgSetting from "./imgSetting.vue";
import bus from "@/bus";
import PrintDialog from "@/views/design/head/printDialog.vue";
import { mmToPx } from "@/utils";
import { raw } from "express";

const img = require("../../../assets/bg_tshirt_shadow.png");
export default {
  components: {
    PrintDialog,
    VueDragResizeRotate,
    ImgSetting
  },
  destroyed() {
    document.removeEventListener("keyup", this.keyup);
    document.removeEventListener("dragover", this.dragover);
    document.removeEventListener("drop", this.drop);
  },

  computed: {
    gridWH() {
      if (
        !this.systemSetting ||
        !this.grid ||
        !this.grid[this.systemSetting.gridValue]
      )
        return { w: 0, h: 0, v: 1 };
      return {
        w: this.grid[this.systemSetting.gridValue].w,
        v: this.grid[this.systemSetting.gridValue].value,
        h: this.grid[this.systemSetting.gridValue].h
      };
    },
    gridSpacing() {
      if (!this.systemSetting || !Object.keys(this.systemSetting).length)
        return { w: 0, h: 0 };
      if (this.systemSetting.unit === "mm") {
        return {
          w: this.systemSetting.gridSpacing + "px",
          h: this.systemSetting.gridSpacing + "px"
        };
      } else if (this.systemSetting.unit === "inch") {
        console.log(this.systemSetting.gridValue);
        let w = this.grid[this.systemSetting.gridValue].w;
        let row = this.grid[this.systemSetting.gridValue].row;
        let col = this.grid[this.systemSetting.gridValue].col;
        let h = this.grid[this.systemSetting.gridValue].h;
        return {
          w: this.systemSetting.gridSpacing * ((w - row + 1) / row) + "px",
          h: this.systemSetting.gridSpacing * (h / col) + "px"
        };
      }
    },
    computedGridSize() {
      const getter = this.systemSetting;
      const num = getter.gridSpacing.slice(0, 2);
      return 10 + "px";
    },

    returnItem() {
      if (this.selectIndex < 0 && this.imgList.length) {
        // this.showImgSetting = false;
        this.selectIndex = 0;
      }
      let item = this.imgList[this.selectIndex];
      if (item) {
        item = JSON.parse(JSON.stringify(item));
        item.x = Number(item.x) - Number(item.w);
        item.y = Number(item.y) + Number(item.h) / 2;
        return JSON.parse(JSON.stringify(this.imgList[this.selectIndex]));
      }
      this.showImgSetting = false;
      return null;
    }
  },
  data() {
    return {
      actionList: [],
      parentWidth: 0,
      systemSetting: {},
      imgHeight: 0,
      selectImgList: [],
      bus: 0,
      grid,
      showImgSetting: true,
      printDialogShow: true,
      parentHeight: 0,
      width: 0,
      selectIndex: -1,
      height: 0,
      x: 0,
      y: 0,
      imgList: [],
      selectImgIndexList: [],
      imgHistoryList: [[]],
      imgHistoryIndex: 0,
      row: 8,
      img,
      col: 7
    };
  },
  watch: {
    imgList: {
      handler() {
        if (this.imgList.length > 0) {
          this.$nextTick(() => {
            let dom = document.getElementsByClassName("drr");
            this.imgList.forEach((el, i) => {
              let dom_i = document.getElementsByClassName("drr")[i];
              dom_i.style.zIndex =
                dom_i.style.zIndex === "" || !dom_i.style.zIndex
                  ? 0
                  : dom_i.style.zIndex;
              dom[i].addEventListener("click", e => {
                this.selectIndex = i;
                this.selectItem(i);
              });
            });
          });
        }
        this.$store.commit("changeImgList", this.imgList);
      },
      deep: true,
      immediate: true
    },
    selectIndex() {
      if (this.selectIndex >= 0) {
        if (!this.showImgSetting) {
          this.showImgSetting = true;
        }
      } else {
        this.showImgSetting = false;
      }
    }
  },
  methods: {
    changePrintDialogShow() {
      this.printDialogShow = !this.printDialogShow;
    },
    async drop(e) {
      let that = this;
      e.stopPropagation();
      //阻止浏览器默认打开文件的操作
      e.preventDefault();
      console.log(e);
      const files = e.dataTransfer.files;
      if (files.length === 0) return;
      for (let i = 0; i < files.length; i++) {
        if (files[i].type !== "image/png") {
          return that.$message.warning("只能上传png格式文件");
        }
        let formData = new FormData();
        formData.append("file", files[i]);
        let { data } = await that.$api.post("/uploadImage", formData, {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        });
        that.selectImgIndex = 0;
        that.addFile(data, file => {
          that.imgHistoryList.push(JSON.parse(JSON.stringify(that.imgList)));
        });
      }
    },
    dragover(e) {
      e.stopPropagation();
      //阻止浏览器默认打开文件的操作
      e.preventDefault();
      e.dataTransfer.dropEffect = "copy";
    },
    keyup(e) {
      console.log(e);
      if (e.keyCode == 90 && e.ctrlKey) {
        let i = this.imgHistoryList.length - (2 + this.imgHistoryIndex);
        if (this.imgHistoryList[i]) {
          this.imgList = JSON.parse(JSON.stringify(this.imgHistoryList[i]));
          this.imgHistoryIndex = this.imgHistoryIndex + 1;
        }
      }
      if (this.selectIndex >= 0) {
        if (e.keyCode === 38) {
          //上
          this.$set(
            this.imgList[this.selectIndex],
            "y",
            Number(this.imgList[this.selectIndex].y) - 1
          );
          this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
        }
        if (e.keyCode === 40) {
          //下
          this.$set(
            this.imgList[this.selectIndex],
            "y",
            Number(this.imgList[this.selectIndex].y) + 1
          );
          this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
        }
        if (e.keyCode === 37) {
          //左
          this.$set(
            this.imgList[this.selectIndex],
            "x",
            Number(this.imgList[this.selectIndex].x) - 1
          );
          this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
        }
        if (e.keyCode === 39) {
          //右
          this.$set(
            this.imgList[this.selectIndex],
            "x",
            Number(this.imgList[this.selectIndex].x) + 1
          );
          this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
        }
      }
      if (e.keyCode === 8) {
        if (this.selectIndex >= 0) {
          this.imgList.splice(this.selectIndex, 1);
          if (this.imgList.length > 0) {
            this.selectIndex = 0;
          } else {
            this.selectIndex = -1;
          }
        }
      }
    },

    indexChange(v) {
      console.log(v);
      if (this.imgList.length === 0) return;
      let index = !this.imgList[this.selectIndex] ? 0 : this.selectIndex;

      let item = this.$store.state.actionList[v];
      if (!item) return;

      if (item.t === "drag") {
        this.$set(this.imgList[index], "x", item.x);
        this.$set(this.imgList[index], "y", item.y);
      } else if (item.t === "resize") {
        this.$set(this.imgList[index], "x", item.x);
        this.$set(this.imgList[index], "y", item.y);
        this.$set(this.imgList[index], "w", item.w);
        this.$set(this.imgList[index], "h", item.h);
      }
      console.log();
    },
    getOneMmsPx() {
      // 创建一个1mm宽的元素插入到页面，然后坐等出结果
      let div = document.createElement("div");
      div.id = "mm";
      div.style.width = "1mm";
      document.querySelector("body").appendChild(div);
      // 原生方法获取浏览器对元素的计算值
      let mm1 = document.getElementById("mm").getBoundingClientRect();

      return mm1.width;
    },
    selectImg(it, i) {
      // this.selectImgIndexList.push(i)
      let item = this.imgList.find(img => img.fileName === it.fileName);
      if (item) return;
      // this.selectImgIndexList = Array.from(new Set(this.selectImgIndexList))
      this.getBackFile({files:[it]}, file => {
        this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
      });
    },
    ev(type) {
      if (this.selectIndex < 0 && this.imgList.length) {
        this.selectIndex = 0;
      }
      // if (this.selectIndex === -1) this.selectIndex = 0
      if (!this.imgList[this.selectIndex]) return;

      let w = document.getElementById("line").clientWidth / 2;
      let h = document.getElementById("line").clientHeight / 2;
      let dom = document.getElementsByClassName("drr")[this.selectIndex];
      let z_index
      if(dom){
          z_index = dom.style.zIndex === "" || !dom.style.zIndex ? 0 : dom.style.zIndex;
      }

      switch (type) {
        case "center":
          this.$set(this.imgList[this.selectIndex], "x", Number(w));
          this.$set(this.imgList[this.selectIndex], "y", Number(h));
          this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
          break;
        case "x_center":
          this.$set(this.imgList[this.selectIndex], "x", Number(w));
          this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
          break;
        case "y_center":
          this.$set(this.imgList[this.selectIndex], "y", Number(h));
          this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
          break;
        case "add_index":
          dom.style.zIndex = Number(z_index) + 1;
          console.log(dom.style.zIndex);
          this.$set(
            this.imgList[this.selectIndex],
            "zIndex",
            this.imgList[this.selectIndex].zIndex + 1
          );
          this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
          break;
        case "reduce_index":
          dom.style.zIndex = Number(z_index) - 1;
          console.log(dom.style.zIndex);
          this.$set(
            this.imgList[this.selectIndex],
            "zIndex",
            this.imgList[this.selectIndex].zIndex - 1
          );
          this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
          break;
        default:
          break;
      }
    },
    formChange(form) {
      // if (this.selectIndex === -1) this.selectIndex = 0
      if (!this.imgList[this.selectIndex]) return;
      let f = JSON.parse(JSON.stringify(form));
      let x_mm = f.x;
      let w_mm = f.w;
      let h_mm = f.h;
      let y_mm = f.y;
      this.$set(this.imgList[this.selectIndex], "x", x_mm);
      this.$set(this.imgList[this.selectIndex], "y", y_mm);
      this.$set(this.imgList[this.selectIndex], "w", w_mm);
      this.$set(this.imgList[this.selectIndex], "h", h_mm);
      this.$set(this.imgList[this.selectIndex], "r", f.r);
      this.$set(this.imgList[this.selectIndex], "zIndex", f.zIndex);
      this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
    },
    close() {
      this.showImgSetting = false;
    },
    dragStop(data, item) {
      this.$set(item, "y", data.y);
      this.$set(item, "x", data.x);
      this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
    },
    resizeStop(data, item) {
      if (this.selectIndex < 0 && this.imgList.length) this.selectIndex = 0;
      this.$set(item, "y", data.y);
      this.$set(item, "w", data.w);
      this.$set(item, "h", data.h);
      this.$set(item, "x", data.x);
      this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
    },
    resizing(index) {
    },
    rotating(data, item) {
      console.log(data);
      this.$set(item, "r", data.angle.toFixed(2));
      this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
    },
    outsideClick(e) {
      if (
        !(
          e.target.className.includes("drr") ||
          e.target.className.includes("sucaitu-img")
        )
      ) {
        this.selectIndex = -1;
        this.close();
      }
    },
    selectItem(index) {
      let dom = document.getElementsByClassName("drr");
      for (let i = 0; i < dom.length; i++) {
        if (index !== i) {
          dom[i].classList.remove("active");
          dom[i].classList.add("inactive");
        }
      }
      this.selectIndex = index;
    },
    deSelect(index) {
      console.log(index, 222222222);
      this.close();
      this.selectIndex = -1;
    },
    delImg(index) {
      console.log(index, "index");
      this.imgList.splice(index, 1);
      if (this.imgList.length > 0) {
        this.selectIndex = 0;
        this.showImgSetting = true;
      } else {
        this.selectIndex = -1;
      }
      this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
    },
    fileToBase64(file) {
      return new Promise((resolve, reject) => {
        // 创建一个新的 FileReader 对象
        const reader = new FileReader();
        // 读取 File 对象
        reader.readAsDataURL(file);
        // 加载完成后
        reader.onload = function() {
          // 将读取的数据转换为 base64 编码的字符串
          const base64String = reader.result;
          // 解析为 Promise 对象，并返回 base64 编码的字符串
          resolve(base64String);
        };

        // 加载失败时
        reader.onerror = function() {
          reject(new Error("Failed to load file"));
        };
      });
    },
      getBackFile({ files, size }, callback) {
      let that = this;
      let bw = document.getElementById("line").clientWidth;
      for (let i = 0; i < files.length; i++) {
        files[i].url = files[i].productionFile;
        that.$nextTick(async () => {
          let w = document.getElementById("line").clientWidth / 2;
          let width_px , height_px ,rate ;
          if(size){
            width_px =  mmToPx(size.width)
            height_px =  mmToPx(size.height)
            console.log(width_px,height_px,'w,h');
            rate = height_px / width_px
          }else{
            let data = await that.getImageSize(files[i].url)
            rate = data.height / data.width
            width_px = bw * (2 / 3)
            height_px = width_px* rate
          }

          that.imgList = [];
          that.imgList.push({
            url: files[i].url,
            fileName: files[i].fileName,
            rate,
            w: width_px,
            zIndex: that.imgList.length,
            x: w,
            y: height_px/ 2,
            h: height_px,
            r: 0
          });
          that.selectIndex = that.imgList.length - 1;
          that.showImgSetting = true;
          that.$nextTick(() => {
            that.ev('center')
          })
          if (i === files.length - 1) {
            callback && callback();
          }

        });
      }
    },
    addFile(file, callback) {
      let that = this;
      let bw = document.getElementById("line").clientWidth;
      let bh = document.getElementById("line").clientHeight;
      that.$nextTick(() => {
        that.getImageSize(file.url).then(data => {
          let w = document.getElementById("line").clientWidth / 2;
          let rate = data.height / data.width;
          that.imgList = [];
          that.imgList.push({
            url: file.url,
            w: bw * (2 / 3),
            rate,
            fileName: file.fileName,
            zIndex: that.imgList.length,
            x: w,
            y: (bw * (2 / 3) * rate) / 2,
            h: bw * (2 / 3) * rate,
            r: 0
          });
          console.log(that.imgList);
          that.selectIndex = that.imgList.length - 1;
          that.showImgSetting = true;
          callback && callback(file);
        });
      });
    },
    listenUpload() {
      let that = this;
      document.getElementById("img").onmousedown = function(e) {
        e.preventDefault();
      };
      that.parentWidth = document.getElementById("img").clientWidth;
      that.parentHeight = document.getElementById("img").clientHeight;
      let dp = document.getElementsByClassName("container")[0];
      dp.addEventListener("dragover", this.dragover);
      dp.addEventListener("drop", this.drop);
    },
    getImageSize(url) {
      return new Promise(function(resolve, reject) {
        let image = new Image();
        image.onload = function() {
          resolve({
            width: image.width,
            height: image.height
          });
        };
        image.onerror = function() {
          reject(new Error("error"));
        };
        image.src = url;
      });
    },

    /**
     * 根据主题颜色修改图片颜色
     * @param  {[type]}   imgUrl    图片url
     * @param  {[type]}  color 主题颜色
     * @param  {Function} callback  返回值 返回base64
     */
    changeImageColor(color = "#00ff7f", callback) {
      let threshold = 114; //默认颜色阀值 为 114 －>和默认图相关
      let img = new Image();
      img.src = require("../../../assets/bg_tshirt_shadow.png");
      let newR = parseInt("0x" + color.substr(1, 2));
      let newG = parseInt("0x" + color.substr(3, 2));
      let newB = parseInt("0x" + color.substr(5, 2));
      //图片加载后进行处理
      img.onload = function() {
        let width = img.width,
          height = img.height,
          canvas = document.createElement("canvas"),
          ctx = canvas.getContext("2d");
        canvas.width = width;
        canvas.height = height;
        // 将源图片复制到画布上
        ctx.drawImage(img, 0, 0, width, height);
        // 获取画布的像素信息
        let imageData = ctx.getImageData(0, 0, width, height),
          data = imageData.data;
        // 对像素集合中的单个像素进行循环，每个像素是由4个通道组成，所以要注意
        let i = 0;
        while (i < data.length) {
          let r = data[i++],
            g = data[i++],
            b = data[i++],
            a = data[i++];
          //计算透明度
          let alp = (255 - r) / (255 - threshold);
          //判断是否透明
          let isTransparent = r == 255 && g == 255 && b == 255 && a == 255;
          if (isTransparent) {
            data[i - 1] = 0;
          } else {
            data[i - 4] = newR;
            data[i - 3] = newG;
            data[i - 2] = newB;
            data[i - 1] = a !== 255 ? 255 - a : alp * 255; //处理透明的图片和不透明的图片
          }
        }
        // 将修改后的代码复制回画布中
        ctx.putImageData(imageData, 0, 0);
        // 图片导出为 png 格式
        let imgType = "png";
        let imgData = canvas.toDataURL(imgType);

        callback && callback(imgData);
      };
      return img;
    }
  },
  mounted() {
    this.imgHeight = window.screen.height + "px";
    this.systemSetting = this.$dataStore.get("setting");
    bus.$on("busEmit", v => {
      let { type, value, size } = v;
      switch (type) {
        case "grid":
          this.row = value.row;
          this.col = value.col;
          break;
        case "index":
          this.indexChange(value);
          break;
        case "bg":
          this.changeImageColor(value, res => {
            this.img = res;
          });
          break;
        case "updateSystemSetting":
          console.log(this.$dataStore);
          this.systemSetting = this.$dataStore.get("setting");
          break;
        case "uploadImage":
          this.addFile(value, () => {
            this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
          });
          break;
        case "sendFile":
          this.imgList = [];
          this.selectIndex = -1;
          if (value.length > 0) {
            console.log(value);
            this.selectImgList = value;
            this.selectImgIndex = 0;
            this.getBackFile({ files: [value[0]], size }, file => {
              this.imgHistoryList.push(
                JSON.parse(JSON.stringify(this.imgList))
              );
            });
            // this.addFile([value[0].file])
          }
          break;
        default:
          break;
      }
    });

    document.addEventListener("keyup", this.keyup);
    this.$nextTick(() => {
      this.listenUpload();
    });
  }
};
</script>

<template>
  <div class="page-main">
    <div @click="outsideClick" class="main-bg">
      <div class="container">
        <div :style="{ height: imgHeight }" id="img">
          <div id="line">
            <div
              class="sucaitu"
              :style="{ width: gridWH.w + 'px', height: gridWH.h + 'px' }"
            >
              <vue-drag-resize-rotate
                :w="item.w"
                class-name="my-drag-resize-rotate"
                :prevent-deactivation="false"
                :h="item.h"
                :x="item.x"
                :z="item.zIndex"
                :aspectRatio="true"
                :isActive="index === selectIndex"
                :y="item.y"
                v-for="(item, index) in imgList"
                :key="index"
                :draggable="true"
                :resizable="true"
                :rotatable="true"
                @dragstop="a => dragStop(a, item)"
                @resizestop="a => resizeStop(a, item)"
                @rotatestop="a => rotating(a, item)"
                :angle="item.r"
              >
                <div
                  ref="sucaitu-img"
                  :class="{ active: index === selectIndex }"
                  :style="{ zIndex: item.zIndex }"
                  class="sucaitu-img img element"
                >
                  <img
                    crossOrigin="anonymous"
                    :src="item.url"
                    :id="item.fileName + '_' + index"
                    alt=""
                    style="width: 100%;height: 100%"
                    class="sucaitu-img"
                  />
                  <i
                    @click="delImg(index)"
                    v-if="index === selectIndex"
                    class=" close el-icon-close"
                  ></i>
                  <div
                    v-if="index === selectIndex"
                    class="control-point control-rotator"
                  ></div>
                </div>
              </vue-drag-resize-rotate>
            </div>
            <div
              :class="{'no-border-grid':systemSetting.gridShow !== 1}"
              :style="{
                width: gridWH.w + 'px',
                height: gridWH.h + 'px'
              }"
              class="grid"
            >
              <div
                :style="{ height: gridSpacing.h, lineHeight: gridSpacing.h }"
                class="grid-row"
                v-for="it in 100"
                :key="it"
              >
                <div
                  :style="{ width: gridSpacing.w, height: gridSpacing.h }"
                  class="grid-col"
                  v-for="it in 100"
                  :key="it"
                ></div>
              </div>
            </div>
          </div>
          <img class="template-img" draggable="false" :src="img" alt="" />
        </div>

        <print-dialog
          :visible="printDialogShow"
          :imgList="imgList"
          :byPlatenSize="gridWH.v"
        >
          <i
            @click="changePrintDialogShow"
            :class="
              !printDialogShow ? 'el-icon-arrow-left' : 'el-icon-arrow-right'
            "
          ></i>
        </print-dialog>
      </div>
    </div>
    <img-setting
      @ev="ev"
      @change="formChange"
      :item="returnItem"
      @close="close"
    >
      <div class="select-img" v-if="selectImgList.length">
        <div
          @click="selectImg(it, i)"
          v-for="(it, i) in selectImgList"
          :key="i"
          class="img-item"
        >
          <img style="width: 140px;height: auto;" :src="it.productionFile" />
          <span>{{ it.designId }}</span>
        </div>
      </div>
    </img-setting>
  </div>
</template>

<style lang="less" scoped>
.page-main {
  flex: 1;
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.main-bg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#line {
  position: absolute;
  z-index: 2;
}

.grid {
  border: 1px solid gray;
  overflow: hidden;

  .grid-row {
    .grid-col {
      display: inline-block;
      border: 1px solid gray;
      border-right: none;
      border-bottom: none;
    }
  }
}

.grid-row {
  width: 100%;
  overflow: hidden;
  height: 10px;
  line-height: 10px;
  white-space: nowrap;

  &:nth-of-type(1) {
    .grid-col {
      border-top: none !important;
    }
  }

  &:nth-last-of-type(1) {
    .grid-col {
      border-bottom: none !important;
    }
  }

  .grid-col {
    &:nth-of-type(1) {
      border-left: none !important;
    }
  }
}

#img {
  position: absolute;
  z-index: 1;
  left: 130px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;

  img {
    pointer-events: none;
    width: auto;
    height: 100%;
  }
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: relative;
}

.sucaitu {
  position: absolute;
  z-index: 0;
  width: 100%;
  //display: flex;
  //justify-content: center;
  //align-items: center;
  height: 100%;

  img {
    width: 100%;
    height: 100%;
  }

  .close {
    position: absolute;
    top: -11px;
    right: -12px;
    color: white;
    z-index: 1000;
    width: 20px;
    cursor: pointer;
    height: 20px;
    background: red;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .img {
    height: fit-content;
    width: 100%;
    height: 100%;
    cursor: move;
    border: 1px dashed transparent;
  }
}

.select-img {
  border: 1px solid #ececec;
  width: 100%;
  overflow: auto;
  height: calc(100% - 251px);
  padding: 10px;
  box-sizing: border-box;
}

img {
  user-select: none;
  user-drag: none;
}

::v-deep .active,
.active {
  border-color: #66b1ff !important;
}

.select-img-index {
  box-sizing: border-box;
  border-color: #409eff !important;
}

.img-item {
  padding: 5px;
  display: flex;
  cursor: pointer;
  margin-bottom: 20px;
  border: 2px dashed transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  span {
    font-size: 14px;
    margin: 5px 0;
    color: black;
  }
}

.sucaitu-img {
  position: relative;
}

.no-border-grid {
  border-color: transparent !important;

  * {
    border-color: transparent !important;
  }
}
</style>
<style>
.el-upload {
  height: 100%;
}

.drr-stick {
  z-index: 9999;
}

.drr-stick-tr {
  z-index: -1 !important;
}

.my-drag-resize-rotate {
  border-color: transparent;
}

.handle-rot::before,
.handle-rot::after {
  display: none;
}
</style>
