<style lang="less" scoped>
  @import './Index.less';
</style>

<template>
  <div id="personalPhoto">
   <div v-if="picture">
       <img class="avatar" :src="picture" >
    </div>
    <div v-else style="display: flex;align-items: center;justify-content: center;">
        <div class="fakeAvatar" 
        :style="{backgroundColor: randomColor, width: width, height: height, fontSize: fontSize}"
        >
            {{  getChinese(name) }}
        </div>
    </div>
  </div>
</template>

<script>

export default {
    props:{
      name: String,
      picture: String,
      color: String,
      fontSize: {
        type: String,
        default: '1rem'
      },
      width: {
        type: String,
        default: '40px'
      },
      height: {
        type: String,
        default: '40px'
      }
    },
  data(){      
    return {
      
    }
  },
  created() {
  },
  computed:{
    randomColor: function(){
      if(!this.color){
        let r = Math.floor(Math.random()*255);
        let g = Math.floor(Math.random()*255);
        let b = Math.floor(Math.random()*255);
        return 'rgba('+ r +','+ g +','+ b +',0.8)';
      } else {
        return this.color;
      }
    }
  },
  methods: {
	  getChinese(strValue) {  
	      var reg = /[\u4e00-\u9fa5]/g;
	      var names = strValue.match(reg);
		  if(names){
			  return names.join("").substring(names.length - 2)
		  }else{
			  return strValue.substr(0,2)
		  }
	  } 
  },
  mounted(){
  }
}
</script>
