<script>
import fieldDescription from "./fieldDescription";
import { ipcRenderer } from "electron";
import axios from "axios";
import html2canvas from "html2canvas";

export default {
  data() {
    return {
      dialogShow: false,
      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: {
    visible() {
      this.dialogShow = this.visible;
    }
  },
  created() {
    this.getPrinter();
  },
  methods: {
    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) {
      var 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());
      });
    },
    async getPrintCmd() {
      if (this.imgList.length === 0)
        return this.$message.warning("素材不能为空");
      console.log(this.imgList[0]);
      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, r, w, h } = this.imgList[0];
      y = Number(y) - Number(h) / 2;
      x = Number(x) - Number(w) / 2;
      let x_mm = Number((x * 0.84183).toFixed(1));
      let w_mm = Number((w * 0.84183).toFixed(1));
      let h_mm = Number((h * 0.84183).toFixed(1));
      let y_mm = Number((y * 0.84183).toFixed(1));

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

      size = `${this.singleStr(Number(w_mm).toFixed(1))}${this.singleStr(
        Number(h_mm).toFixed(1)
      )}`;

      const bigNum = "0031131"; // 图像放大倍数 -R

      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
        }
      };
      let res = await this.$api.post("/toPrint", data);
      this.$message.success(res.msg);
    },
    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">
    <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: 100%;height: 50px"
      >打印</el-button
    >
  </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: 84%;
  display: flex;
  flex-direction: column;
  padding-top: 15px;
  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-bottom: 30px;
    margin-top: 30px;
    display: inline-block;
    left: -15px;
  }
}
.setting-right {
  box-sizing: border-box;
  padding: 20px;
  width: 50%;
  height: 100%;
  color: #333;
}
.setting-left {
  width: 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: 15px 0;
  margin-top: 20px;
  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 {
  background: #ececec;
  border-left: 1px solid gray;
  padding: 10px;
  position: fixed;
  box-sizing: border-box;
  right: 0;
  z-index: 4;
  bottom: 0;
  height: calc(100% - 51px);
  width: 430px;
}

</style>
<style>
.my-popper {
  background: rgba(0, 0, 0, 0.5) !important;
}
</style>
