<template>
	<view class="tui-overflow__text"
		:class="[type==1?'tui-overflow__hidden':'',type==2 && !removeGradient?'tui-gradient__hidden':'',lineClamp==1 && type==1?'tui-text__nowrap':'']"
		:style="{width:width,height:type==1?'auto':(removeGradient?'auto':height),padding:type==2?padding:'0',background:backgroundColor,fontSize:size+'rpx',color:color,fontWeight:bold?'bold':'normal','-webkit-line-clamp':type==1?lineClamp:'none',textOverflow:textOverflow}"
		@tap="handleClick">
		<slot></slot>
		<view class="tui-gradient__box" :style="{background:getBgColor}" v-if="type==2 && !removeGradient"></view>
	</view>
</template>

<script>
	export default {
		name: "tui-overflow-hidden",
		props: {
			//内容区域宽度
			width: {
				type: String,
				default: '100%'
			},
			//内容区域高度，type=2时生效且需要传入具体值，高度值要低于实际内容高度
			height: {
				type: String,
				default: 'auto'
			},
			//padding值，type=2时生效
			padding: {
				type: String,
				default: '0'
			},
			//内容区域背景色
			backgroundColor: {
				type: String,
				default: 'transparent'
			},
			//文本字体大小 rpx
			size: {
				type: [Number, String],
				default: 32
			},
			//文本字体颜色
			color: {
				type: String,
				default: '#333'
			},
			//文本内容是否加粗 
			bold: {
				type: Boolean,
				default: false
			},
			//隐藏类型：1-文本超出设定行数隐藏，2-渐变隐藏
			type: {
				type: [Number, String],
				default: 1
			},
			//超出多少行开始隐藏，type=1时生效
			lineClamp: {
				type: [Number, String],
				default: 2
			},
			//clip|ellipsis|string,参考CSS text-overflow 属性
			textOverflow: {
				type: String,
				default: 'ellipsis'
			},
			//渐变隐藏遮罩背景色,与页面或内容区域背景色保持一致
			gradientColor: {
				type: String,
				default: '#fff'
			},
			//移除渐变隐藏，显示全部内容，type=2时生效
			removeGradient: {
				type: Boolean,
				default: false
			},
			//索引值
			index: {
				type: Number,
				default: 0
			}
		},
		computed: {
			getBgColor() {
				return `-webkit-linear-gradient(top, rgba(255,255,255,0), ${this.gradientColor} 100%)`
			}
		},
		methods: {
			handleClick(e) {
				this.$emit('click', {
					index: this.index
				})
			}
		}
	}
</script>

<style scoped>
	.tui-overflow__text {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.tui-overflow__hidden {
		display: -webkit-box;
		overflow: hidden;
		word-break: break-all;
		white-space: normal;
		-webkit-box-orient: vertical;

	}

	.tui-gradient__hidden {
		display: block;
		overflow: hidden;
		word-break: break-all;
	}

	.tui-text__nowrap {
		display: inline-block !important;
		word-break: normal !important;
		white-space: nowrap !important;
	}

	.tui-gradient__box {
		width: 100%;
		position: absolute;
		top: 0;
		height: 100%;
		left: 0;
	}
</style>
