/* eslint-disable no-undef */
import { hiprint } from 'vue-plugin-hiprint'

export const customProvider = function () {
  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, sukData) {
            const elId = options.elId || 'barCode-' + new Date().getTime()
            const codeWidth = parseInt((options.width - 22) * 0.85)
            let printData = {
              labelCode: 123456789,
              productSkuId: `XXXXXXXXXXXXXX`,
              skuExtCode: 'XXXXXXXXXXXXXX',
              skuSpecName: 'XXXXX'
            }

            options.elId = `${elId}`
            if (sukData) {
              printData = sukData
            }

            $('body').append(`<div id="codewrapper-${elId}" style="width: ${codeWidth}pt">
              <svg id="${elId}" width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice"></svg>
            </div>`)
            JsBarcode('#' + elId, printData.labelCode, {
              format: 'CODE128B',
              width: 2,
              height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
              margin: 0,
              displayValue: false
            })

            const codeHtml = $(`#codewrapper-${elId}`).html()
            $(`body>#codewrapper-${elId}`).remove()

            const resizeObserver = new ResizeObserver(() => {
               JsBarcode('#' + elId, printData.labelCode, {
                format: "CODE128B",
                width: 2,
                height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
                margin: 0,
                displayValue: false
              })
            })

            setTimeout(() => {
              const node = document.getElementById(`temuBarCode-${elId}`)
              if (node) {
                resizeObserver.observe(node)
              }
            }, 0)
            var html = `
              <div class="temuBarCode" id="temuBarCode-${elId}">
                <div class="temuBarCode-top">
                  <div class="hiprint-printElement-text-content hiprint-printElement-content">${printData.skuExtCode || printData.productSkcId}</div>
                  <div class="hiprint-printElement-text-content hiprint-printElement-content">${printData.skuSpecName}</div>
                </div>
                <div class="temuBarCode-middle">
                  <div class="hiprint-printElement-text-content hiprint-printElement-content temuBarCode-code" style="width: 100%">
                    ${codeHtml}
                  </div>
                </div>
                <div class="temuBarCode-bottom">
                  <div class="hiprint-printElement-text-content hiprint-printElement-content">${printData.productSkuId}</div>
                  <div class="hiprint-printElement-text-content hiprint-printElement-content">Made in China</div>
                </div>
              </div>
            `
            return html
          },
          options: {
            width: 316,
            height: 120,
            elId: ''
          },
          printElementType: {
          }
        },
        // {
        //   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: '图片',
          data: 'https://foruda.gitee.com/avatar/1677050350324030848/5400665_ccsimple_1591166830.png!avatar200',
          type: 'image'
        }
      ])
    ])
  }
  return {
    addElementTypes
  }
}