'use strict';

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

var vue = require('vue');
require('../../../utils/index.js');
var link = require('./link.js');
var createNamespace = require('../../../utils/create-namespace.js');
var addUnit = require('../../../utils/add-unit.js');

"use strict";
const _hoisted_1 = { style: { "width": "240px", "height": "135px", "overflow": "hidden", "background": "#f0f2f5", "display": "flex", "align-items": "center", "justify-content": "center", "position": "relative" } };
const _hoisted_2 = ["src"];
const _hoisted_3 = ["href", "target"];
const _hoisted_4 = ["href", "target"];
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "LlLink"
  },
  __name: "link",
  props: link.linkProps,
  emits: ["click"],
  setup(__props, { emit: __emit }) {
    const bem = createNamespace.createNamespace("link");
    const props = __props;
    const emits = __emit;
    const isImgLoaded = vue.ref(false);
    const computedHref = vue.computed(() => {
      if (props.disabled) return "javascript:;";
      return props.href || "javascript:;";
    });
    const computedLinkColor = vue.computed(() => {
      return props.typeChange ? {
        "--a-color": link.linkColorMap[props.colorType]?.["link"] || props.linkColor || "#005ce5",
        "--a-link-color": link.linkColorMap[props.colorType]?.["link"] || props.linkColor,
        "--a-hover-color": link.linkColorMap[props.colorType]?.["hover"] || props.hoverColor,
        "--a-active-color": link.linkColorMap[props.colorType]?.["active"] || props.activeColor
      } : {
        "--a-color": link.linkColorMap[props.colorType]?.["link"] || props.linkColor || "#005ce5"
      };
    });
    const handleClick = (event) => {
      if (props.disabled || !props.href) {
        event.preventDefault();
        return;
      }
      emits("click", event);
    };
    const handleImgLoad = () => {
      isImgLoaded.value = true;
    };
    return (_ctx, _cache) => {
      const _component_a_spin = vue.resolveComponent("a-spin");
      const _component_ll_icon = vue.resolveComponent("ll-icon");
      const _component_ll_tooltip = vue.resolveComponent("ll-tooltip");
      return props.preview && props.href && !props.disabled ? (vue.openBlock(), vue.createBlock(_component_ll_tooltip, {
        key: 0,
        placement: "top",
        "max-width": 600,
        "overlay-style": { maxWidth: "none" },
        "is-white-bg": "",
        "container-style": { display: "inline-block" }
      }, {
        title: vue.withCtx(() => [
          vue.createElementVNode("div", _hoisted_1, [
            vue.createVNode(_component_a_spin, {
              spinning: !isImgLoaded.value
            }, {
              default: vue.withCtx(() => [
                vue.createElementVNode("img", {
                  src: `https://s0.wp.com/mshots/v1/${encodeURIComponent(
                    props.href
                  )}?w=480&h=270`,
                  style: { "width": "100%", "height": "100%", "object-fit": "cover" },
                  alt: "Link Preview",
                  onLoad: handleImgLoad
                }, null, 40, _hoisted_2)
              ]),
              _: 1
              /* STABLE */
            }, 8, ["spinning"])
          ])
        ]),
        default: vue.withCtx(() => [
          vue.createElementVNode("a", {
            class: vue.normalizeClass([
              vue.unref(bem).b(),
              props.disabled ? vue.unref(bem).is("disabled") : "",
              props.colorType ? vue.unref(bem).is(props.colorType) : "",
              props.typeChange ? vue.unref(bem).is("type-change") : "",
              props.underlineStatus === "fixed" ? vue.unref(bem).is("fixed-underline") : props.underlineStatus === "hover" ? vue.unref(bem).is("underline") : "",
              ,
            ]),
            style: vue.normalizeStyle({ gap: vue.unref(addUnit.addUnit)(props.gap), ...computedLinkColor.value }),
            href: computedHref.value,
            target: props.target,
            onClick: handleClick
          }, [
            props.prefixIcon ? (vue.openBlock(), vue.createBlock(_component_ll_icon, {
              key: 0,
              "icon-name": `icon-${props.prefixIcon}`,
              size: props.iconSize,
              class: vue.normalizeClass(vue.unref(bem).e("prefix-icon"))
            }, null, 8, ["icon-name", "size", "class"])) : vue.createCommentVNode("v-if", true),
            vue.createElementVNode(
              "span",
              {
                class: vue.normalizeClass(vue.unref(bem).e("text"))
              },
              [
                vue.renderSlot(_ctx.$slots, "default", {}, () => [
                  vue.createTextVNode(
                    vue.toDisplayString(props.value),
                    1
                    /* TEXT */
                  )
                ])
              ],
              2
              /* CLASS */
            ),
            props.suffixIcon ? (vue.openBlock(), vue.createBlock(_component_ll_icon, {
              key: 1,
              "icon-name": `icon-${props.suffixIcon}`,
              size: props.iconSize,
              class: vue.normalizeClass(vue.unref(bem).e("suffix-icon"))
            }, null, 8, ["icon-name", "size", "class"])) : vue.createCommentVNode("v-if", true)
          ], 14, _hoisted_3)
        ]),
        _: 3
        /* FORWARDED */
      })) : (vue.openBlock(), vue.createElementBlock("a", {
        key: 1,
        class: vue.normalizeClass([
          vue.unref(bem).b(),
          props.disabled ? vue.unref(bem).is("disabled") : "",
          props.typeChange ? vue.unref(bem).is("type-change") : "",
          props.underlineStatus === "fixed" ? vue.unref(bem).is("fixed-underline") : props.underlineStatus === "hover" ? vue.unref(bem).is("underline") : ""
        ]),
        style: vue.normalizeStyle({ gap: vue.unref(addUnit.addUnit)(props.gap), ...computedLinkColor.value }),
        href: computedHref.value,
        target: props.target,
        onClick: handleClick
      }, [
        props.prefixIcon ? (vue.openBlock(), vue.createBlock(_component_ll_icon, {
          key: 0,
          "icon-name": `icon-${props.prefixIcon}`,
          size: props.iconSize,
          class: vue.normalizeClass(vue.unref(bem).e("prefix-icon"))
        }, null, 8, ["icon-name", "size", "class"])) : vue.createCommentVNode("v-if", true),
        vue.createElementVNode(
          "span",
          {
            class: vue.normalizeClass(vue.unref(bem).e("text"))
          },
          [
            vue.renderSlot(_ctx.$slots, "default", {}, () => [
              vue.createTextVNode(
                vue.toDisplayString(props.value),
                1
                /* TEXT */
              )
            ])
          ],
          2
          /* CLASS */
        ),
        props.suffixIcon ? (vue.openBlock(), vue.createBlock(_component_ll_icon, {
          key: 1,
          "icon-name": `icon-${props.suffixIcon}`,
          size: props.iconSize,
          class: vue.normalizeClass(vue.unref(bem).e("suffix-icon"))
        }, null, 8, ["icon-name", "size", "class"])) : vue.createCommentVNode("v-if", true)
      ], 14, _hoisted_4));
    };
  }
});

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