'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.js');
var qrCodeStyling = require('../../../../node_modules/.pnpm/qr-code-styling@1.9.2/node_modules/qr-code-styling/lib/qr-code-styling.js');
var qrcode = require('./qrcode.js');
var createNamespace = require('../../../utils/create-namespace.js');

"use strict";
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{ name: "LlQrcode" },
  __name: "qrcode",
  props: qrcode.qrcodeProps,
  setup(__props) {
    const bem = createNamespace.createNamespace("qrcode");
    const props = __props;
    const qrContainer = vue.ref(null);
    const qrCodeInstance = vue.ref(null);
    const containerStyle = vue.computed(() => ({
      padding: `${props.padding}px`,
      width: `${props.size}px`,
      height: `${props.size}px`
    }));
    const qrContainerStyle = vue.computed(() => ({
      width: `${props.size - props.padding * 2}px`,
      height: `${props.size - props.padding * 2}px`,
      background: props.bgColor || "#ffffff"
    }));
    const qrSize = vue.computed(() => {
      const MIN_SIZE = 100;
      let calculatedSize = props.size - props.padding * 2;
      if (calculatedSize <= 0) {
        calculatedSize = MIN_SIZE;
      }
      const width = Math.max(MIN_SIZE, calculatedSize);
      const height = Math.max(MIN_SIZE, calculatedSize);
      return { width, height };
    });
    const buildQrConfig = vue.computed(
      () => ({
        // 二维码尺寸
        width: qrSize.value.width,
        height: qrSize.value.height,
        // 核心数据
        data: props.data,
        margin: props.margin,
        // 图像设置
        image: props.image || void 0,
        imageOptions: {
          hideBackgroundDots: props.imageHideBgDots,
          imageSize: props.imageSize,
          margin: props.imageMargin,
          // base64 图片（data: 协议）不能通过 XHR 转 Blob，必须关闭 saveAsBlob，
          // 否则 qr-code-styling 内部会发起同步 XHR 并抛出 InvalidAccessError
          saveAsBlob: !props.image?.startsWith("data:")
        },
        // 二维码选项
        qrOptions: {
          typeNumber: 0,
          mode: "Byte",
          errorCorrectionLevel: props.errorLevel
        },
        // 点样式配置
        dotsOptions: {
          type: props.dotsType,
          color: props.dotsColor || "#000000",
          gradient: props.dotsGradientType !== "single" ? {
            type: props.dotsGradientType,
            rotation: props.dotsGradientRotation,
            colorStops: [
              { offset: 0, color: props.dotsGradientStartColor || "#ff0000" },
              { offset: 1, color: props.dotsGradientEndColor || "#0000ff" }
            ]
          } : void 0
        },
        // 边角方块配置
        cornersSquareOptions: {
          type: props.cornersSquareType,
          color: props.cornersSquareColor || "#000000",
          gradient: props.cornersSquareGradientType !== "single" ? {
            type: props.cornersSquareGradientType,
            rotation: props.cornersSquareGradientRotation,
            colorStops: [
              {
                offset: 0,
                color: props.cornersSquareGradientStartColor || "#ff0000"
              },
              {
                offset: 1,
                color: props.cornersSquareGradientEndColor || "#0000ff"
              }
            ]
          } : void 0
        },
        // 边角点配置
        cornersDotOptions: {
          type: props.cornersDotType,
          color: props.cornersDotColor || "#000000",
          gradient: props.cornersDotGradientType !== "single" ? {
            type: props.cornersDotGradientType,
            rotation: props.cornersDotGradientRotation,
            colorStops: [
              {
                offset: 0,
                color: props.cornersDotGradientStartColor || "#ff0000"
              },
              {
                offset: 1,
                color: props.cornersDotGradientEndColor || "#0000ff"
              }
            ]
          } : void 0
        },
        // 背景配置
        backgroundOptions: {
          color: props.bgColor || "#ffffff",
          gradient: props.bgGradientType !== "single" ? {
            type: props.bgGradientType,
            rotation: props.bgGradientRotation,
            colorStops: [
              { offset: 0, color: props.bgGradientStartColor || "#ff0000" },
              { offset: 1, color: props.bgGradientEndColor || "#0000ff" }
            ]
          } : void 0
        }
      })
    );
    const initQrCode = () => {
      if (!qrContainer.value) return;
      qrCodeInstance.value = new qrCodeStyling.default(buildQrConfig.value);
      while (qrContainer.value.firstChild) {
        qrContainer.value.removeChild(qrContainer.value.firstChild);
      }
      qrCodeInstance.value.append(qrContainer.value);
    };
    const updateQrCode = () => {
      if (qrCodeInstance.value) {
        qrCodeInstance.value.update(buildQrConfig.value);
      } else {
        initQrCode();
      }
    };
    vue.watch(
      () => Object.values(props),
      () => {
        vue.nextTick(updateQrCode);
      },
      { deep: true }
    );
    vue.onMounted(() => {
      vue.nextTick(initQrCode);
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: vue.normalizeClass([vue.unref(bem).b(), _ctx.bordered ? vue.unref(bem).is("border") : ""]),
          style: vue.normalizeStyle(containerStyle.value)
        },
        [
          vue.createElementVNode(
            "div",
            {
              ref_key: "qrContainer",
              ref: qrContainer,
              style: vue.normalizeStyle(qrContainerStyle.value)
            },
            null,
            4
            /* STYLE */
          )
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=qrcode.vue2.js.map
