<template>
  <div class="avatar_wrap" :class="type">
    <div class="img_wrap" v-if="url">
      <img :src="url" alt="" class="avatar" @click="jump(uid)" :style="{width:avatar_width,height:avatar_width}"/>
      <slot name="focusbtn"></slot>
    </div>
    <div class="nickname">
      <div
        class="name"
        :style="{color:name_color,fontSize:name_font_size}"
      >
        {{ name }}
      </div>
      <img
        src="https://resource.yizhibo.com/v1/temp/ngx40v9llcg.png"
        class="vip"
        alt=""
        v-if="verified_type > 0 && verified_type < 8"
        :style="{width:name_font_size,height:name_font_size}"
      />
      <img
        src="https://resource.yizhibo.com/v1/temp/o7iqyrwcrvk.png"
        class="vip"
        alt=""
        v-if="verified_type == 0 && verified_type_ext != 1"
        :style="{width:name_font_size,height:name_font_size}"
      />
      <img
        src="https://resource.yizhibo.com/v1/temp/razqsbe7qjk.png"
        class="vip"
        alt=""
        v-if="verified_type == 0 && verified_type_ext == 1"
        :style="{width:name_font_size,height:name_font_size}"
      />
    </div>
    <div
      class="desc"
      v-if="desc"
      :style="{color:desc_color,fontSize:desc_font_size}"
    >
      {{ desc }}
    </div>
  </div>
</template>

<script>
import jump from "../utils/jump.js";
import mixin from '../mixin'
const prefixCls = mixin.prefix+'button';
export default {
  name: mixin.prefix+'user',
  props: {
    type: {
      type: String,
      default: "column"
    },
    uid: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      default: ""
    },
    desc: {
      type: String,
      default: ""
    },
    url: {
      type: String,
      default: ""
    },
    verified_type: {
      type: Number,
      default: -1
    },
    verified_type_ext: {
      type: Number,
      default: -1
    },
    name_color: {
      type: String,
      default: "#333"
    },
    desc_color: {
      type: String,
      default: "#333"
    },
    name_font_size: {
      type: String,
      default: "11px"
    },
    desc_font_size: {
      type: String,
      default: "10px"
    },
    avatar_width: {
      type: String,
      default: ""
    },
  },
  methods: {
    jump(uid) {
      if (this.type == "column") {
        jump.profile(uid);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.avatar_wrap {
  font-family: "PingFangSC-Regular";
  width: 100%;
  position: relative;
  line-height: 0;

  &.row {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    .img_wrap {
      position: relative;
      margin-right: 6px;
    }
    .avatar {
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
    .nickname {
      height: 100%;
      display: flex;
      align-items: center;
      max-width:80%;
      .name {
        max-width: 80%;
        line-height: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #371a07;
        font-size: 11px;
      }
      .vip {
        width: 10px;
        height: 10px;
        margin-left: 2px;
      }
    }
    .desc {
      font-size: 20px;
      height: 40px;
      color: #553119;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  &.column {
    text-align: center;
    .img_wrap {
      position: relative;
      width: 100%;
    }
    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-bottom: 10px;
      border: 1px solid #fff;
    }
    .nickname {
      height: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      .name {
        max-width: 78%;
        height: 18px;
        line-height: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
      }
      .vip {
        width: 12px;
        height: 12px;
        margin-left: 1px;
      }
    }
    .desc {
      font-size: 10px;
      height: 20px;
      opacity: 0.8;
      line-height: 20px;
      width: 78%;
      margin: 0 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
