<template>
  <div style="text-align: center;">
    <el-image v-if="imgUrl" :src="imgUrl" :style="{ width: width, height: height }" style="border-radius: 50%;margin: 0 auto;" fit="fill">
      <div slot="error" class="image-slot"><i class="el-icon-picture"></i></div>
    </el-image>
    <span class="img_round" v-else>
      <div class="user_name_div" :style="{ width: width, height: height, lineHeight: height, fontSize: fontSize + 'px' }">{{ name }}</div>
      <div class="user_img_bg" :style="{ width: width, height: height }"></div>
    </span>
  </div>
</template>
<script>
  export default {
    name: 'userImage',
    props: {
      width: {
        type: String,
        default: '40px'
      },
      height: {
        type: String,
        default: '40px'
      },
      id:{
        type: Number,
        default: 0
      },
      img_url: {
        type: String,
        default: ''
      },
      user_name: {
        type: String,
        default: ''
      },
      fontSize:{
        type: String,
        default: '16'
      }
    },
    // 数据
    data(){
      return {
        imgUrl: "",
        name: "",
		employeeMap:this.$getEmployeeList()
      }
    },
	watch:{
		id: function(val) {
			this.name_no()
		},
		img_url: function(val) {
			this.name_no()
		},
		user_name: function(val) {
			this.name_no()
		},
	},
	// 组件挂载完成
	mounted() {
	  this.name_no()
	},
    // 方法
    methods:{
      name_no(){
		 this.imgUrl=this.img_url
		 this.name=this.user_name
		let pattern = new RegExp("^[\u4E00-\u9FA5]+");
		if(this.name.length > 2){
		  if(pattern.test(this.name)){
		    this.name = this.name.substring(this.name.length-2,this.name.length)
		  }else{
		    this.name = this.name.substring(0,2)
		  }
		}  
        if(!this.imgUrl&&this.id&&this.employeeMap){
          this.imgUrl=this.employeeMap[this.id]? this.employeeMap[this.id].img_url:""
        }
      }
    },
  }
</script>
<style scoped>
.img_round {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.img_round .user_img_bg {
  border-radius: 50%;
  background: #238dfa;
}
.user_name_div {
  position: absolute;
  z-index: 1;
  text-align: center;
  color: #fff;
}
.logo_img {
  border-radius: 50%;
}
::v-deep .image-slot {
  font-size: 30px;
  line-height: 50px;
  text-align: center;
  background: #f1f1f1;
}
::v-deep .van-image {
  vertical-align: top;
}
::v-deep .el-image{
  display: block
}
</style>
