<template>
  <div class="en-logo">
    <div
      v-if="shortenName.length > 0 && shortenName.length <= 8"
      :style="{ '--backgroundColor': color ? color : colorList[shortenName.length - 1] }"
      :class="logoClass"
    >
      <span>{{ shortenName }}</span>
    </div>
    <WlPic v-else :src="avatar_url || en_group_default_logo" class="logo-pic logo-name" />
    <span v-if="nameShow" :class="nameClass" :style="nameExtraStyle">{{ name }}</span>
  </div>
</template>

<script>
/*
 * @Author: yangxin
 * @Date: 2022-02-14 10:45:45
 * @Last Modified by: yangxin
 * @Last Modified time: 2022-03-24 18:22:44
 */
import WlPic from "@packages/components/Common/WlPic/src/index.vue";
import { en_group_default_logo } from "@packages/utils/cdn";
export default {
  name: "EnLogo",
  components: { WlPic },
  props: {
    shortenName: {
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: "",
    },
    avatar_url: {
      type: String,
      default: "",
    },
    colorList: {
      type: Array,
      default: () => [
        "rgba(188, 160, 219, 1)",
        "rgba(139, 202, 173, 1)",
        "rgba(206, 173, 158, 1)",
        "rgba(139, 202, 173, 1)",
        "rgba(206, 173, 158, 1)",
        "rgba(144, 163, 206, 1)",
        "rgba(188, 160, 219, 1)",
        "rgba(144, 163, 206, 1)",
      ],
    },
    color: {
      type: String,
      default: "",
    },
    nameShow: {
      type: Boolean,
      default: true,
    },
    nameExtraStyle: {
      type: Object,
      default: () => {},
    },
    nameWorkBreak: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    logoClass() {
      const len = this.shortenName.length;
      return len === 0 || len > 8 ? "logo-name logo-pic" : `logo-name logo-number-${len}`;
    },
    nameClass() {
      return {
        name: true,
        "name-line": !this.nameWorkBreak,
      };
    },
  },
  data() {
    return {
      en_group_default_logo,
    };
  },
};
</script>

<style lang="scss" scoped>
.en-logo {
  @extend %flex-middle;
  .logo-name {
    width: j(62);
    height: j(62);
    border-radius: j(10);
    background-color: var(--backgroundColor);
    text-align: center;
    color: white;
    box-sizing: border-box;
    flex-shrink: 0;
    @extend %flex-middle-center;
  }

  .logo-number-1 {
    font-size: j(30);
  }
  .logo-number-2 {
    font-size: j(24);
  }
  .logo-number-3,
  .logo-number-4 {
    font-size: j(18);
    padding: 0 j(4);
  }
  .logo-number-4 {
    padding: 0 j(13);
  }
  .logo-number-5,
  .logo-number-6 {
    font-size: j(16);
    padding: 0 j(6);
  }
  .logo-number-7,
  .logo-number-8 {
    font-size: j(14);
    padding: 0 j(3);
  }
  .name {
    margin-left: j(12);
    font-size: j(17);
    color: rgba(48, 50, 51, 1);
  }
  .name-line {
    @include textEllipsis(1);
  }
}
</style>
