<template>
	<div class="father">
		<el-popover v-if="status == 1" :placement="placement" :width="width" :trigger="trigger">
			<template #reference>
				<div class="clip c1 pointer">{{textSync}}</div>
			</template>
			<el-scrollbar :max-height="maxHeight">
				{{text}}
			</el-scrollbar>
		</el-popover>
		<div v-else ref="text" class="clip c1">{{textSync}}</div>
		<div v-if="status == 0" ref="textMeasure" class="abs top op0 break">{{textSync}}</div>
		<div v-if="status == 0" ref="textMeasureWidth" class="abs top left op0 noBreak">{{textSync}}</div>
	</div>
</template>

<script>
	export default {
		name: "st-text-group",
		props:{
			text : [String,Number,Boolean,Array] ,
			placement:{
				type : String ,
				default : "top"
			},
            trigger:{
                type : String ,
                default : "click"
            },
			maxWidth:{
				type : Number,
				default : 500
			},
			maxHeight:{
				type : Number,
				default : 200
			}
		},
		data(){
			return {
				status : 0 ,
				width : 200
			}
		},
		computed:{
			textSync(){
				return this.$s.isNull(this.text) ? "--" : this.text ;
			}
		},
		watch:{
			text(){
				this.computeStatus() ;
			}
		},
		mounted() {
			this.computeStatus();
		},
		methods:{
			async computeStatus(){
				this.status = 0 ;
				await this.$nextTick();
				let height = this.$refs.text.offsetHeight ;
				let realHeight = this.$refs.textMeasure.offsetHeight ;
				let realWidth = this.$refs.textMeasureWidth.offsetWidth + 30 ;
				this.width = realWidth > this.maxWidth ? this.maxWidth : realWidth ;
				this.status = realHeight > height ? 1 : -1 ;
			}
		}
	}
</script>