<!--
 * @Descripttion: 用户头像
-->
<template>
	<div class="xavatar" @click="getUser(data)">
		<el-avatar v-if="data.anonymous" title="匿名发布" size="small">匿</el-avatar>
		<el-avatar v-else :src="data[name]" size="small">空</el-avatar>
		<label v-if="options.subfield" class="input-mask">
			<input class="el-input__inner" type="text" readonly :value="data[options.subfield]">
		</label>
	</div>
	<el-drawer type="primary" :with-header="false" append-to-body="true" v-if="visible" v-model="visible" :size="options.size || 1000" :show-close="false" style="overflow: initial;" destroy-on-close @closed="visible=false;$emit('closed')">
	    <el-button type="danger" @click="closeUser" class="userdrawerclose" icon="el-icon-close"> </el-button>
		<x-user v-model="data"></x-user>
	</el-drawer>
</template>




<script>
	export default {
		props: {
			modelValue: { type: Object, default: () => {} },
			options: { type: Object, default: () => {} },
			name: { type: String, default: "avatar" },
		},
		data() {
			return {
				data: this.modelValue,
				visible:false,
			}
		},
		watch:{
			
		},
		mounted() {
		},
		methods: {

			closeUser(){
				this.visible = false;
			},
			getUser(){

				// 无法找到会员
				if (!this.data.uid && !this.data.uin) {
					return false;
				}

				this.visible = true
			},
		}
	}
</script>

<style scoped>
	
	.xavatar{
		display: flex;align-items: center;cursor: pointer; 
	}

	.userdrawerclose {
		position: absolute; 
		position: absolute; 
		top: 148px; 
		left: -36px; 
		border-top-right-radius: 0px; 
		border-bottom-right-radius: 0px; 
		padding: 6px; 
		font-size: 22px; 
		font-weight: bolder;
	} 


	.xavatar .input-mask {
	  	margin-left: 28px;
	    z-indexz: 1;
	    position: absolute;
	}

	.xavatar .input-mask::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  pointer-events: auto;
	  cursor: pointer;
	}
</style>
