<!--
 * @Author: your name
 * @Date: 2020-10-21 14:50:27
 * @LastEditTime: 2021-08-24 11:32:18
 * @LastEditors: kongbo
 * @Description: In User Settings Edit
 * @FilePath: /packages/avatar/avatar.vue
-->
<template>
  <div class="wlavater" :style="avaterstyle">
    <img @error="defImg()" class="wlavatarimg" :src="imgUrl"/>
    <img ref="avater" :src="src || defsrc"/>
    <span v-if="userV" class="vicon" v-html="userV" ></span>
  </div>
</template>

<script>


  import mixin from '../mixin'
  export default {
    name: mixin.prefix+'avatar',
    props: ['src', 'type', 'width', 'height','vtype','user'],
    data(){
      return {
        defsrc:'//tva1.sinaimg.cn/default/images/default_avatar_male_180.gif',
        avaterstyle: '',
        vtypeImg:{
          0: '',
          1: '<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="#FFB502" d="M50 3.6c25.8 0 46.4 20.6 46.4 46.4S75.8 96.4 50 96.4 3.6 75.8 3.6 50 24.2 3.6 50 3.6"></path><path fill="#fff" d="M50 100c-13.4 0-26-5.2-35.4-14.6S0 63.4 0 50s5.2-26 14.6-35.4S36.6 0 50 0s26 5.2 35.4 14.6S100 36.6 100 50s-5.2 26-14.6 35.4S63.4 100 50 100zm0-92.8C26.4 7.2 7.2 26.4 7.2 50S26.4 92.8 50 92.8 92.8 73.6 92.8 50 73.6 7.2 50 7.2z"></path><g><path fill="#FFF" d="M74.7 31.4h-8.2L50 63.4l-16.5-32h-8.2l2 6.2 19.6 38.2h6.2l19.6-38.2z"></path></g></svg>',
          2: '<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="#00A4FF" d="M50 3.6c25.8 0 46.4 20.6 46.4 46.4S75.8 96.4 50 96.4 3.6 75.8 3.6 50 24.2 3.6 50 3.6"></path><path fill="#fff" d="M50 100c-13.4 0-26-5.2-35.4-14.6S0 63.4 0 50s5.2-26 14.6-35.4S36.6 0 50 0s26 5.2 35.4 14.6S100 36.6 100 50s-5.2 26-14.6 35.4S63.4 100 50 100zm0-92.8C26.4 7.2 7.2 26.4 7.2 50S26.4 92.8 50 92.8 92.8 73.6 92.8 50 73.6 7.2 50 7.2z"></path><g><path fill="#FFF" d="M75.8 30.4h-9.3L50 63.4l-16.5-33h-9.3l2.1 6.2 20.6 40.2h6.2l20.6-40.2z"></path></g></svg>',
          3: '<img width="100%" height="100%" src="data:image/png;base64,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" />',
        }
      }
    },
    created(){
      // console.log(this.type , this.width , this.height);
      if(this.type || this.width || this.height){this.setstyle()}
    },
    computed:{
      imgUrl(){
        return this.imgErr?this.defsrc:(this.src || this.defsrc)
      },
      userV(){
        if(typeof this.vtype != 'undefined'){
          return this.vtypeImg[this.vtype] || '';
        }
        if(!this.user){
          return ''
        }
        return this.vtypeImg[this.getVtype(this.user)] || ''
      }
    },
    methods:{
      defImg(){
        this.imgErr = true;
      },
      getVtype(user){
        const type = user.verified_type;
        const ext = user.verified_type_ext;
        const atype = user.user_auth_type;
        if (type === 0) {
          if (ext === 1 || atype === 3) return 3;
          return 1;
        } else if (type > 0 && type < 8) {
          return 2;
        } 
        return 0;
      },
      setstyle(){
        let width = '', height = '', type = '';
        this.width && (width = 'width:'+this.width+';');
        this.height && (height = 'height:'+this.height+';');
        this.type == 'large' && (type = 'width:60px;height:60px;');
        this.type == 'small' && (type = 'width:40px;height:40px;');
        this.avaterstyle = `${type}${height}${width}`;
      }
    }
  }
</script>

<style lang="less" scoped>
.wlavater{
  position: relative;
  width: 100%;
  height: 100%;
  .wlavatarimg{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
  }
  .vicon{
    position: absolute;
    right: -4%;
    bottom: -4%;
    width: 32%;
    height: 32%;
  }
}
</style>