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

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: 1,
        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
    }
  },
  mounted() {
    this.$dataStore.set('default-print-setting', this.printSetting)
    let select = this.$dataStore.get('print-setting-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'
      }
    },
    imgList() {
      return this.$store.state.imgList
    }
  },
  watch: {
    visible() {
      this.dialogShow = this.visible
    }
  },
  created() {
    this.getPrinter()
    this.getPrintSettingList()

  },
  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() {
      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
    },
    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
    },
    async getPrintCmd() {
      if (this.imgList.length === 0) return this.$message.warning('素材不能为空')
      console.log(this.imgList[0])
      let {x, y, r, w, h} = this.imgList[0]

      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

      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 scoped>
.flex-row {
  display: flex;
  align-items: center;

}

.flex-row {
  display: flex;
  align-items: center;
}

.flex-row span {
  margin-left: 10px;
}

.flex-row .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>