<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" :cosSuffix="cosSuffix"></WlPic>
    </div>
    <div v-if="isShowText" class="avatar-code-text" :style="`backgroundColor: ${themeColor}`">
      <div class="text">{{ text }}</div>
    </div>
  </div>
</template>

<script>
/*
 * @Author: mikey.yangxin
 * @Date: 2021-09-18 11:12:26
 * @Last Modified by: yangxin
 * @Last Modified time: 2021-11-17 15:45:15
 */
import WlPic from "@packages/components/Common/WlPic/src/index.vue";
export default {
  name: "AvatarCode",
  components: { WlPic },
  props: {
    themeColor: {
      type: String,
      default: "#1C9FFF",
    },
    styleExtra: {
      type: Object,
      default: () => {},
    },
    text: {
      type: String,
      default: "",
    },
    isShowText: {
      type: Boolean,
      default: true,
    },
    imgUrl: {
      type: String,
      default: "https://wlmvp-cos.weiling.cn/frontend/xiaowei.jpg",
    },
    needCos: {
      type: Boolean,
      default: true,
    },
    cosSuffix: {
      type: String,
      default: "imageView2/1/w/100/h/100/q/85",
    },
  },
  methods: {
    onClickImg() {
      this.$emit("onClickImg", {
        text: this.text,
        url: this.imgUrl,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.avatar-code {
  width: fit-content;
  @extend %flex-middle-center;
  &-avatar {
    width: j(60);
    height: j(60);
    // width: 100%;
    // height: 100%;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #1c9fff;
    border: j(2) solid #1c9fff;
  }
  &-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>
