<template>
	<view class="u-text" :class="[{'text-twoline':lines>0},className]" :style="[valueStyle]" @tap="clickHandler">
		{{text}}
	</view>
</template>

<script>
	import value from './value.js';
	import props from './props.js';
	/**
	 * Text 文本
	 * @description 文本
	 * @tutorial https://www.uviewui.com/components/loading.html
	 * @property {String | Number}			text		显示的值
	 * @property {Boolean} 					bold		是否粗体，默认normal（默认 false ）
	 * @property {Boolean} 					block		是否块状（默认 false ）
	 * @property {String | Number} 			lines		文本显示的行数，如果设置，超出此行数，将会显示省略号
	 * @property {String} 					color		文本颜色（默认 '#A7ABB0' ）
	 * @property {String | Number} 			size		字体大小（默认 28rpx ）
	 * @property {String | Number} 			lineHeight	文本行高
	 * @property {String} 					align		文本对齐方式，可选值left|center|right|justify|start|end（默认 'left' ）
	 * @property {String} 					wordWrap	文字换行，可选值break-word|normal|anywhere（默认 'normal' ）
	 * @property {String} 					decoration	文字装饰，下划线，中划线等，可选值none|underline|line-through（默认 'none' ）
	 * @property {String} 					className	接收自定义类名
	 * @property {String} 					width	宽度（默认没有）
	 * @event {Function} click  点击触发事件
	 * @example <d-text text="我用十年青春,赴你最后之约"></d-text>
	 */
	export default {
		name: 'd-text',
		mixins: [value, props],
		computed: {
			valueStyle() {
				const style = {
					textDecoration: this.decoration,
					fontWeight: this.bold ? 'bold' : 'normal',
					textAlignLast: this.align,
					wordWrap: this.wordWrap,
					fontSize: uni.$u.addUnit(this.size)
				};
				this.width && (style.width = uni.$u.addUnit(this.width))
				style.color = this.color;
				this.lines && (style['-webkit-line-clamp'] = this.lines);
				this.lineHeight && (style.lineHeight = uni.$u.addUnit(this.lineHeight));
				this.block && (style.display = 'block');
				return uni.$u.deepMerge(style, uni.$d.addStyle(this.customStyle));
			},
			isMp() {
				let mp = false;
				// #ifdef MP
				mp = true;
				// #endif
				return mp;
			}
		},
		data() {
			return {};
		},
		onShow() {},
		methods: {
			addStyle(customStyle) {
				uni.$d.addStyle(customStyle)
			},
			clickHandler() {
				// 如果为手机号模式，拨打电话
				if (this.mode === 'phone' && uni.$u.test.mobile(this.text)) {
					uni.makePhoneCall({
						phoneNumber: this.text
					});
				}
				this.$emit('click');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.text-twoline {
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>
