<template>
  <div class="avatar-code" :style="styleExtra">
    <div class="avatar-code-avatar" :style="`border-color: ${themeColor};background-color: ${themeColor}`"
      @click.stop="onClickImg">
      <WlPic radius :src="imgUrl" :needCos="needCos" cosType="thumbnail"></WlPic>
    </div>
    <div v-if="isShowText" class="avatar-code-text" :style="{ backgroundColor: `${themeColor}` }">
      <div class="text">{{ text }}</div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "AvatarCode",
};
</script>

<script lang="ts" setup>
import type { CSSProperties } from "vue";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";
type Props = {
  themeColor?: string;
  styleExtra?: CSSProperties;
  text?: string;
  isShowText?: boolean;
  imgUrl?: string;
  needCos?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  themeColor: "var(--wl-primary-color)",
  styleExtra: null,
  text: "",
  isShowText: true,
  imgUrl: "https://wlmvp-cos.weiling.cn/frontend/xiaowei.jpg",
  needCos: true,
});

const emit = defineEmits(["onClickImg"]);
const onClickImg = () => {
  emit("onClickImg", {
    text: props.text,
    url: props.imgUrl,
  });
};
</script>
<style lang="scss">
.suspension-code[data-weiling-mobile-ui-bc-suspension-code] {
  .avatar-code {
    width: fit-content;
    @extend %flex-middle-center;

    &-avatar {
      width: j(60);
      height: j(60);
      border-radius: 50%;
      overflow: hidden;
      box-sizing: border-box;
      background-color: var(--wl-primary-color);
      border: j(2) solid var(--wl-primary-color);
    }

    &-text {
      min-width: j(60);
      height: j(20);
      padding: 0 j(5);
      position: absolute;
      bottom: j(-5);
      z-index: 2;
      text-align: center;
      font-size: j(11);
      line-height: j(25);
      letter-spacing: j(1);
      color: #ffffff;
      box-sizing: border-box;
      border-radius: j(4);
      @extend %flex-middle-center;

      .text {
        @extend %flex-middle-center;
        word-break: keep-all;
        white-space: nowrap;
      }
    }
  }
}
</style>
