<template>
  <el-drawer :visible.sync="drawer" :append-to-body="true" size="80%" >
    <small-title slot="title" :no-padding="true">
      <!-- <template v-for="demo in demoList"> -->
      <!-- <el-button :key="demo.name" :type="demo.name === curDemo ? 'primary' : ' '" @click="curDemo = demo.name"> -->
      <!-- {{ $t('module.packingManage.printModelDesign') }} -->
      模板设计
      <!-- </el-button> -->
      <!-- </template> -->
    </small-title>
    <el-card>
      <el-row style="margin-bottom: 10px">
        <el-col :span="4">
          <!-- 模板选择 -->

          <!-- <el-select
          v-model="mode"
          filterable
          :default-value="0"
          option-label-prop="label"
          style="width: 100%;"
          @change="changeMode"
        >
          <el-option v-for="(opt,idx) in modeList" :key="idx" :label="opt.name" :value="idx">
            {{ opt.name }}
          </el-option>
        </el-select> -->
        </el-col>
        <el-col :span="20">
          <!-- 纸张设置 -->
          <el-button-group style="margin:0 10px">
            <el-button v-for="(value,type) in paperTypes" :key="type" :type="curPaperType === type ? 'primary' : ' '"
              @click="setPaper(type,value)">
              {{ type }}
            </el-button>
          </el-button-group>
          <el-input-number style="margin:0 10px" :value="scaleValue " :precision="2" :step="0.1" :min="scaleMin"
            :max="scaleMax" @change="changeScale" />
          <el-popover v-model="paperPopVisible" placement="bottom" width="300" title="设置纸张宽高(mm)">
            <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px">
              <el-input v-model="paperWidth" type="number" style=" width: 100px; text-align: center" place="宽（mm）" />~
              <el-input v-model="paperHeight" type="number" style=" width: 100px; text-align: center" place="高（mm）" />
            </div>
            <div>
              <el-button type="primary" style="width: 100%" size="mini" @click="otherPaper">确定</el-button>
            </div>
            <el-button slot="reference" type="primary" style="margin:0 10px">自定义宽高</el-button>
          </el-popover>

          <!--          <a-button-group>-->
          <!--            <template v-for="(value,type) in paperTypes">-->
          <!--              <a-button :type="curPaperType === type ? 'primary' : 'info'" @click="setPaper(type,value)" :key="type">-->
          <!--                {{ type }}-->
          <!--              </a-button>-->
          <!--            </template>-->
          <!--            <a-popover v-model="paperPopVisible" title="设置纸张宽高(mm)" trigger="click">-->
          <!--              <div slot="content">-->
          <!--                <a-input-group compact style="margin: 10px 10px">-->
          <!--                  <a-input type="number" v-model="paperWidth" style=" width: 100px; text-align: center"-->
          <!--                           placeholder="宽(mm)"/>-->
          <!--                  <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"-->
          <!--                           placeholder="~" disabled-->
          <!--                  />-->
          <!--                  <a-input type="number" v-model="paperHeight" style="width: 100px; text-align: center; border-left: 0"-->
          <!--                           placeholder="高(mm)"/>-->
          <!--                </a-input-group>-->
          <!--                <a-button type="primary" style="width: 100%" @click="otherPaper">确定</a-button>-->
          <!--              </div>-->
          <!--              <a-button :type="'other'==curPaperType?'primary':''">自定义纸张</a-button>-->
          <!--            </a-popover>-->
          <!--          </a-button-group>-->

          <!-- 预览/打印 -->
          <el-button-group>
            <el-button type="primary" icon="redo" @click="rotatePaper()">旋转</el-button>
            <el-button type="primary" icon="el-icon-view" @click="preView">
              预览
            </el-button>
            <!-- <el-button type="primary" icon="el-icon-printer" @click="print">
            直接打印
          </el-button> -->
            <el-button type="primary" icon="el-icon-s-management" @click="save">
              保存
            </el-button>
            <el-button type="danger" icon="el-icon-delete" @click="clearPaper">
              清空
            </el-button>
          </el-button-group>
          <!-- 保存/清空 -->

        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="4">
          <el-card style="height: 100vh">
            <el-row>
              <el-col :span="24" class="rect-printElement-types hiprintEpContainer" />
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="16">
          <el-card class="card-design">
            <div id="hiprint-printTemplate" class="hiprint-printTemplate" />
          </el-card>
        </el-col>
        <el-col :span="4" class="params_setting_container">
          <el-card>
            <el-row class="hinnn-layout-sider">
              <div id="PrintElementOptionSetting" />
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <!-- 预览 -->
      <print-preview ref="preView" />
    </el-card>
  </el-drawer>
</template>

<script>

import printPreview from './preview'
import { MessageBox } from 'element-ui'
import { hiprint } from 'vue-plugin-hiprint'
import providers from './providers'
// import printData from './print-data'
import $ from 'jquery'
import SmallTitle from './SmallTitle.vue'
let hiprintTemplate = null
export default {
  name: 'PrintCustom',
  components: { printPreview, SmallTitle },
  // props: {
  //   modelData: {
  //     type: String,
  //     default: ''
  //   }
  // },
  data() {
    return {
      // paperPopVisible: false,
      // 模板选择
      mode: 0,
      template: null,
      modeList: [],
      // 当前纸张
      curPaper: {
        // type: 'other',
        // width: 220,
        // height: 80
      },
      printData:{},
      drawer: false,
      // 纸张类型
      paperTypes: {
        'A3': {
          width: 420,
          height: 296.6
        },
        'A4': {
          width: 210,
          height: 297
        },
        'A5': {
          width: 210,
          height: 147.6
        },
        'B3': {
          width: 500,
          height: 352.6
        },
        'B4': {
          width: 250,
          height: 352.6
        },
        'B5': {
          width: 250,
          height: 175.6
        }
      },
      scaleValue: 1,
      scaleMax: 5,
      scaleMin: 0.5,
      // 自定义纸张
      paperPopVisible: false,
      paperWidth: '210',
      paperHeight: '297'
    }
  },
  computed: {
    curPaperType() {
      let type = 'other'
      const types = this.paperTypes
      for (const key in types) {
        const item = types[key]
        const { width, height } = this.curPaper
        if (item.width === width && item.height === height) {
          type = key
        }
      }
      return type
    }
  },
  created() {
    // $('.hiprintEpContainer').empty()
  },
  destroyed () {
    $('.hiprintEpContainer').empty()
    console.log(11111)
  },
  methods: {
    // handleClose() {
    //   $('.hiprintEpContainer').empty()
    // },
    closed() {
      $('.hiprintEpContainer').empty()
      $('.hiprint-printTemplate').empty()
    },
    init(data) {
      this.drawer = true
      this.modelData = data
      this.modeList = providers.map((e) => {
        return { type: e.type, name: e.name, value: e.value }
      })
      this.changeMode()
    },
    changeMode() {
      // hiprintTemplate.clear()
      // console.log(this.modelData)
      this.$nextTick(() => {
        const { mode } = this
        const provider = providers[mode]
        hiprint.init({
          providers: [provider.f]
        })

        // $('#hiprint-printTemplate').empty()
        // console.log(JSON.parse(this.modelData))
        hiprint.setConfig()
        // 替换配置
        hiprint.setConfig({
          movingDistance: 2.5,
          text: {
            supportOptions: [
              {
                name: 'styler',
                hidden: true
              },
              {
                name: 'formatter',
                hidden: true
              }
            ]
          }
        })

        // console.log(this.modelData)
        // console.log($('#hiprint-printTemplate').empty())
        // if () {
          // console.log(this.modelData);
          // $('.hiprintEpContainer').empty()
          // hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value)
          // $('.hiprint-printTemplate').empty()
          // hiprintTemplate = new hiprint.PrintTemplate({
          //   template: JSON.parse(this.modelData),
          //   settingContainer: '#PrintElementOptionSetting',
          //   paginationContainer: '.hiprint-printPagination'
          // })
        // } else {
          $('.hiprintEpContainer').empty()
          console.log(this.modelData);
          hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value)
          $('.hiprint-printTemplate').empty()
          // const templates = this.$ls.get('KEY_TEMPLATES', {})
          const template = provider.value
          // console.log(template)
          hiprintTemplate = new hiprint.PrintTemplate({
            template: this.modelData != '' ? JSON.parse(this.modelData) : {},
            settingContainer: '#PrintElementOptionSetting',
            paginationContainer: '.hiprint-printPagination'
          })
        // }
        hiprintTemplate.design('#hiprint-printTemplate')
        // console.log(hiprintTemplate)
        console.log(hiprintTemplate);
        // hiprintTemplate.design('#hiprint-printTemplate', { grid: true })
        // 获取当前放大比例, 当zoom时传true 才会有
        this.scaleValue = hiprintTemplate.editingPanel.scale || 1
        // this.scaleValue = hiprintTemplate.editingPanel.scale || 1
      })
    },
    /**
     * 设置纸张大小
     * @param type [A3, A4, A5, B3, B4, B5, other]
     * @param value {width,height} mm
     */
    setPaper(type, value) {
      try {
        if (Object.keys(this.paperTypes).includes(type)) {
          this.curPaper = { type: type, width: value.width, height: value.height }
          hiprintTemplate.setPaper(value.width, value.height)
        } else {
          this.curPaper = { type: 'other', width: value.width, height: value.height }
          hiprintTemplate.setPaper(value.width, value.height)
        }
      } catch (error) {
        this.$message.error(`操作失败: ${error}`)
      }
    },
    changeScale(currentValue, oldValue) {
      let big = false
      currentValue <= oldValue ? big = false : big = true
      let scaleValue = this.scaleValue
      if (big) {
        scaleValue += 0.1
        if (scaleValue > this.scaleMax) scaleValue = 5
      } else {
        scaleValue -= 0.1
        if (scaleValue < this.scaleMin) scaleValue = 0.5
      }
      if (hiprintTemplate) {
        // scaleValue: 放大缩小值, false: 不保存(不传也一样), 如果传 true, 打印时也会放大
        hiprintTemplate.zoom(scaleValue)
        this.scaleValue = scaleValue
      }
    },
    clearPaper() {
      MessageBox.confirm('是否确认清空模板信息?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        try {
          hiprintTemplate.clear()
        } catch (error) {
          this.$message.error(`操作失败: ${error}`)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    otherPaper() {
      const value = {}
      value.width = this.paperWidth
      value.height = this.paperHeight
      this.paperPopVisible = false
      this.setPaper('other', value)
    },
    rotatePaper() {
      if (hiprintTemplate) {
        hiprintTemplate.rotatePaper()
      }
    },
    preView() {
      const { width } = this.curPaper
      this.$refs.preView.show(hiprintTemplate, this.printData, width)
    },
    print() {
      // if (window.hiwebSocket.opened) {
      const printerList = hiprintTemplate.getPrinterList()
      console.log(printerList)
      hiprintTemplate.print2(this.printData, { printer: '', title: '预览打印' })
      // return
      // }
      // this.$message.error('客户端未连接,无法直接打印')
    },
    save() {
      // console.log(hiprintTemplate.getJson())
      const { mode } = this
      const provider = providers[mode]
      // console.log(hiprintTemplate.getJson())
      this.setTemplate({
        name: provider.value,
        json: hiprintTemplate.getJson()
      })
    },
    setTemplate(payload) {
      // const templates = this.$ls.get('KEY_TEMPLATES', {})
      // console.log(payload.json)
      // templates[payload.name] = payload.json
      // this.$ls.set('KEY_TEMPLATES', templates)
      this.$message.info('保存成功')
      // console.log(JSON.stringify(payload.json))
      this.drawer = false
      this.$emit('saveData', payload.json)
      $('.hiprintEpContainer').empty()
      // this.$parent.$parent.getModelData(payload.json)
    }
  }
}
</script>

<style lang="scss" scoped>
// build 拖拽
::v-deep .hiprint-printElement-type >li>ul>li>a {
  padding: 4px 4px;
  color: #1296db;
  line-height: 1;
  height: auto;
  text-overflow: ellipsis;
}
// 设计容器
.card-design {
  // overflow: hidden;
  overflow-x: auto;
  overflow-y: auto;
}

</style>
