<script setup>
import { computed, ref } from "vue";
import { useNamespace } from "@yh-ui/hooks";
import { useComponentTheme } from "@yh-ui/theme";
defineOptions({ name: "YhAvatar" });
const props = defineProps({
  shape: { type: String, required: false, default: "circle" },
  size: { type: [String, Number], required: false, default: "default" },
  src: { type: String, required: false },
  srcSet: { type: String, required: false },
  alt: { type: String, required: false },
  fit: { type: String, required: false, default: "cover" },
  icon: { type: null, required: false },
  color: { type: String, required: false },
  backgroundColor: { type: String, required: false },
  style: { type: Object, required: false },
  crossorigin: { type: String, required: false, default: "anonymous" },
  themeOverrides: { type: null, required: false }
});
const emit = defineEmits(["error"]);
const ns = useNamespace("avatar");
const { themeStyle } = useComponentTheme(
  "avatar",
  computed(() => props.themeOverrides)
);
const imgError = ref(false);
const sizeMap = {
  large: 56,
  default: 40,
  small: 28
};
const avatarSize = computed(() => {
  if (typeof props.size === "number") return `${props.size}px`;
  return `${sizeMap[props.size] ?? 40}px`;
});
const avatarStyle = computed(() => {
  const style = {
    ...themeStyle.value,
    width: avatarSize.value,
    height: avatarSize.value,
    lineHeight: avatarSize.value,
    fontSize: `calc(${avatarSize.value} / 2.5)`
  };
  if (props.backgroundColor || props.color) {
    style.backgroundColor = props.backgroundColor || props.color || "";
  }
  return { ...style, ...typeof props.style === "object" ? props.style : {} };
});
const avatarClasses = computed(() => [
  ns.b(),
  ns.m(props.shape),
  typeof props.size === "string" && ns.m(props.size),
  ns.is("image", !!props.src && !imgError.value)
]);
const showImg = computed(() => props.src && !imgError.value);
const handleError = (event) => {
  imgError.value = true;
  emit("error", event);
};
</script>

<template>
  <span :class="avatarClasses" :style="avatarStyle" role="img" :aria-label="alt">
    <!-- 图片模式 -->
    <img
      v-if="showImg"
      :src="src"
      :srcset="srcSet"
      :alt="alt"
      :style="{ objectFit: fit }"
      :class="ns.e('img')"
      :crossorigin="props.crossorigin"
      @error="handleError"
    />
    <!-- 图标模式 -->
    <component :is="icon" v-else-if="icon && !$slots.default" :class="ns.e('icon')" />
    <!-- 默认插槽（文字/自定义） -->
    <slot v-else>
      <span :class="ns.e('text')">?</span>
    </slot>
  </span>
</template>

<style>
@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  vertical-align: middle;
  background-color: var(--yh-avatar-bg-color, var(--yh-color-primary-light-8, #d9ecff));
  color: var(--yh-avatar-text-color, var(--yh-color-primary, #409eff));
  user-select: none;
  font-weight: 600;
  transition: box-shadow 0.2s ease;
}
.yh-avatar--circle {
  border-radius: 50%;
}

.yh-avatar--square {
  border-radius: var(--yh-avatar-radius, var(--yh-border-radius-base, 4px));
}

.yh-avatar--large {
  width: 56px;
  height: 56px;
  font-size: 22px;
  line-height: 56px;
}

.yh-avatar--default {
  width: 40px;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
}

.yh-avatar--small {
  width: 28px;
  height: 28px;
  font-size: 12px;
  line-height: 28px;
}

.yh-avatar__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.yh-avatar__icon {
  font-size: inherit;
  color: inherit;
}

.yh-avatar__text {
  font-size: inherit;
  color: inherit;
  white-space: nowrap;
}
</style>
