<script>
import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
import PicScrollbarBox from "../../../components/PicScrollbarBox.vue";

const { ipcRenderer } = require("electron");
// import { fabric } from "fabric";

import ImgSetting from "./imgSetting.vue";
import bus from "@/bus";
import PrintDialog from "@/views/design/head/printDialog.vue";
import { mmToPx } from "@/utils";

const path = require("path");
const fs = require("fs");
const uuid = require("uuid");
import { startLoading, endLoading } from "@/utils/axios.js";

import { mapState } from "vuex";

const img = require("../../../assets/bg_tshirt_shadow.png");

export default {
  components: {
    PrintDialog,
    VueDragResizeRotate,
    ImgSetting,
    PicScrollbarBox,
  },
  props: { factoryType: { type: String, default: "CN" } },
  destroyed() {
    document.removeEventListener("keyup", this.keyup);
    document.removeEventListener("dragover", this.dragover);
    document.removeEventListener("drop", this.drop);
  },
  created() {
    ipcRenderer.on("window-size", (event, size) => {
      const { width, height } = size;
      console.log(`接收到窗口尺寸：${width}x${height}`);
      let proportion;
      if (height > 1000) {
        proportion = 1.7;
      } else if (height > 900 && height <= 1000) {
        proportion = 1.5;
      } else {
        proportion = 1;
      }

      this.$store.commit("setWHproportion", proportion);
      this.$store.commit("setWindows", { width, height });
      this.$store.commit("setDefaultproportion", proportion);
      this.$store.commit("setGrid");
    });
    if (!this.countryList.length) {
      this.getAllCountryFn();
    }
  },
  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() {
      const { unit, gridSpacing } = this.systemSetting;
      if (!this.systemSetting || !Object.keys(this.systemSetting).length)
        return { w: 0, h: 0 };
      if (unit === "mm") {
        return {
          w: gridSpacing + "px",
          h: gridSpacing + "px",
        };
      } else if (unit === "inch") {
        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: gridSpacing * ((w - row + 1) / row) + "px",
          w: gridSpacing * (w / row) + "px",
          h: gridSpacing * (h / col) + "px",
        };
      }
      return { w: "480px", h: "540px" };
    },
    viewGridSpacing() {
      const { unit, gridSpacing } = this.systemSetting;
      if (!this.systemSetting || !Object.keys(this.systemSetting).length)
        return { w: 0, h: 0 };
      if (unit === "mm") {
        return {
          w: gridSpacing + "px",
          h: gridSpacing + "px",
        };
      } else if (unit === "inch") {
        let w = 480;
        let row = 16;
        let col = 18;
        let h = 540;
        return {
          w: gridSpacing * (w / row) + "px",
          h: gridSpacing * (h / col) + "px",
        };
      }
      return { w: "480px", h: "540px" };
    },
    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;
    },

    ...mapState([
      "desktopDevice",
      "productDetail",
      "WHproportion",
      "grid",
      "windowWH",
      "countryList",
    ]),
  },
  data() {
    return {
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
      ],
      actionList: [],
      checkList: [],
      oldImgList: [],
      hasSize: false,
      parentWidth: 0,
      backColor: "#77797a",
      gridBg: "#ffffff",
      systemSetting: {},
      detail: {},
      imgHeight: 0,
      selectImgList: [],
      bus: 0,

      showImgSetting: true,
      printDialogShow: true,
      parentHeight: 0,
      width: 0,
      selectIndex: -1,
      height: 0,
      x: 0,
      y: 0,
      imgList: [],
      viewImgList: [],
      selectImgIndexList: [],
      currentImgIndex: 0,
      isView: false,
      imgHistoryList: [[]],
      imgHistoryIndex: 0,
      row: 8,
      img,
      col: 7,
      oldImgStyle: "",
      drrDom: null,
      imgDom: null,
    };
  },
  watch: {
    imgList: {
      handler() {
        // console.log(169, newValue);

        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", () => {
                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;
      }
    },
    desktopDevice(newValue) {
      if (newValue == 2) {
        this.imgList = [];
        this.selectImgList = [];
        this.selectIndex = -1;
        this.selectImgIndex = 0;
      }
    },
    productDetail(newValue) {
      this.detail = { ...newValue };
      if (typeof this.detail.imageAry == "string") {
        this.detail.imageAry = JSON.parse(this.detail.imageAry);
      }
    },
    changeCheckFn(value) {
      console.log("check", value);
    },

    isView: {
      handler(newValue) {
        if (!newValue) {
          this.$nextTick(() => {
            this.drrDom = document.getElementsByClassName("drr")[0];
            this.imgDom = document.getElementById("imgBox");
            console.log(257, this.imgDom);
            if (this.imgDom)
              this.imgDom.style.webkitClipPath = this.oldImgStyle;
          });
        } else {
          this.drrDom = "";
          this.imgDom = "";
        }
      },
      immediate: true,
    },
    systemSetting: {
      handler() {
        if (this.imgList.length > 0) {
          this.$refs.imgSetting?.getCurrentItem(this.imgList[this.selectIndex]);
        }
      },
      deep: true,
    },
  },
  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, () => {
          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);
      }
    },
    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;
    },
    setDesignImg(title) {
      let img = this.selectImgList.find((it) => it.title === title);
      if (img) {
        console.log(this.detail.designImageSize, "this.detail.size");
        this.getBackFile(
          { files: [img], size: this.detail.designImageSize },
          () => {
            this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
          }
        );
      }
    },
    selectImg(it, index) {
      if (this.isView) {
        this.isView = false;
      }
      this.$nextTick(() => {
        // this.selectImgIndexList.push(i)
        let item = this.imgList.find((img) => img.fileName === it.fileName);
        if (item) return;
        this.currentImgIndex = index;
        console.log(this.detail.designImageSize);
        let size = null;
        if (
          this.detail.mssWidth &&
          this.detail.adjustable &&
          this.detail.mssHeight
        ) {
          size = {
            width: this.detail.mssWidth,
            height: this.detail.mssHeight,
          };
        }
        this.getBackFile({ files: [it], size }, () => {
          this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
        });
        this.imgDom = document.getElementById("imgBox");
        if (this.imgDom) this.imgDom.style.webkitClipPath = "none";
      });
      // setTimeout(() => {}, 300);
      // this.selectImgIndexList = Array.from(new Set(this.selectImgIndexList))
      // this.getBackFile({ files: [it], size });
    },
    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;
      }
      let gw = Number(this.gridWH.w);
      let gh = Number(this.gridWH.h);
      let imgW = this.imgList[this.selectIndex].w;
      let imgH = this.imgList[this.selectIndex].h;
      // 计算容器和图片的宽高比
      const containerRatio = gw / gh;
      const imageRatio = imgW / imgH;

      switch (type) {
        case "cover":
          if (imageRatio >= containerRatio) {
            // 宽度铺满，高度自适应
            let r = gw / imgW;
            this.$set(this.imgList[this.selectIndex], "w", gw);
            this.$set(this.imgList[this.selectIndex], "h", imgH * r);
          } else {
            // // 高度铺满，宽度自适应
            let r = gh / imgH;
            console.log("比例", r);

            this.$set(this.imgList[this.selectIndex], "h", gh);
            this.$set(this.imgList[this.selectIndex], "w", imgW * r);
          }

          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 "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)));
      this.getCutArea();
    },
    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)));
      if (!this.drrDom && !this.imgDom) {
        this.drrDom = document.getElementsByClassName("drr")[0];
        this.imgDom = document.getElementById("imgBox");
      }
      this.getCutArea();
    },
    resizing() {},
    rotating(data, item) {
      this.$set(item, "r", data.angle);
      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");
      // console.log("dom", dom);

      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() {
      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"));
        };
      });
    },
    getComputedName(title) {
      let img = this.selectImgList.find(
        (it) => it.title === title || it.title.includes(title)
      );
      return img?.designId;
    },
    getComputedTitle(title) {
      console.log(this.selectImgList, "this.selectImgList");
      let img = this.selectImgList.find(
        (it) => it.title === title || it.title.includes(title)
      );
      return img?.productionFile;
    },
    getBackFile({ files, size }, callback) {
      let that = this;
      let bw = document.getElementById("line");
      let bh = bw.clientHeight;
      bw = bw.clientWidth;
      this.isView = false;
      // bw = Number(bw.replsace("px", ""));
      for (let i = 0; i < files.length; i++) {
        files[i].url = files[i].productionFile || files[i].url;
        that.$nextTick(async () => {
          let w = bw / 2;
          let h = bh / 2;
          let width_px, height_px, rate, x, y;
          if (size && !files[i].isCut) {
            width_px = that.WHproportion * mmToPx(size.width);
            height_px = that.WHproportion * mmToPx(size.height);
            x = w * that.WHproportion;
            y = (height_px / 2) * that.WHproportion;
            rate = height_px / width_px;
          } else {
            let data = await that.getImageSize(files[i].url);

            rate = data.height / data.width;
            if (rate > 1) {
              height_px = bh * (9 / 10);
              width_px = height_px / rate;
              x = width_px / 2;
              y = h;
            } else {
              width_px = bw * (2 / 3);
              height_px = width_px * rate;
              x = w;
              y = height_px / 2;
            }
          }
          that.imgList = [];
          that.imgList.push({
            url: files[i].url,
            fileName: files[i].fileName,
            rate,
            w: width_px,
            zIndex: that.imgList.length,
            x,
            y,
            h: height_px,
            r: 0,
          });
          that.selectIndex = that.imgList.length - 1;
          that.showImgSetting = true;
          that.$nextTick(() => {
            that.ev("center");
          });
          // setTimeout(() => {
          //   that.ev("center");
          // }, 1000);
          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(570, 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;
    },

    async cutImgFn() {
      this.checkList = JSON.parse(JSON.stringify(this.selectImgList));
      try {
        console.log("checkList", this.checkList);

        const processQueue = await Promise.all(
          this.checkList.map(async (el) => {
            try {
              const outputDir = path.dirname(el.productionFile);
              const outputFileName = `${uuid.v4()}.png`;
              const outputPath = path.join(outputDir, outputFileName);
              const params = {
                inputPath: el.productionFile,
                outputPath: outputPath,
              };
              const res = await this.$api.post("/processImage", params);
              fs.unlinkSync(el.productionFile);
              return {
                fileName: outputFileName,
                productionFile: res.msg[0]?.outputPath,
                designId: el.designId,
              };
            } catch (error) {
              console.error(`处理失败: ${el.productionFile}`, error);
            }
          })
        );
        console.log("processQueue", processQueue);
        // 等待所有异步操作完成
        await new Promise((resolve) => setTimeout(resolve, 100));
        const newMap = new Map(processQueue.map((el) => [el.designId, el]));
        console.log("newMap", newMap);

        this.selectImgList.forEach((el) => {
          if (newMap.has(el.designId)) {
            el.fileName = newMap.get(el.designId).fileName;
            el.url = newMap.get(el.designId).productionFile;
            el.isCut = true;
            el.productionFile = newMap.get(el.designId).productionFile;
          }
        });
        console.log("selectImgList", this.selectImgList);

        if (this.imgList.length) {
          const fileNameExists = this.checkList.some(
            (el) => el.fileName === this.imgList[0].fileName
          );
          if (fileNameExists) {
            this.imgList = [];
            this.selectIndex = -1;
          }
        }

        this.checkList = [];
        this.getBackFile({ files: [this.selectImgList[0]] });
      } catch (error) {
        console.error("错误", error);
      }
    },
    startLoading,
    endLoading,

    handleClick(event) {
      // 获取点击的元素
      let currentElement = event.target;
      if (!this.isView && this.imgDom) {
        this.oldImgStyle = this.imgDom.style.webkitClipPath || "none";
      }
      // 确保点击的元素在包含 container 类名的元素内
      if (currentElement.closest(".container")) {
        // 如果点击的元素不是 boxShaow，执行方法
        if (!currentElement.closest(".boxShaow")) {
          this.isView = !this.isView;
        }
      }

      this.$store.commit("setIsPreView", this.isView);
    },
    async downloadImg() {
      let res = await this.$api.post("/downloadBySubOrderNumber", {
        ids: [this.detail.id],
        device: this.$store.state.desktopDevice,
        type: this.factoryType,
      });
      if (res.data.length === 0) return this.$message.warning("未找到素材图！");
      let imgList = [];
      res.data.forEach((el) => {
        imgList = imgList.concat(el.list || []);
      });
      let arr = [];
      res.data.forEach((el) => {
        if (el.list) {
          el.list.forEach((it) => {
            arr.push(it);
          });
        }
      });
      res.data = arr.filter((el) => el.type !== 1);
      this.selectImgList = [...res.data];
      console.log(823, this.selectImgList);

      this.imgList = [];
      this.selectIndex = -1;
      this.selectImgIndex = 0;
      this.getBackFile({ files: [this.selectImgList[0]] });
    },
    getStyleValue(value, defaultValue = 0) {
      return value
        ? parseFloat(value.replace("px", "")) || defaultValue
        : defaultValue;
    },
    getInset(top = 100, right = 0, bottom = 0, left = 100) {
      return `inset(${100 - top}% ${right}% ${bottom}% ${100 - left}%)`;
    },
    getDrag() {
      this.drrDom = document.getElementsByClassName("drr")[0];
      this.imgDom = document.getElementById("imgBox");

      this.getCutArea();
    },
    getCutArea() {
      // 语法：inset(<top> <right> <bottom> <left>)
      if (!this.drrDom) return;

      let gradient = "none";

      const style = this.drrDom.style;

      if (style.transform) {
        const result = style.transform.split("(")[1].split(")")[0];

        if (result !== "0deg") {
          return;
        }
      }
      const newLeft = this.getStyleValue(style.left);
      const newTop = this.getStyleValue(style.top);
      const newWidth = this.getStyleValue(style.width, 100); // 默认宽度防止除零错误
      const newHeight = this.getStyleValue(style.height, 100);
      const { w, h } = this.gridWH;

      const isOverRight = w < newWidth + newLeft;
      const isOverLeft = newLeft < 0;
      const isOverBottom = h < newTop + newHeight;
      const isOverTop = newTop < 0;

      let top = ((newTop + newHeight) / newHeight) * 100;
      let right = ((newWidth + newLeft - w) / newWidth) * 100;
      let bottom = ((newTop + newHeight - h) / newHeight) * 100;
      let left = ((newLeft + newWidth) / newWidth) * 100;

      if (isOverRight && isOverTop && isOverLeft && isOverBottom) {
        console.log("四面");
        gradient = this.getInset(top, right, bottom, left);
      } else if (isOverRight && isOverTop && isOverLeft) {
        console.log("左右上");
        gradient = this.getInset(top, right, 0, left);
      } else if (isOverRight && isOverBottom && isOverLeft) {
        console.log("左右下");
        gradient = this.getInset(100, right, bottom, left);
      } else if (isOverTop && isOverBottom && isOverLeft) {
        console.log("左上下");
        gradient = this.getInset(top, 0, bottom, left);
      } else if (isOverTop && isOverBottom && isOverRight) {
        console.log("右上下");
        gradient = this.getInset(top, right, bottom, 100);
      } else if (isOverRight && isOverTop) {
        console.log("右上");
        gradient = this.getInset(top, right);
      } else if (isOverRight && isOverBottom) {
        console.log("右下");
        gradient = this.getInset(100, right, bottom);
      } else if (isOverTop && isOverLeft) {
        console.log("左上");
        gradient = this.getInset(top, 0, 0, left);
      } else if (isOverLeft && isOverBottom) {
        console.log("左下");
        gradient = this.getInset(100, 0, bottom, left);
      } else if (isOverLeft && isOverRight) {
        console.log("左右");
        gradient = this.getInset(100, right, 0, left);
      } else if (isOverTop && isOverBottom) {
        console.log("上下");
        gradient = this.getInset(top, 0, bottom, 100);
      } else if (isOverRight) {
        console.log("右");
        gradient = this.getInset(100, right);
      } else if (isOverBottom) {
        console.log("下");
        gradient = this.getInset(100, 0, bottom);
      } else if (isOverTop) {
        console.log("上");
        gradient = this.getInset(top);
      } else if (isOverLeft) {
        console.log("左");
        gradient = this.getInset(100, 0, 0, left);
      } else {
        console.log("中间");
      }
      this.imgDom.style.webkitClipPath = gradient;
    },
    async getAllCountryFn() {
      try {
        let { data } = await this.$api.post("/getAllCountry");
        this.$store.commit("setCountry", data);
        console.log(991, this.countryList);
      } catch (error) {
        console.log(error);
      }
    },
  },
  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":
          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.hasSize = !!size;
          this.detail.designImageSize = size;
          console.log(this.detail, "this.detail");
          this.imgList = [];
          this.selectIndex = -1;
          if (value.length > 0) {
            this.selectImgList = value;
            console.log(816, this.selectImgList);

            this.selectImgIndex = 0;
            this.getBackFile(
              { files: [value[0]], size: this.detail.designImageSize || null },
              () => {
                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();
    });
    document.addEventListener("click", this.handleClick);
    // 在页面加载完成后自动初始化
    // window.addEventListener("load", () => {
    //   initCrop(); // 初始化裁剪功能
    // }); // 初始化裁剪功能
  },
  beforeDestroy() {
    // 销毁组件时移除事件监听器
    document.removeEventListener("click", this.handleClick);
  },
};
</script>

<template>
  <div class="page-main">
    <img-setting
      ref="imgSetting"
      @ev="ev"
      @change="formChange"
      :item="returnItem"
      @close="close"
    >
      <template #content>
        <div class="information-content">
          <PicScrollbarBox
            boxTitle="效果图"
            emptyTitle="效果图为空"
            style="border-bottom: 1px solid #ececec;"
          >
            <template #mainContent v-if="detail.imageAry?.length">
              <div style="width: 100%;">
                <div
                  v-for="(img, index) in detail.imageAry"
                  :key="index"
                  class="img-item"
                  style="width: 50%;"
                >
                  <img :src="img.url" />
                </div>
              </div>
            </template>
          </PicScrollbarBox>
          <PicScrollbarBox boxTitle="素材图" emptyTitle="素材图为空">
            <template #titleRight>
              <div>
                <el-button
                  type="primary"
                  size="small"
                  v-if="selectImgList.length"
                  style="margin: 5px;"
                  @click="downloadImg"
                  >下载原素材
                </el-button>
                <el-button
                  type="primary"
                  size="small"
                  v-if="selectImgList.length"
                  style="margin: 5px;"
                  @click="cutImgFn"
                  >裁切
                </el-button>
              </div>
            </template>
            <template #mainContent>
              <div
                v-for="(img, i) in selectImgList"
                :key="i"
                class="img-item showImg"
                @click.stop.prevent="selectImg(img, i)"
              >
                <img
                  :key="i"
                  style="width: auto;max-height: 190px;max-width: 200px;"
                  :src="img.productionFile"
                />
                <!-- <span>{{ img.designId }}</span> -->
              </div>
            </template>
          </PicScrollbarBox>
        </div>
        <div class="product-information">
          <div class="title">
            生产单信息
          </div>
          <div class="div-content">
            <div :title="detail.podProductionNo" class="div-item">
              <div class="item-label">生产单号：</div>
              <div class="item-value">
                {{ detail.factorySubOrderNumber }}
                <div
                  style="margin-left: 5px"
                  v-if="detail.podProductionNo"
                  :style="{
                    color: detail.customizedQuantity > 1 ? 'red' : '#67C23A',
                  }"
                >
                  {{ detail.customizedQuantity > 1 ? "多" : "单" }}
                </div>
              </div>
            </div>
            <div :title="detail.factorySubOrderNumber" class="div-item">
              <div class="item-label">工厂单号：</div>
              <div class="item-value">{{ detail.factorySubOrderNumber }}</div>
            </div>
            <div :title="detail.processName" class="div-item">
              <div class="item-label">生产工艺：</div>
              <div class="item-value">{{ detail.processName }}</div>
            </div>
            <div :title="detail.baseSku" class="div-item">
              <div class="item-label">基版：</div>
              <div class="item-value">{{ detail.baseSku }}</div>
            </div>
            <div :title="detail.size" class="div-item">
              <div class="item-label">尺寸：</div>
              <div class="item-value">{{ detail.size }}</div>
            </div>
            <div :title="detail.variantSku" class="div-item">
              <div class="item-label">变体SKU：</div>
              <div class="item-value">{{ detail.variantSku }}</div>
            </div>
            <div :title="detail.num" class="div-item">
              <div class="item-label">数量：</div>
              <div class="item-value">{{ detail.num }}</div>
            </div>
            <div :title="detail.supplierItemNo" class="div-item">
              <div class="item-label">货号：</div>
              <div class="item-value">{{ detail.supplierItemNo }}</div>
            </div>
            <div :title="detail.color" class="div-item">
              <div class="item-label">颜色：</div>
              <div class="item-value">
                {{ detail.baseSku ? detail.baseSku.split("_")[1] : null }}
              </div>
            </div>

            <div :title="detail.factoryCode" class="div-item">
              <div class="item-label">工厂：</div>
              <div class="item-value">{{ detail.factoryCode }}</div>
            </div>
            <div
              :title="detail.shopNumber"
              class="div-item"
              style="flex: 100%;"
            >
              <div>
                店铺单号：
              </div>
              <div>
                {{ detail.shopNumber }}
              </div>
            </div>
            <div
              :title="detail.createTime"
              class="div-item"
              style="flex: 100%;"
            >
              <div>创建时间：</div>
              <div>{{ detail.createTime }}</div>
            </div>
            <div
              :title="detail.startStockingTime"
              class="div-item"
              style="flex: 100%;"
            >
              <div>
                生产确认时间：
              </div>
              <div>{{ detail.startStockingTime }}</div>
            </div>
            <div
              v-if="detail.mssWidth && detail.mssHeight"
              class="div-item"
              style="flex: 100%;"
            >
              <div>素材规格：</div>

              <div class="item-value">
                mm:&nbsp;(&nbsp; w:
                {{
                  ((Number(detail.mssWidth) * WHproportion * 10) / 10).toFixed(
                    1
                  )
                }}
                &nbsp; h:
                {{
                  ((Number(detail.mssHeight) * WHproportion * 10) / 10).toFixed(
                    1
                  )
                }}&nbsp;)
              </div>
            </div>
            <div
              v-if="detail.mssWidth && detail.mssHeight"
              class="div-item"
              style="flex: 100%;"
            >
              <div style="opacity: 0;">素材规格：</div>
              <div class="item-value">
                inch:&nbsp;(&nbsp;w:
                {{
                  (
                    ((Number(detail.mssWidth) / 25.4) * WHproportion * 10) /
                    10
                  ).toFixed(1)
                }}
                &nbsp;h:
                {{
                  (
                    ((Number(detail.mssHeight) / 25.4) * WHproportion * 10) /
                    10
                  ).toFixed(1)
                }}&nbsp;)
              </div>
            </div>
          </div>
        </div>
      </template>
    </img-setting>
    <div
      @click="outsideClick"
      class="main-bg"
      :style="{ 'background-color': !isView ? '#77797a' : '#fff' }"
    >
      <div class="container">
        <div style="width: 100%;height: 100%; " id="content">
          <div v-if="isView" id="img">
            <div
              id="line"
              style="left: 22%;top: 52%;background-color: transparent;overflow: hidden"
            >
              <div
                class="sucaitu vieWsucaitu"
                :style="{ width: '100%', height: '100%' }"
              >
                <vue-drag-resize-rotate
                  :w="item.w / WHproportion"
                  class-name="my-drag-resize-rotate"
                  :prevent-deactivation="false"
                  :h="item.h / WHproportion"
                  :x="item.x / WHproportion"
                  :z="item.zIndex / WHproportion"
                  :aspectRatio="false"
                  :isActive="false"
                  :y="item.y / WHproportion"
                  v-for="(item, index) in imgList"
                  :key="index"
                  :draggable="false"
                  :resizable="false"
                  :rotatable="false"
                  :angle="item.r"
                  style="pointer-events: auto;cursor: default"
                >
                  <div
                    ref="sucaitu-img"
                    :style="{ zIndex: item.zIndex }"
                    class="sucaitu-img img"
                    style="cursor: default"
                  >
                    <img
                      crossOrigin="anonymous"
                      :src="item.url"
                      :id="item.fileName + '_' + index"
                      alt=""
                      style="width: 100%;height: 100%"
                      class="sucaitu-img"
                    />
                  </div>
                </vue-drag-resize-rotate>
              </div>
              <div
                :class="{ 'no-border-grid': systemSetting.gridShow !== 1 }"
                :style="{
                  width: 480 + 'px',
                  height: 540 + 'px',
                }"
                class="grid"
                style="border-style:dashed"
              ></div>
            </div>
            <div style="width: 1040px;height: 100%;"></div>
            <!-- <img class="template-img" draggable="false" :src="img" alt="" /> -->
          </div>
          <div
            v-else
            style="width: 100%;height: 100%;background-color:#77797a ;position: relative;"
          >
            <div :style="{ background: gridBg }" id="line" class="boxShaow">
              <!-- <div
            class="sucaitu"
            :style="{ width: gridWH.w + 'px', height: gridWH.h + 'px' }"
          > -->

              <div class="left-bg-color">
                <el-color-picker
                  color-format="hex"
                  :predefine="predefineColors"
                  size="small"
                  v-model="gridBg"
                ></el-color-picker>
              </div>
              <div
                class="sucaitu"
                id="editView"
                :style="{ width: '100%', height: '100%' }"
              >
                <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)"
                  @drag="getDrag"
                  :angle="item.r"
                >
                  <div
                    ref="sucaituImg"
                    :class="{ active: index === selectIndex }"
                    :style="{ zIndex: item.zIndex }"
                    class="sucaitu-img img element"
                  >
                    <img
                      crossOrigin="anonymous"
                      :src="item.url"
                      id="imgBox"
                      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"
                id="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>
            <!-- <div class="imgBox" style=""></div> -->
          </div>
          <div
            class="print-tip"
            :style="{ left: isView ? '' : '22%' }"
            v-if="
              detail &&
                detail.mssWidth &&
                detail.mssHeight &&
                selectImgList.length
            "
          >
            <b style="color: green" v-if="hasSize"
              >该生产单无需拖动设计，直接打印</b
            >
            <b style="color: red" v-else>该生产单需要拖动设计打印</b>
          </div>
        </div>

        <img
          class="template-img"
          draggable="false"
          :src="img"
          alt=""
          style="position: absolute;width: 1000px;left: 3%;height: 100%;"
          :style="{ 'z-index': isView ? '0' : '-1' }"
        />
      </div>
    </div>
    <print-dialog
      :isDisabled="isView"
      :visible="printDialogShow"
      :imgList="imgList"
      :byPlatenSize="gridWH.v"
    >
      <i
        @click="changePrintDialogShow"
        :class="!printDialogShow ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
      ></i>
    </print-dialog>
  </div>
</template>

<style lang="less" scoped>
.print-tip {
  position: absolute;
  bottom: 16px;
  font-size: 24px;
  left: 25%;
}

.page-main {
  display: flex;
  flex: 1;
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.main-bg {
  flex: 1;
  // height: 100%;
  display: flex;

  // align-items: center;
  // justify-content: center;
}

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

  left: 5%;
  top: 50%;
  transform: translate(0, -50%);
  background-color: #f0f2f6;
}

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

  .grid-row {
    .grid-col {
      box-sizing: border-box;

      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;
  position: absolute;
  z-index: 2;
  left: 5%;

  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%;
  }

  .element {
    // position: relative;
  }

  // #imgBox {
  //   img {
  //     transition: clip-path 0.1s ease-in;
  //   }
  // }
  .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;
}

.showImg {
  max-height: 194px !important;
  text-align: center;
  width: auto !important;
}

.img-item {
  // height: 150px;
  width: 180px;
  height: 215px;
  overflow: hidden;
  padding: 5px;
  box-sizing: border-box;
  background: #ececec;
  display: inline-block;
  cursor: pointer;
  // margin-bottom: 20px;
  margin-right: 5px;

  box-sizing: border-box;

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

  span {
    font-size: 14px;
    // margin: 5px 0;
    width: 100%;
    color: black;
    display: inline-block; /* 使 span 成为块级元素，这样可以设置宽度 */
    // max-width: 270px; /* 限制宽度 */
    word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
    white-space: normal; /* 确保正常换行 */
    text-align: center;
  }
}

.sucaitu-img {
  position: relative;
}

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

  * {
    border-color: transparent !important;
  }
}

.el-checkbox-group {
  height: 100%;
  // border-top: 1px solid #ececec;
  margin-bottom: 25px;

  ::v-deep .el-checkbox {
    height: 100%;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid #ffffff;
    margin: 5px;
    // margin-bottom: 5px;
    .el-checkbox__input {
      position: absolute;
      top: 5px;
      left: 5px;
    }

    .el-checkbox__label {
      width: 100%;
      padding: 0;
      height: 100%;
      background-color: #e3e3e3;
    }
  }
}

.imgchecked {
  border: 1px solid #409eff !important;
}
</style>
<style lang="less" scoped>
.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;
}

.information-content {
  border: 1px solid #ececec;
  border-top: none;
  width: 100%;

  .main {
    margin: 5px;
    border: 1px solid #ececec;
    height: 100%;

    .effectPic {
      .img {
        width: 100%;
      }
    }
  }

  .pic-title {
    text-align: center;
  }
}

.product-information {
  border: 1px solid #ececec;
  border-top: none;

  .title {
    padding: 5px 10px;
  }

  .div-content {
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;

    .div-item {
      display: flex;
      flex: 50%;
      font-size: 12px;
      margin-bottom: 5px;

      .item-label {
        flex: 1;
        text-align: right;
      }

      .item-value {
        flex: 36%;
      }
    }
  }
}

.title {
  padding: 5px 10px;
  font-size: 20px;
  font-weight: 700;
}

.border-row {
  border-top: 1px solid #ececec;
  // border-bottom: 1px solid #ececec;
  display: flex;
  width: 100%;
  height: 100%;
  // align-items: center;
}

.full-width {
  width: 100%;
}

.text-center {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.border-col {
  border-left: 1px solid #ececec;
  border-right: 1px solid #ececec;
}

.boxShaow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 0, 0, 0.14),
    0 0 20px rgba(0, 0, 0, 0.12);
  position: relative;

  .left-bg-color {
    position: absolute;
    left: -57px;
  }
}

.vieWsucaitu {
  .active::before {
    display: none;
  }

  //::v-deep .drr:hover:before {
  //  outline: none;
  //}
}

// ::v-deep.el-table thead {
//   color: black;
// }
.fixed-border {
  position: fixed;
  z-index: 69;
}

.crop-canvas {
  position: absolute;
  top: 1px;
  left: 1px;
  pointer-events: none; /* 允许穿透操作 */
  z-index: 2; /* 确保在元素上方 */
}
</style>
