<script>
import fieldDescription from "./fieldDescription";
import { ipcRenderer } from "electron";
import axios from "axios";
import html2canvas from "html2canvas";
import moment from "moment";
import pkg from "../../../../package.json";
import { pxToUnit } from "../../../utils/index";

export default {
  data() {
    return {
      dialogShow: true,
      pkg,
      axios,
      fieldDescription,
      printerList: [],
      printSettingList: [],
      printSettingVal: 0,
      description: "",
      printSettingSelectLabel: "default",
      printer: "",
      settingName: "",
      printInkList: [
        {
          label: "仅彩色油墨",
        },
        {
          label: "仅白色油墨",
        },
        {
          label: "彩色 + 白色油墨",
        },
        {
          label: "仅黑色油墨",
        },
      ],
      detailShow: false,
      showPopover: false,
      printSetting: {
        printer: "",
        xy: "",
        byInk: 2,
        byInkVolume: 1,
        byDoublePrint: 3,
        bEcoMode: false,
        bMaterialBlack: false,
        byHighlight: 5,
        printNum: 1,
        bFastMode: false,
        bUniPrint: false,
        bDivide: false,
        bPause: false,
        byMask: 3,
        bTransColor: false,
        byChoke: 2,
        minWhiteInkType: 0,
        bySaturation: 5,
        byBrightness: 5,
        byContrast: 5,
        iCyanBalance: 0,
        iMagentaBalance: 0,
        iBlackBalance: 0,
        iYellowBalance: 0,
        byMinWhite: 1,
        bMultiple: false,
      },
    };
  },
  props: {
    visible: {
      default: false,
      type: Boolean,
    },
    byPlatenSize: {
      default: 0,
      type: Number,
    },
    imgList: {
      default: () => [],
      type: Array,
    },
  },
  mounted() {
    this.$dataStore.set("default-print-setting", this.printSetting);
    this.getPrintSettingList(() => {
      let select = this.$dataStore.get("print-setting-select");
      console.log(this.$dataStore, "select");
      if (select) {
        this.printSettingSelectLabel = select;
        let index = this.printSettingList.findIndex(
          (el) => el.label === select
        );
        if (index >= 0) {
          this.printSettingVal = index;
          this.printSetting = JSON.parse(
            JSON.stringify(this.printSettingList[index].value)
          );
        } else {
          this.printSettingVal = 0;
          this.printSetting = JSON.parse(
            JSON.stringify(this.printSettingList[0].value)
          );
        }
      } else {
        this.printSettingVal = 0;
        this.printSetting = JSON.parse(
          JSON.stringify(this.printSettingList[0].value)
        );
      }
    });
  },
  computed: {
    inkNum() {
      return 200 + Number(this.printSetting.byHighlight) * 50 - 50;
    },
    defaultTime() {
      if ([6, 7].includes(Number(this.printSetting.byHighlight))) {
        return "1.25";
      } else if (this.printSetting.byHighlight < 6) {
        return "1.00";
      } else {
        return "1.5";
      }
    },
  },
  watch: {
    printSetting: {
      handler() {
        this.$dataStore.set("print-setting", this.printSetting);
      },
      deep: true,
      immediate: true,
    },
    visible() {
      this.dialogShow = this.visible;
    },
  },
  created() {
    this.getPrinter();
  },
  methods: {
    pxToUnit,
    delSetting() {
      this.$confirm(`确定删除该预设？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$dataStore.delete(
          this.printSettingList[this.printSettingVal].label + "-print-setting"
        );
        this.getPrintSettingList();
        this.printSettingVal = 0;
      });
    },
    getPrintSettingList(callback) {
      let arr = [];
      for (let k in this.$dataStore.store) {
        if (k.includes("-print-setting")) {
          arr.push({
            label: k.replace("-print-setting", ""),
            value: this.$dataStore.get(k),
          });
        }
      }
      this.printSettingList = arr;
      callback && callback();
    },
    printSettingChange(v) {
      let label = this.printSettingList[v].label;
      this.$dataStore.set("print-setting-select", label);
      this.printSetting = JSON.parse(
        JSON.stringify(this.printSettingList[v].value)
      );
    },
    saveSetting() {
      if (this.settingName.trim() === "") {
        return this.$message.warning("预设名称不能为空");
      }
      if (this.printSettingList.find((el) => el.label === this.settingName)) {
        return this.$message.warning("预设名称不能重复");
      }
      this.$dataStore.set(
        `${this.settingName}-print-setting`,
        this.printSetting
      );
      this.showPopover = false;
      this.printSettingVal = this.printSettingList.length;
      this.getPrintSettingList();
    },
    openPopover() {
      this.showPopover = true;
      this.settingName = "";
    },
    singleStr(str) {
      if (Number(str) >= 0) {
        str = str.toString().replace(".", "");
        if (str.length >= 4) {
          str = str.slice(0, 5);
        } else if (str.length === 3) {
          str = "0" + str;
        } else if (str.length === 2) {
          str = "00" + str;
        } else if (str.length === 1) {
          str = "000" + str;
        }
      } else {
        str = str
          .toString()
          .replace(".", "")
          .replace("-", "");
        if (str.length >= 4) {
          str = str.slice(0, 5);
        } else if (str.length === 3) {
          str = "0" + str;
        } else if (str.length === 2) {
          str = "00" + str;
        } else if (str.length === 1) {
          str = "000" + str;
        }
        str = "-" + str;
      }
      // 不足四位前面用0补齐

      console.log(str);
      return str;
    },

    dataURLtoBlob(dataurl) {
      const arr = dataurl.split(",");
      //注意base64的最后面中括号和引号是不转译的
      var _arr = arr[1].substring(0, arr[1].length - 2);
      var mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(_arr),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], {
        type: mime,
      });
    },

    moreImageCmd(arr) {
      var canvas1 = document.createElement("canvas");
      let _canvas = document.getElementsByClassName("sucaitu")[0]; //目标块
      var bodyW = parseInt(window.getComputedStyle(_canvas).width);
      var bodyH = parseInt(window.getComputedStyle(_canvas).height);
      canvas1.width = bodyW;
      canvas1.height = bodyH;
      canvas1.style.width = bodyW + "px";
      canvas1.style.height = bodyH + "px";
      canvas1.style.background = "transparent";
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      var context = canvas1.getContext("2d");
      // context.scale(2, 2);
      let that = this;
      html2canvas(_canvas, {
        canvas: canvas1,
        backgroundColor: null,
        useCORS: true,
        allowTaint: true,
      }).then(async function(canvas) {
        let dataURL = canvas.toDataURL("image/png");
        let pageBlob = that.dataURLtoBlob(dataURL);
        let params = new FormData();
        let fileOfBlob = new File([pageBlob], new Date().getTime() + ".jpg");
        params.append("file", fileOfBlob);

        let { data } = await that.$api.post("/uploadImage", params, {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        });
        let w_mm = Number((canvas1.width * 0.84183).toFixed(1));
        let h_mm = Number((canvas1.height * 0.84183).toFixed(1));
        let size = `${that.singleStr(Number(w_mm).toFixed(1))}${that.singleStr(
          Number(h_mm).toFixed(1)
        )}`;
        await that.sendCmd(data.fileName, size, "00000000", 0);
        //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
        // document.querySelector(".down").setAttribute('href', canvas.toDataURL());
      });
    },
    return_data() {
      let dom_id = `${this.imgList[0].fileName}_0`;

      const image = document.getElementById(dom_id);
      const line = document.getElementById("line");

      // 使用getBoundingClientRect获取更精确的位置信息
      const imageRect = image.getBoundingClientRect();
      const lineRect = line.getBoundingClientRect();

      // 计算image相对于line的坐标位置
      const relativeX = imageRect.left - lineRect.left;
      const relativeY = imageRect.top - lineRect.top;
      console.log(dom_id);
      // 获取图片的宽高
      let w = image.clientWidth; // 图片宽
      let h = image.clientHeight; // 图片高
      console.log(w, h, "w,h");
      const x = relativeX;
      const y = relativeY;
      const r = this.imgList[0].r;
      console.log(w, h);
      const x_mm = this.pxToUnit(x, "mm");
      const y_mm = this.pxToUnit(y, "mm");
      const w_mm = this.pxToUnit(w, "mm");
      const h_mm = this.pxToUnit(h, "mm");
      // console.log({
      //   x: Number((x_mm - 0.8).toFixed(1)),
      //   y: Number((y_mm - 0.9).toFixed(1)),
      //   w: Number((w_mm - 0.3).toFixed(1)),
      //   h: Number((h_mm - 0.3).toFixed(1)),
      //   r
      // });
      return {
        x: x_mm,
        y: y_mm,
        w: w_mm,
        h: h_mm,
        r,
      };
      // 返回计算结果
      // return {
      //   x: Number((x_mm - 0.8).toFixed(1)),
      //   y: Number((y_mm - 0.9).toFixed(1)),
      //   w: Number((w_mm - 0.3).toFixed(1)),
      //   h: Number((h_mm - 0.3).toFixed(1)),
      //   r
      // }
    },
    numberToStr4(num) {
      num = Number(num);
      num = num.toFixed(1);
      num = num.toString().replace(".", "");

      if (num.includes("-")) {
        num = num.replace("-", "").slice(0, 4);
        num = num.padStart(4, "0");
        num = "-" + num;
      } else {
        num = num.padStart(4, "0");
        num = num.slice(0, 4);
      }

      return num;
    },
    async getPrintCmd() {
      if (this.imgList.length === 0)
        return this.$message.warning("素材不能为空");
      if (this.imgList.length > 1) {
        let dom = document.getElementsByClassName("drr");
        for (let i = 0; i < dom.length; i++) {
          dom[i].classList.remove("active");
          dom[i].classList.add("inactive");
        }
        setTimeout(() => {
          this.moreImageCmd(this.imgList);
        }, 500);

        return;
      }
      let { x, y, w, h, r } = this.return_data();
      x = this.numberToStr4(x);
      y = this.numberToStr4(y);
      w = this.numberToStr4(w);
      h = this.numberToStr4(h);
      console.log("print", w, h);

      if (w > 4100 || h > 4500) {
        return this.$message.warning(
          "打印图片素材宽度不能超过410mm,长度不能超过450mm"
        );
      }

      // console.log(x, "x");
      // console.log(y, "y");
      // console.log(w, "w");
      // console.log(h, "h");
      r = Number(r).toFixed(0);
      const imgFileName = this.imgList[0].fileName;
      let position = ""; // 位置
      let size = ""; // 图像大小
      if (Number(x) < 0 || Number(y) < 0) {
        position = `"${x},${y}"`;
      } else {
        position = `${x}${y}`;
      }

      size = `${w}${h}`;
      console.log(position, size);
      await this.sendCmd(imgFileName, size, position, r);
    },
    async sendCmd(imgFileName, size, position, r) {
      const whitePrint = [1, 2].includes(this.printSetting.byInk) ? 1 : 0; // 白色打印
      let cmd = `GTXproCMD.exe print -X "${`Profile\\${imgFileName.replace(
        ".png",
        ""
      )}.xml`}" -I "${"Input\\" +
        imgFileName}" -A "Output\\${imgFileName.replace(
        ".png",
        ""
      )}.arxp" -S ${size} -L ${position} -D ${r} -W ${whitePrint}`;
      let print_cmd = `GTXproCMD.exe send -A "Output\\${imgFileName.replace(
        ".png",
        ""
      )}.arxp" -P "${this.printer}`;
      let data = {
        ...this.printSetting,
        ...{
          byPlatenSize: this.byPlatenSize,
          cmd,
          fileName: imgFileName,
          print_cmd,
        },
      };

      await this.toWritePrintLog(data);
      let res = await this.$api.post("/toPrint", data);
      this.$message.success(res.msg);
    },
    async toWritePrintLog(send_api_data) {
      let head_setting = this.$dataStore.get("setting");
      let position_before_px = this.$dataStore.get("position_before_px"); // 图片的位置信息 px
      let position_after_px = this.$dataStore.get("position_after_px"); // 图片根据单位转换后的px
      let position_unit = this.$dataStore.get("position_unit"); // 图片根据单位转换后的px
      let print_time = moment(new Date()).format("YYYY-MM-DD HH:mm:ss"); // 打印的时间
      let production_no = this.$dataStore.get("production_no"); // 打印的单号
      let print_setting = JSON.parse(JSON.stringify(this.printSetting)); // 打印的设置
      let version = this.pkg.version;
      let data = {
        head_setting,
        version,
        print_setting,
        production_no,
        print_time,
        position_unit,
        position_after_px,
        position_before_px,
        send_api_data,
      };
      await this.$api.post("/writePrintLog", data);
    },
    async getPrinter() {
      ipcRenderer.send("allPrint");
      ipcRenderer.once("printName", (event, data) => {
        console.log(data, 996); // data就是返回的打印机数据列表
        this.printerList = data;
        if (this.printerList.length > 0) {
          this.printer = this.printerList[0].name;
        }
      });
    },

    setDetailShow() {
      this.detailShow = !this.detailShow;
    },
  },
};
</script>

<template>
  <div class="print-div">
    <div :class="dialogShow ? 'open-expand' : 'close-expand'">
      <slot></slot>
    </div>
    <div v-show="dialogShow" class="print-content">
      <el-form
        label-width="170px"
        label-position="left"
        size="mini"
        :model="printSetting"
      >
        <el-form-item label-width="55px" label="打印机">
          <div class="flex-row">
            <el-select v-model="printer" clearable>
              <el-option
                v-for="(it, i) in printerList"
                :key="i"
                :label="it.name"
                :value="it.name"
              ></el-option>
            </el-select>
            <el-button
              title="刷新"
              @click="getPrinter"
              style="margin-left: 10px"
              icon="el-icon-refresh"
            ></el-button>
          </div>
        </el-form-item>
        <el-form-item label-width="50px" label="预设">
          <div class="flex-row">
            <el-select
              @change="printSettingChange"
              filterable
              v-model="printSettingVal"
              clearable
            >
              <el-option
                v-for="(it, i) in printSettingList"
                :key="i"
                :value="i"
                :label="it.label"
              ></el-option>
            </el-select>
            <div style="margin-left: 15px; display: flex" class="save-btn">
              <el-popover
                placement="bottom"
                width="200"
                v-model="showPopover"
                trigger="manual"
              >
                <el-button
                  style="margin-right: 10px"
                  @click="openPopover"
                  slot="reference"
                  type="primary"
                  >保存预设
                </el-button>
                <div class="save-setting">
                  <el-input
                    size="large"
                    maxlength="10"
                    v-model="settingName"
                    placeholder="预设名称："
                  ></el-input>
                  <div class="save-footer">
                    <el-button size="medium" @click="showPopover = false"
                      >取消
                    </el-button>
                    <el-button
                      @click="saveSetting"
                      :disabled="settingName === ''"
                      size="medium"
                      type="primary"
                      >保存
                    </el-button>
                  </div>
                </div>
              </el-popover>

              <el-button
                :disabled="printSettingVal === 0"
                @click="delSetting"
                type="danger"
                >删除
              </el-button>
            </div>
          </div>
        </el-form-item>
        <div class="detail-setting">
          <div class="setting-left">
            <div class="left-block-item">
              <b class="setting-title">基本设置</b>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['byInk'] || ''"></div>
                </template>
                <el-form-item label="油墨选择">
                  <el-select v-model="printSetting.byInk" clearable>
                    <el-option
                      :label="it.label"
                      :value="i"
                      :key="i"
                      v-for="(it, i) in printInkList"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-tooltip>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['bEcoMode'] || ''"></div>
                </template>
                <el-form-item v-if="printSetting.byInk === 2" label="模式">
                  <el-select v-model="printSetting.bEcoMode" clearable>
                    <el-option label="通常" :value="false"></el-option>
                    <el-option label="白色油墨削减" :value="true"></el-option>
                  </el-select>
                </el-form-item>
              </el-tooltip>

              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['bMaterialBlack'] || ''"></div>
                </template>
                <div v-if="printSetting.byInk === 2">
                  <el-form-item label="利用底材的黑色">
                    <el-switch
                      v-model="printSetting.bMaterialBlack"
                    ></el-switch>
                  </el-form-item>
                </div>
              </el-tooltip>

              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['bMultiple'] || ''"></div>
                </template>
                <div v-if="printSetting.byInk !== 1">
                  <el-form-item label="彩色的复合路径打印">
                    <el-switch v-model="printSetting.bMultiple"></el-switch>
                  </el-form-item>
                </div>
              </el-tooltip>
            </div>
            <div
              class="left-block-item"
              v-if="[0, 3].includes(printSetting.byInk)"
            >
              <b class="setting-title">彩色油墨设置</b>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['byInkVolume'] || ''"></div>
                </template>
                <div>
                  <el-form-item label="油墨量">
                    <div class="flex-row">
                      <el-slider
                        :step="1"
                        :min="1"
                        :max="10"
                        v-model="printSetting.byInkVolume"
                      ></el-slider>
                      <span>{{ printSetting.byInkVolume }}</span>
                    </div>
                  </el-form-item>
                </div>
              </el-tooltip>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['byDoublePrint'] || ''"></div>
                </template>
                <div>
                  <el-form-item label="2次打印">
                    <div class="flex-row">
                      <el-slider
                        :step="1"
                        :min="0"
                        :max="3"
                        v-model="printSetting.byDoublePrint"
                      ></el-slider>
                      <span>{{ printSetting.byDoublePrint }}</span>
                    </div>
                  </el-form-item>
                </div>
              </el-tooltip>
            </div>
            <div
              class="left-block-item"
              v-if="[1, 2].includes(printSetting.byInk)"
            >
              <b class="setting-title">白色油墨设置</b>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['byHighlight'] || ''"></div>
                </template>
                <div>
                  <el-form-item label="高光">
                    <div class="flex-row">
                      <el-slider
                        :step="1"
                        :min="1"
                        :max="9"
                        v-model="printSetting.byHighlight"
                      ></el-slider>
                      <span>{{ printSetting.byHighlight }}</span>
                    </div>
                  </el-form-item>
                </div>
              </el-tooltip>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['byMask'] || ''"></div>
                </template>
                <div>
                  <el-form-item label="遮光">
                    <div class="flex-row">
                      <el-slider
                        :step="1"
                        :min="1"
                        :max="5"
                        v-model="printSetting.byMask"
                      ></el-slider>
                      <span>{{ printSetting.byMask }}</span>
                    </div>
                  </el-form-item>
                </div>
              </el-tooltip>

              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['bFastMode'] || ''"></div>
                </template>
                <div v-if="[2].includes(printSetting.byInk)">
                  <el-form-item label="白色高速打印">
                    <el-switch v-model="printSetting.bFastMode"></el-switch>
                  </el-form-item>
                </div>
              </el-tooltip>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['bDivide'] || ''"></div>
                </template>
                <div>
                  <el-form-item label="白色分次打印">
                    <el-switch v-model="printSetting.bDivide"></el-switch>
                  </el-form-item>
                </div>
              </el-tooltip>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['bPause'] || ''"></div>
                </template>
                <div v-if="[2].includes(printSetting.byInk)">
                  <el-form-item label="白色/彩色个别打印">
                    <el-switch v-model="printSetting.bPause"></el-switch>
                  </el-form-item>
                </div>
              </el-tooltip>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['bTransColor'] || ''"></div>
                </template>
                <div>
                  <el-form-item label="透明色">
                    <el-switch v-model="printSetting.bTransColor"></el-switch>
                  </el-form-item>
                </div>
              </el-tooltip>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['byChoke'] || ''"></div>
                </template>
                <div v-if="[2].includes(printSetting.byInk)">
                  <el-form-item label="白色油墨的削减范围">
                    <div class="flex-row">
                      <el-slider
                        :step="1"
                        :min="0"
                        :max="10"
                        v-model="printSetting.byChoke"
                      ></el-slider>
                      <span>{{ printSetting.byChoke }}</span>
                    </div>
                  </el-form-item>
                </div>
              </el-tooltip>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['byMinWhite'] || ''"></div>
                </template>
                <div v-if="[2].includes(printSetting.byInk)">
                  <el-form-item label="最小白色油墨量">
                    <div class="flex-column">
                      <el-select v-model="printSetting.minWhiteInkType">
                        <el-option label="通常" :value="0"></el-option>
                        <el-option label="特殊" :value="1"></el-option>
                      </el-select>
                      <div class="slider flex-row">
                        <el-slider
                          :step="1"
                          :min="1"
                          :max="printSetting.minWhiteInkType === 1 ? 6 : 3"
                          v-model="printSetting.byMinWhite"
                        ></el-slider>
                        <span>{{ printSetting.byMinWhite }}</span>
                      </div>
                    </div>
                  </el-form-item>
                </div>
              </el-tooltip>
            </div>
            <div v-show="detailShow" class="left-block-item">
              <b class="setting-title">画质设置</b>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['bySaturation'] || ''"></div>
                </template>
                <div>
                  <el-form-item label="饱和度">
                    <div class="flex-row">
                      <el-slider
                        :step="1"
                        :min="0"
                        :max="40"
                        v-model="printSetting.bySaturation"
                      ></el-slider>
                      <span>{{ printSetting.bySaturation }}</span>
                    </div>
                  </el-form-item>
                </div>
              </el-tooltip>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['byBrightness'] || ''"></div>
                </template>
                <div>
                  <el-form-item label="亮度">
                    <div class="flex-row">
                      <el-slider
                        :step="1"
                        :min="0"
                        :max="40"
                        v-model="printSetting.byBrightness"
                      ></el-slider>
                      <span>{{ printSetting.byBrightness }}</span>
                    </div>
                  </el-form-item>
                </div>
              </el-tooltip>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['byContrast'] || ''"></div>
                </template>
                <div>
                  <el-form-item label="对比度">
                    <div class="flex-row">
                      <el-slider
                        :step="1"
                        :min="0"
                        :max="40"
                        v-model="printSetting.byContrast"
                      ></el-slider>
                      <span>{{ printSetting.byContrast }}</span>
                    </div>
                  </el-form-item>
                </div>
              </el-tooltip>

              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['bUniPrint'] || ''"></div>
                </template>
                <div v-if="[1].includes(printSetting.byInk)">
                  <el-form-item label="单向打印">
                    <el-switch v-model="printSetting.bUniPrint"></el-switch>
                  </el-form-item>
                </div>
              </el-tooltip>
            </div>
            <div
              v-if="detailShow && ![1].includes(printSetting.byInk)"
              class="left-block-item"
            >
              <b class="setting-title">彩色平衡</b>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['iCyanBalance'] || ''"></div>
                </template>
                <div v-if="![3].includes(printSetting.byInk)">
                  <el-form-item label="青色">
                    <div class="flex-row">
                      <el-slider
                        :step="1"
                        :min="-5"
                        :max="5"
                        v-model="printSetting.iCyanBalance"
                      ></el-slider>
                      <span>{{ printSetting.iCyanBalance }}</span>
                    </div>
                  </el-form-item>
                </div>
              </el-tooltip>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['iMagentaBalance'] || ''"></div>
                </template>
                <div v-if="![3].includes(printSetting.byInk)">
                  <el-form-item label="红色">
                    <div class="flex-row">
                      <el-slider
                        :step="1"
                        :min="-5"
                        :max="5"
                        v-model="printSetting.iMagentaBalance"
                      ></el-slider>
                      <span>{{ printSetting.iMagentaBalance }}</span>
                    </div>
                  </el-form-item>
                </div>
              </el-tooltip>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['iYellowBalance'] || ''"></div>
                </template>
                <div v-if="![3].includes(printSetting.byInk)">
                  <el-form-item label="黄色">
                    <div class="flex-row">
                      <el-slider
                        :step="1"
                        :min="-5"
                        :max="5"
                        v-model="printSetting.iYellowBalance"
                      ></el-slider>
                      <span>{{ printSetting.iYellowBalance }}</span>
                    </div>
                  </el-form-item>
                </div>
              </el-tooltip>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['iBlackBalance'] || ''"></div>
                </template>
                <div>
                  <el-form-item label="黑色">
                    <div class="flex-row">
                      <el-slider
                        :step="1"
                        :min="-5"
                        :max="5"
                        v-model="printSetting.iBlackBalance"
                      ></el-slider>
                      <span>{{ printSetting.iBlackBalance }}</span>
                    </div>
                  </el-form-item>
                </div>
              </el-tooltip>
              <el-tooltip placement="left" popper-class="my-popper">
                <template slot="content">
                  <div v-html="fieldDescription['bUniPrint'] || ''"></div>
                </template>
                <div>
                  <el-form-item label="单向打印">
                    <el-switch v-model="printSetting.bUniPrint"></el-switch>
                  </el-form-item>
                </div>
              </el-tooltip>
            </div>
            <el-button size="small" @click="setDetailShow"
              >{{ detailShow ? "关闭详细设置" : "打开详细设置" }}...
            </el-button>
          </div>
        </div>
      </el-form>
      <div class="bottom-info flex-row">
        <div class="info">
          <el-tooltip placement="left" popper-class="my-popper">
            <template slot="content">
              <div v-html="fieldDescription['printTime'] || ''"></div>
            </template>
            <div class="info-item">
              <span>打印时间</span>
              <b>×{{ defaultTime }}</b>
            </div>
          </el-tooltip>
          <el-tooltip placement="left" popper-class="my-popper">
            <template slot="content">
              <div v-html="fieldDescription['whiteInk'] || ''"></div>
            </template>
            <div class="info-item">
              <span>白色油墨量</span>
              <b>{{ inkNum }}%</b>
            </div>
          </el-tooltip>
        </div>
        <div class="btn">
          <el-input
            size="small"
            style="width: 100px"
            oninput="value=value.replace(/[^\-?\d]/g,'')"
            v-model="printSetting.printNum"
          ></el-input>

          <span>张</span>
        </div>
      </div>
      <el-button
        @click="getPrintCmd"
        type="primary"
        style="width: 98%; height: 50px"
        >打印
      </el-button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.flex-row {
  display: flex;
  align-items: center;
  display: flex;
  align-items: center;

  span {
    margin-left: 10px;
  }

  .el-slider {
    flex: 1;
    flex-shrink: 0;
    margin: 0 10px;
  }
}

.el-form {
  height: 87%;
  display: flex;
  flex-direction: column;
  padding-top: 0;
  border-top: 1px solid #ececec;
}

.detail-setting {
  border-top: 2px solid transparent;
  display: flex;
  background-color: #ececec;
  align-items: flex-start;
  flex: 1;
  flex-shrink: 0;
  overflow: auto;
}

.left-block-item {
  .setting-title {
    font-weight: bold;
    font-size: 20px;
    color: #409eff;
    position: relative;
    margin: 15px 0;
    display: inline-block;
    left: -15px;
  }
}

.setting-right {
  box-sizing: border-box;
  padding: 20px;
  width: 50%;
  height: 100%;
  color: #333;
}

.setting-left {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px 30px;
  background-color: white;
}

.fixed-top {
  position: absolute;
  word-break: break-all;
  max-width: 44%;
}

.bottom-info {
  padding: 5px 0;
  margin-top: 10px;
  font-size: 14px;
  justify-content: space-between;
  border-top: 1px solid #ececec;
}

.info {
  width: 62%;
  display: flex;
  justify-content: space-between;
}

.info-item {
  span {
    margin-right: 5px;
  }
}

.save-setting {
  display: flex;
  flex-direction: column;
}

.save-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.print-div {
  position: fixed;
  box-sizing: border-box;
  right: 0;

  z-index: 4;
  bottom: 0;
  height: calc(100% - 51px);

  .print-content {
    background: #ececec;
    border-left: 1px solid gray;
    height: 100%;
    padding: 10px;
    display: flex;
    width: 430px;
    flex-direction: column;
  }
}

.close-expand {
  position: fixed;
  right: 0;
  cursor: pointer;
  top: 50%;
  width: 20px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  height: 40px;
  display: flex;
  align-items: center;
  background-color: blueviolet;
  color: white;
  justify-content: center;

  i {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.open-expand {
  position: absolute;
  left: -20px;
  cursor: pointer;
  top: 50%;
  width: 20px;

  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  height: 40px;
  display: flex;
  align-items: center;
  background-color: blueviolet;
  color: white;
  justify-content: center;

  i {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

::v-deep .el-form-item {
  margin-bottom: 9px;
}
</style>
<style>
.my-popper {
  background: rgba(0, 0, 0, 0.5) !important;
}
</style>
