<template>
  <el-card>
    <div style="display: flex; flex-direction: column" class="print-oper">
      <div>
        <el-button-group>
          <template v-for="(value, type) in paperTypes">
            <el-button
              size="mini"
              :type="curPaperType === type ? 'primary' : ' '"
              @click="setPaper(type, value)"
              :key="type"
            >
              {{ type }}
            </el-button>
          </template>
          <el-popover
            v-model="paperPopVisible"
            title="设置纸张宽高(mm)"
            trigger="click"
            width="256"
          >
            <base-input-number
              v-model="paperWidth"
              style="width: 100px !important; text-align: center"
              placeholder="宽(mm)"
            />
            <el-input
              style="
                width: 30px !important;
                border-left: 0;
                pointer-events: none;
                backgroundcolor: #fff;
              "
              placeholder="~"
              disabled
            />
            <base-input-number
              v-model="paperHeight"
              style="width: 100px !important; text-align: center; border-left: 0"
              placeholder="高(mm)"
            />
            <el-button
              type="primary"
              class="button-sty"
              style="width: 100%; margin-top: 8px"
              @click="otherPaper"
              >确定
            </el-button>
            <el-button
              size="mini"
              :type="'other' === curPaperType ? 'primary' : ''"
              slot="reference"
              class="button-sty"
            >
              自定义纸张
            </el-button>
          </el-popover>
        </el-button-group>
        <el-button
          class="button-zoom"
          icon="el-icon-zoom-out"
          @click="changeScale(false)"
        ></el-button>
        <el-input-number
          :value="scaleValue"
          :min="scaleMin"
          :max="scaleMax"
          :step="0.1"
          disabled
          style="width: 70px"
          class="noButton"
          :formatter="(value) => `${(value * 100).toFixed(0)}%`"
          :parser="(value) => value.replace('%', '')"
        />
        <el-button
          class="button-zoom"
          icon="el-icon-zoom-in"
          @click="changeScale(true)"
        ></el-button>
        <el-button
          type="primary"
          class="button-sty"
          icon="el-icon-refresh-right"
          @click="rotatePaper()"
          plain
          >旋转
        </el-button>
        <el-button type="warning" class="button-sty" icon="el-icon-view" @click="preView"
          >预览</el-button
        >
        <el-popover width="180" v-model="visible" @confirm="clearPaper">
          <p><i class="el-icon-warning-outline f-red"></i> 是否确认清空?？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="
                clearPaper();
                visible = false;
              "
              >确定清空</el-button
            >
          </div>
          <el-button
            type="danger"
            class="button-sty"
            icon="el-icon-close"
            slot="reference"
            style="margin: 0 10px"
          >
            清空
          </el-button>
        </el-popover>
        <el-button
          type="primary"
          class="button-sty"
          icon="el-icon-download"
          @click="importDefaultTemplate1"
          >导入默认模板1
        </el-button>
        <el-button
          type="primary"
          class="button-sty"
          icon="el-icon-download"
          @click="importDefaultTemplate2"
          >导入默认模板2
        </el-button>
        <div class="hiprint-printPagination"></div>
        <!--		<el-radio-group size="mini">
              <el-radio-button @click="setElsAlign('left')" label="左对齐">
                <span class="glyphicon glyphicon-object-align-left"></span>
              </el-radio-button>
              <el-radio-button @click="setElsAlign('vertical')" label="居中">
                <span class="glyphicon glyphicon-object-align-vertical"></span>
              </el-radio-button>
              <el-radio-button @click="setElsAlign('right')" label="右对齐">
                <span class="glyphicon glyphicon-object-align-right"></span>
              </el-radio-button>
              <el-radio-button @click="setElsAlign('top')" label="顶部对齐">
                <span class="glyphicon glyphicon-object-align-top"></span>
              </el-radio-button>
              <el-radio-button @click="setElsAlign('horizontal')" label="垂直居中">
                <span class="glyphicon glyphicon-object-align-horizontal"></span>
              </el-radio-button>
              <el-radio-button @click="setElsAlign('bottom')" label="底部对齐">
                <span class="glyphicon glyphicon-object-align-bottom"></span>
              </el-radio-button>
              <el-radio-button @click="setElsAlign('distributeHor')" label="横向分散">
                <span class="glyphicon glyphicon-resize-horizontal"></span>
              </el-radio-button>
              <el-radio-button @click="setElsAlign('distributeVer')" label="纵向分散">
                <span class="glyphicon glyphicon-resize-vertical"></span>
              </el-radio-button>
            </el-radio-group>-->
      </div>
      <!--	  <div style="margin-bottom: 10px">


              <el-button type="primary" class="button-sty" icon="el-icon-printer" @click="print">
                直接打印
              </el-button>
              <el-button type="primary" class="button-sty" @click="onlyPrint">
                Api单独打印
              </el-button>
              <el-button type="primary" class="button-sty" @click="onlyPrint2">
                Api单独直接打印
              </el-button>


              &lt;!&ndash; <json-view :template="template"/> &ndash;&gt;
              <el-button type="primary" class="button-sty" @click="ippPrintAttr">
                ipp获取 打印机 参数情况
              </el-button>
              <el-button type="primary" class="button-sty" @click="ippPrintTest">
                ipp打印测试
              </el-button>
              <el-button type="primary" class="button-sty" @click="ippRequestTest">
                ipp请求 获取 打印机 参数情况
              </el-button>
              <el-button type="primary" class="button-sty" @click="ippRequestPrint">
                ipp请求 打印测试
              </el-button>

              <el-button type="primary" class="button-sty" @click="getSelectEls">
                获取选中元素
              </el-button>
              <el-button type="primary" class="button-sty" @click="updateFontSize">
                选中元素字体12pt
              </el-button>
              <el-button type="primary" class="button-sty" @click="updateFontWeight">
                选中元素字体Bolder
              </el-button>
              <el-button type="primary" class="button-sty" @click="setElsSpace(true)"> 水平间距10
              </el-button>
              <el-button type="primary" class="button-sty" @click="setElsSpace(false)"> 垂直间距10
              </el-button>

            </div>-->
      <!--	  <div>
            <el-input style="width:240px" v-model:value="jsonIn" @pressEnter="updateJson" type="textarea"   :rows="2"
                        placeholder="复制json模板到此后 点击右侧更新"
                        allow-clear/>
            <el-button type="primary" class="button-sty" @click="updateJson">
              更新json模板
            </el-button>
            <el-button type="primary" class="button-sty" @click="exportJson">
              导出json模板到 textArea
            </el-button>
            <el-input style="width:240px" v-model:value="jsonOut" placeholder="点击左侧导出json" allow-clear type="textarea"   :rows="2"/>
          </div>-->
    </div>
    <el-row>
      <el-col :span="4">
        <el-card>
          <el-row>
            <el-col :span="24" class="rect-printElement-types hiprintEpContainer">
              <el-row class="drag_item_title">拖拽组件列表</el-row>
              <el-row>
                <el-col :span="8" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.text" style>
                      <span
                        class="glyphicon glyphicon-text-width"
                        aria-hidden="true"
                      ></span>
                      <p class="glyphicon-class">文本</p>
                    </a>
                  </div>
                </el-col>
                <el-col :span="8" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.image" style>
                      <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
                      <p class="glyphicon-class">图片</p>
                    </a>
                  </div>
                </el-col>
                <el-col :span="8" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.longText">
                      <span
                        class="glyphicon glyphicon-subscript"
                        aria-hidden="true"
                      ></span>
                      <p class="glyphicon-class">长文</p>
                    </a>
                  </div>
                </el-col>
                <el-col :span="8" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.table" style>
                      <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
                      <p class="glyphicon-class">表格</p>
                    </a>
                  </div>
                </el-col>
                <el-col :span="8" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.emptyTable" style>
                      <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
                      <p class="glyphicon-class">空白表格</p>
                    </a>
                  </div>
                </el-col>
                <el-col :span="8" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.html" style="">
                      <span class="glyphicon glyphicon-header" aria-hidden="true"></span>
                      <p class="glyphicon-class">html</p>
                    </a>
                  </div>
                </el-col>
                <el-col :span="8" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.customText" style>
                      <span
                        class="glyphicon glyphicon-text-width"
                        aria-hidden="true"
                      ></span>
                      <p class="glyphicon-class">自定义</p>
                    </a>
                  </div>
                </el-col>

                <el-col :span="8" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.barcode" style>
                      <span
                        class="glyphicon iconfont icon-bar-code-full"
                        aria-hidden="true"
                      ></span>
                      <p class="glyphicon-class">条形码</p>
                    </a>
                  </div>
                </el-col>
                <el-col :span="8" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.qrcode" style>
                      <span
                        class="glyphicon iconfont icon-erweima"
                        aria-hidden="true"
                      ></span>
                      <p class="glyphicon-class">二维码</p>
                    </a>
                  </div>
                </el-col>
              </el-row>
              <el-row class="drag_item_title">辅助</el-row>
              <el-row>
                <el-col :span="8" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.hline" style>
                      <span
                        class="glyphicon glyphicon-resize-horizontal"
                        aria-hidden="true"
                      ></span>
                      <p class="glyphicon-class">横线</p>
                    </a>
                  </div>
                </el-col>
                <el-col :span="8" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.vline" style>
                      <span
                        class="glyphicon glyphicon-resize-vertical"
                        aria-hidden="true"
                      ></span>
                      <p class="glyphicon-class">竖线</p>
                    </a>
                  </div>
                </el-col>
                <el-col :span="8" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.rect">
                      <span
                        class="glyphicon glyphicon-unchecked"
                        aria-hidden="true"
                      ></span>
                      <p class="glyphicon-class">矩形</p>
                    </a>
                  </div>
                </el-col>
                <el-col :span="8" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.oval">
                      <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
                      <p class="glyphicon-class">椭圆</p>
                    </a>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="15">
        <el-card class="card-design">
          <div id="hiprint-printTemplate" class="hiprint-printTemplate"></div>
        </el-card>
      </el-col>
      <el-col :span="5" class="params_setting_container">
        <el-card>
          <el-row class="hinnn-layout-sider">
            <div id="PrintElementOptionSetting"></div>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- 预览 -->
    <print-preview ref="preView" />
  </el-card>
</template>

<script>
import mixins from "./mixins.js";
export default {
  name: "printDesign",
  mixins: [mixins],
};
</script>
<style src="../../css/bootstrap.min.css" scoped></style>
<style lang="scss" scoped>
// 拖拽
.drag_item_box {
  height: 100%;
  padding: 6px;
}

.drag_item_box > div {
  height: 100%;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

// 默认图片
::v-deep .hiprint-printElement-image-content {
  img {
    content: url("~@/assets/logo.png");
  }
}

// 辅助线样式
::v-deep .toplineOfPosition {
  border: 0;
  border-top: 1px dashed purple;
}

::v-deep .bottomlineOfPosition {
  border: 0;
  border-top: 1px dashed purple;
}

::v-deep .leftlineOfPosition {
  border: 0;
  border-left: 1px dashed purple;
}

::v-deep .rightlineOfPosition {
  border: 0;
  border-left: 1px dashed purple;
}

// 设计容器
.card-design {
  overflow: hidden;
  overflow-x: auto;
  overflow-y: auto;
}
</style>
