import { hiprint } from 'vue-plugin-hiprint'
export const customProvider = function (options) {
  const addElementTypes = function (context) {
    context.removePrintElementTypes('customProvider')
    context.addPrintElementTypes('customProvider', [
      new hiprint.PrintElementTypeGroup('', [
        {
          tid: 'providerModule1.html',
          title: 'temu条码',
          data: 'XS888888888',
          type: 'html',
          formatter: function (data, options, templateData, e, x, target) {
            console.log(data, options, templateData)
            const elId = options.elId || 'barCode-' + new Date().getTime()

            // eslint-disable-next-line no-undef
            $('body').append('<svg id="' + elId + '"></svg>')
            // eslint-disable-next-line no-undef
            JsBarcode('#'+ elId, '96778555251', {
              format: "CODE128B",
              width: 2,
              height:  parseInt(hinnn.pt.toPx(options.height - 20).toString()) * 0.6 - 3,
              margin: 0,
              displayValue: false
            })
            options.elId = `${elId}`

            // eslint-disable-next-line no-undef
            const codeHtml = $(`#${elId}`).html()
            // eslint-disable-next-line no-undef
            $(`#${elId}`).remove()
            // eslint-disable-next-line no-undef
            const resizeObserver = new ResizeObserver(() => {
              JsBarcode('#'+ elId, '96778555251', {
                format: "CODE128B",
                width: 2,
                height:  parseInt(hinnn.pt.toPx(options.height - 20).toString()) * 0.6 - 3,
                margin: 0,
                displayValue: false
              })

              const codeWidth = $(`#temuBarCode-${elId} .temuBarCode-code`).width()
              $(`#${elId}`).css('width', codeWidth + 'px')
            })

            setTimeout(() => {
              const node = document.getElementById(`temuBarCode-${elId}`)
              if (node) {
                resizeObserver.observe(node)
              }
            }, 20)
            var html = `
              <div class="temuBarCode" id="temuBarCode-${elId}">
                <div class="temuBarCode-top">
                  <div class="hiprint-printElement-text-content hiprint-printElement-content">(AA+AAA)*20PCS</div>
                  <div class="hiprint-printElement-text-content hiprint-printElement-content">AA 20PCS+AAA 20PCS</div>
                </div>
                <div class="temuBarCode-middle">
                  <div class="hiprint-printElement-text-content hiprint-printElement-content temuBarCode-code">
                    <svg id="${elId}" style="display: block" width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice">
                      ${codeHtml}
                    </svg>
                  </div>
                </div>
                <div class="temuBarCode-bottom">
                  <div class="hiprint-printElement-text-content hiprint-printElement-content">1034130097</div>
                  <div class="hiprint-printElement-text-content hiprint-printElement-content">Made in China</div>
                </div>
              </div>
            `
            return html
          },
          options: {
            width: 316,
            height: 120,
            elId: ''
          }
        },
        {
          tid: 'providerModule1.barcode',
          title: '条形码',
          data: 'XS888888888',
          type: 'text',
          options: {
            field: 'barcode',
            testData: 'XS888888888',
            height: 32,
            fontSize: 12,
            lineHeight: 18,
            textAlign: 'left',
            textType: 'barcode',
            hideTitle: false
          }
        },
        {
          tid: 'providerModule1.qrcode',
          title: '二维码',
          data: 'XS888888888',
          type: 'text',
          options: {
            field: '',
            testData: '',
            height: 32,
            fontSize: 12,
            lineHeight: 18,
            textType: 'qrcode',
            hideTitle: false
          }
        },
        {
          tid: 'providerModule1.image',
          title: 'Logo',
          data: 'https://foruda.gitee.com/avatar/1677050350324030848/5400665_ccsimple_1591166830.png!avatar200',
          type: 'image'
        }
      ])
    ])
  }
  return {
    addElementTypes
  }
}