'use strict';

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

var vue = require('vue');
var core = require('@vueuse/core');
var elementPlus = require('element-plus');
var autoEllipsisText = require('auto-ellipsis-text');
var index$1 = require('../../svg-icon/index.js');
var index = require('../../dot/index.js');

"use strict";
const _hoisted_1 = { style: { "height": "100%" } };
const _hoisted_2 = { key: 1 };
const _hoisted_3 = { key: 1 };
const _hoisted_4 = {
  key: 2,
  style: { "margin-left": "6px", "height": "100%" },
  class: "icon"
};
const _hoisted_5 = {
  key: 3,
  style: { "margin-left": "6px", "height": "100%" },
  class: "icon link"
};
const __default__ = vue.defineComponent({
  name: "me-text"
});
var script = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: {
    text: { type: String, required: false, default: "" },
    color: { type: String, required: false, default: "#999999" },
    link: { type: String, required: false },
    upperCase: { type: Boolean, required: false, default: false },
    toolTip: { type: Boolean, required: false, default: false },
    lineClamp: { type: [Number, String], required: false, default: 1 },
    suffix: { type: Boolean, required: false },
    dot: { type: Boolean, required: false, default: false },
    dotColor: { type: String, required: false, default: "red" },
    dotSetting: { type: null, required: false, default: {} },
    dotSpace: { type: String, required: false, default: "5px" },
    expand: { type: Boolean, required: false, default: false },
    copy: { type: Boolean, required: false, default: true },
    customClass: { type: String, required: false },
    height: { type: String, required: false },
    width: { type: String, required: false, default: "100%" }
  },
  setup(__props) {
    ;
    const props = __props;
    const { copy } = core.useClipboard({ legacy: true });
    const show = vue.ref(true);
    const isExpand = vue.ref(false);
    const isOver = vue.ref(false);
    const divRef = vue.ref();
    const contentDivRef = vue.ref();
    const elTextRef = vue.ref();
    const divWidth = core.useElementSize(divRef).width;
    const contentDivWidth = core.useElementSize(contentDivRef).width;
    const content = vue.ref("");
    const textHeight = vue.ref(0);
    const tooltipRef = vue.ref();
    vue.onMounted(() => {
      if (!elTextRef.value) return;
      tooltipRef.value.show = vue.ref({ value: false });
      textHeight.value = elTextRef.value.$el.clientHeight;
      isOver.value = elTextRef.value.$el.scrollHeight > elTextRef.value.$el.clientHeight;
      tooltipRef.value.show.value = isOver.value;
      const text = elTextRef.value.$el.innerText;
      if (props.upperCase) {
        content.value = text.toUpperCase();
      } else {
        content.value = text;
      }
    });
    core.useResizeObserver(elTextRef, (entries) => {
      const entry = entries[0];
      const { scrollHeight, clientHeight } = entry.target;
      tooltipRef.value.show.value = scrollHeight > clientHeight;
    });
    vue.watch([divWidth, () => contentDivWidth.value], ([newWidth1, newWidth2]) => {
      if (+props.lineClamp <= 1) {
        if (newWidth1 > newWidth2) {
          isOver.value = true;
        } else {
          isOver.value = false;
        }
      } else {
        const res = elTextRef.value?.$el.scrollHeight <= elTextRef.value?.$el.clientHeight;
        isOver.value = res;
      }
    });
    vue.onActivated(() => {
      show.value = true;
    });
    vue.onDeactivated(() => {
      show.value = false;
    });
    const handleCopy = async () => {
      try {
        const text = elTextRef.value.$el.innerText;
        const res = await copy(text);
        elementPlus.ElMessage({
          message: "\u590D\u5236\u6210\u529F",
          type: "success",
          plain: true
        });
      } catch (error) {
      }
    };
    const handleLink = () => {
      window.open(props.link, "_blank");
    };
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          ref_key: "divRef",
          ref: divRef,
          style: { "width": "100%" },
          class: "me-text"
        },
        [
          vue.createElementVNode(
            "div",
            {
              ref_key: "contentDivRef",
              ref: contentDivRef,
              class: "content",
              style: vue.normalizeStyle([{}, { width: __props.suffix ? "100%" : "fit-content", height: props.height }])
            },
            [
              __props.dot && content.value ? (vue.openBlock(), vue.createElementBlock(
                "div",
                {
                  key: 0,
                  style: vue.normalizeStyle([{ "align-self": "flex-start" }, { height: __props.suffix ? "16px" : textHeight.value + "px", "margin-right": __props.dotSpace }])
                },
                [
                  vue.createVNode(vue.unref(index.MeDot), vue.mergeProps({ color: __props.dotColor }, __props.dotSetting), null, 16, ["color"])
                ],
                4
                /* STYLE */
              )) : vue.createCommentVNode("v-if", true),
              vue.createElementVNode("div", _hoisted_1, [
                vue.createVNode(vue.unref(elementPlus.ElTooltip), vue.mergeProps({
                  ref_key: "tooltipRef",
                  ref: tooltipRef,
                  effect: "light",
                  disabled: !__props.toolTip || !tooltipRef.value?.show.value || isExpand.value,
                  placement: "bottom"
                }, _ctx.$attrs), {
                  content: vue.withCtx(() => [
                    vue.createElementVNode(
                      "div",
                      {
                        style: vue.normalizeStyle({ width: vue.unref(divWidth) + "px" })
                      },
                      vue.toDisplayString(content.value),
                      5
                      /* TEXT, STYLE */
                    )
                  ]),
                  default: vue.withCtx(() => [
                    !__props.suffix ? (vue.openBlock(), vue.createElementBlock(
                      "div",
                      {
                        key: 0,
                        style: vue.normalizeStyle({ color: __props.color })
                      },
                      [
                        !isExpand.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElText), vue.mergeProps({
                          key: 0,
                          ref_key: "elTextRef",
                          ref: elTextRef
                        }, { lineClamp: __props.lineClamp, ..._ctx.$attrs }, {
                          style: { color: __props.color },
                          class: { link: __props.link }
                        }), {
                          default: vue.withCtx(() => [
                            vue.renderSlot(_ctx.$slots, "default", {}, () => [
                              vue.createTextVNode(
                                vue.toDisplayString(content.value),
                                1
                                /* TEXT */
                              )
                            ])
                          ]),
                          _: 3
                          /* FORWARDED */
                        }, 16, ["style", "class"])) : vue.createCommentVNode("v-if", true),
                        isExpand.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
                          vue.renderSlot(_ctx.$slots, "default", {}, () => [
                            vue.createTextVNode(
                              vue.toDisplayString(content.value),
                              1
                              /* TEXT */
                            )
                          ])
                        ])) : vue.createCommentVNode("v-if", true)
                      ],
                      4
                      /* STYLE */
                    )) : vue.createCommentVNode("v-if", true)
                  ]),
                  _: 3
                  /* FORWARDED */
                }, 16, ["disabled"])
              ]),
              __props.suffix ? (vue.openBlock(), vue.createElementBlock(
                "div",
                {
                  key: 1,
                  style: vue.normalizeStyle([{ "width": "100%" }, { color: __props.color }])
                },
                [
                  !isExpand.value && show.value ? (vue.openBlock(), vue.createBlock(vue.unref(autoEllipsisText.AutoEllipsis), {
                    key: 0,
                    suffix: true,
                    "start-ellpsis-line": __props.lineClamp,
                    ref_key: "elTextRef",
                    ref: elTextRef
                  }, {
                    default: vue.withCtx(() => [
                      vue.renderSlot(_ctx.$slots, "default")
                    ]),
                    _: 3
                    /* FORWARDED */
                  }, 8, ["start-ellpsis-line"])) : vue.createCommentVNode("v-if", true),
                  isExpand.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [
                    vue.renderSlot(_ctx.$slots, "default", {}, () => [
                      vue.createTextVNode(
                        vue.toDisplayString(content.value),
                        1
                        /* TEXT */
                      )
                    ])
                  ])) : vue.createCommentVNode("v-if", true)
                ],
                4
                /* STYLE */
              )) : vue.createCommentVNode("v-if", true),
              props.copy ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
                vue.renderSlot(_ctx.$slots, "icon", {}, () => [
                  vue.createVNode(vue.unref(index$1.MeSvgIcon), {
                    onClick: handleCopy,
                    name: "ri-file-copy-line"
                  })
                ])
              ])) : vue.createCommentVNode("v-if", true),
              __props.link ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
                vue.createVNode(vue.unref(index$1.MeSvgIcon), {
                  onClick: handleLink,
                  name: "ri-external-link-line"
                })
              ])) : vue.createCommentVNode("v-if", true)
            ],
            4
            /* STYLE */
          ),
          !isOver.value && __props.expand ? (vue.openBlock(), vue.createElementBlock(
            "div",
            {
              key: 0,
              style: vue.normalizeStyle([{ width: vue.unref(contentDivWidth) + "px" }, { "text-align": "center", "cursor": "pointer" }]),
              class: "expand"
            },
            [
              vue.createVNode(vue.unref(index$1.MeSvgIcon), {
                size: 20,
                onClick: _cache[0] || (_cache[0] = ($event) => isExpand.value = !isExpand.value),
                name: isExpand.value ? "ri-arrow-up-s-fill" : "ri-arrow-down-s-fill"
              }, null, 8, ["name"])
            ],
            4
            /* STYLE */
          )) : vue.createCommentVNode("v-if", true)
        ],
        512
        /* NEED_PATCH */
      );
    };
  }
});

exports.default = script;
//# sourceMappingURL=text.vue2.js.map
