<template>
	<view class="item-author" style="display: flex;">
		<view>
			<u-avatar shape="circle" v-if="data.avatar && data.avatar!=''" :size="size" :src="data.avatar"></u-avatar>
			<view  v-else :sex="data.sex" random-bg-color >
				 <view v-if="data.sex == null" class="peo"></view>
				 <view v-else>
				 	<view :style="{width:width,height:height}" class="peo" v-if="data.sex === 1 "><image src="../../static/images/man.png" alt=""></view>
				 	<view :style="{width:width,height:height}" class="peo" v-else><image src="../../static/images/woman.png" alt=""></view>
				 </view>
			</view>
			<!-- <u-avatar v-else :size="25" random-bg-color :text="data.name" shape="square"></u-avatar> -->
			<!-- <view  v-else class="uavatar"><view class="uavatar-scale"> {{avatarText}}</view></view> -->
			<!-- <u-avatar v-else :size="25" icon="account" shape="square"></u-avatar> --> 
		</view>
		<view style="padding-left:10upx;padding-top: 4upx;font-size: 28upx;color: #666666;">{{data.name || data.sysCreateBy}}</view>
		<!-- <view v-if="showCode && data.code!=''" style="padding-left: 10upx;padding-top: 10upx;">({{data.code}})</view> -->
	</view>
</template>

<script>
	export default {
		props:{
			data:{
				type:Object,
				default(){
					return {
						avatar:'',
						name:'',
						info:'',
						code:'',
						sex:null,
					}
				}
			},
			showCode:{
				type:Boolean,
				default:true
			},
			size:{
				type:Number,
				default:24
			},
			width:{
				type:String,
				default:'24px'
			},
			height:{
				type:String,
				default:'24px'
			},
		},
		data(){
			return {
				//avatarText:''
			}
		},
		computed:{
			avatarText(){
				let text=this.data.name || this.data.sysCreateBy;
				if(text){
					let len=text.length;
					if(len>2){
						text=text.substring(len-2);
					}
				}
				return text;
			}
		},
		mounted() {
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped >
	.peo{
		width: 100%;
		height: 100%;
		// width: 25px;
		// height: 25px;
		image{
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	.uavatar{
		border:1px solid #73adfe;
		background-color: #d9e9ff;
		color:#73adfe;
		// text-align: center;
		font-size: 12px;
		// line-height: 25px;
		// vertical-align: middle;
		width: 25px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		.uavatar-scale{
			transform:scale(0.8);
		}
		
	}
	.item-author{
		font-size: 14upx;
		display: flex;
		align-items: center;
	}
</style>
