/**
 * ldesign v0.2.14
 * (c) 2022/11/2 16:16 built by swimly
 * @license MIT
 */

'use strict';

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

var Vue = require('vue');
var utils_renderNode = require('../../utils/render-node.js');
var components_configProvider_configReceiver = require('../config-provider/config-receiver.js');
var utils_mixins = require('../../utils/mixins.js');
var components_avatar_props = require('./props.js');
require('lodash');
require('lodash/mergeWith');
require('../config-provider/context.js');
require('../../chunks/zh_CN.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);

const classPrefixMixins = components_configProvider_configReceiver.getClassPrefixMixins("avatar");
var _Avatar = utils_mixins["default"](Vue__default["default"], classPrefixMixins).extend({
  name: "LAvatar",
  props: {
    ...components_avatar_props.AvatarProps
  },
  data() {
    return {
      isImgExist: true,
      gap: 4,
      sizeValue: "",
      scale: ""
    };
  },
  inject: {
    avatarGroup: {
      default: void 0
    }
  },
  computed: {
    customAvatarSize() {
      return this.isCustomSize() ? {
        "width": this.sizeValue,
        "height": this.sizeValue,
        "font-size": `${Number.parseInt(this.sizeValue, 10) / 2}px`
      } : {};
    },
    customImageSize() {
      return this.isCustomSize() ? {
        height: this.sizeValue,
        width: this.sizeValue
      } : {};
    },
    customCharacterSize() {
      return {
        transform: this.scale
      };
    }
  },
  mounted() {
    const {
      avatarGroup
    } = this;
    this.sizeValue = this.size || (avatarGroup === null || avatarGroup === void 0 ? void 0 : avatarGroup.size);
    this.$nextTick(() => {
      this.setScaleParams();
    });
  },
  methods: {
    handleImgLoadError() {
      const {
        onError,
        hideOnLoadFailed
      } = this.$props;
      this.isImgExist = !hideOnLoadFailed;
      onError && onError();
      this.$emit("error");
    },
    setScaleParams() {
      const avatar = this.$refs.avatar;
      const avatarChild = this.$refs.avatarChild;
      const avatarWidth = avatar === null || avatar === void 0 ? void 0 : avatar.offsetWidth;
      const avatarChildWidth = avatarChild === null || avatarChild === void 0 ? void 0 : avatarChild.offsetWidth;
      if (this.gap * 2 < avatarWidth) {
        this.scale = avatarChildWidth > avatarWidth - this.gap * 2 ? `scale(${(avatarWidth - this.gap * 2) / avatarChildWidth})` : "scale(1)";
      }
    },
    isCustomSize() {
      return this.sizeValue && !this.commonSizeClassName[this.sizeValue];
    }
  },
  updated() {
    this.$nextTick(() => {
      this.setScaleParams();
    });
  },
  render() {
    const h = arguments[0];
    let content = utils_renderNode.renderContent(this, "default", "content");
    const icon = utils_renderNode.renderLNodeJSX(this, "icon");
    const isIconOnly = icon && !content;
    const {
      shape,
      image,
      alt
    } = this.$props;
    const avatarClass = [this.componentName, this.commonSizeClassName[this.sizeValue], {
      [`${this.componentName}--circle`]: shape === "circle",
      [`${this.componentName}--round`]: shape === "round",
      [`${this.componentName}__icon`]: !!isIconOnly
    }];
    content = h("span", {
      "ref": "avatarChild",
      "style": {
        ...this.customCharacterSize
      }
    }, [content]);
    if (icon) content = [icon, !isIconOnly ? content : ""];
    if (image && this.isImgExist) {
      content = h("img", {
        "style": {
          ...this.customImageSize
        },
        "attrs": {
          "src": image,
          "alt": alt
        },
        "on": {
          "error": this.handleImgLoadError
        }
      });
    }
    return h("div", {
      "ref": "avatar",
      "class": avatarClass,
      "style": {
        ...this.customAvatarSize
      }
    }, [content]);
  }
});

exports["default"] = _Avatar;
//# sourceMappingURL=avatar.js.map
