<template>
	<view class="u-divider" :style="{
		height: height == 'auto' ? 'auto' : height + 'rpx',
		backgroundColor: bgColor
	}"
	 @tap="click">
		<view class="u-divider-line" :style="[lineStyle]"></view>
		<view class="u-divider-text" :style="{
			color: color,
			fontSize: fontSize + 'rpx'
		}">
			<slot />
		</view>
		<view class="u-divider-line" :style="[lineStyle]"></view>
	</view>
</template>

<script>
	/**
	 * alertTips 提示
	 * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
	 * @tutorial https://www.uviewui.com/components/divider.html
	 * @property {String Number} half-width 文字左或右边线条宽度，数值或百分比，数值时单位为rpx
	 * @property {String} border-color 线条颜色，优先级高于type（默认#dcdfe6）
	 * @property {String} color 文字颜色（默认#909399）
	 * @property {String Number} fontSize 字体大小，单位rpx（默认26）
	 * @property {String} bg-color 整个divider的背景颜色（默认呢#ffffff）
	 * @property {String Number} height 整个divider的高度，单位rpx（默认40）
	 * @property {String} type 将线条设置主题色（默认primary）
	 * @event {Function} click divider组件被点击时触发
	 * @example <u-divider color="#fa3534">长河落日圆</u-divider>
	 */
	export default {
		name: "u-divider",
		props: {
			// 单一边divider横线的宽度(数值)，单位rpx。或者百分比
			halfWidth: {
				type: [Number, String],
				default: 150
			},
			// divider横线的颜色，如设置，
			borderColor: {
				type: String,
				default: '#dcdfe6'
			},
			// 主题色，可以是primary|info|success|warning|error之一值
			type: {
				type: String,
				default: 'primary'
			},
			// 文字颜色
			color: {
				type: String,
				default: '#909399'
			},
			// 文字大小，单位rpx
			fontSize: {
				type: [Number, String],
				default: 26
			},
			// 整个divider的背景颜色
			bgColor: {
				type: String,
				default: '#ffffff'
			},
			// 整个divider的高度单位rpx
			height: {
				type: [Number, String],
				default: 40
			},
		},
		computed: {
			lineStyle() {
				let style = {};
				if (String(this.halfWidth).indexOf('%') != -1) style.width = this.halfWidth;
				else style.width = this.halfWidth + 'rpx';
				// borderColor优先级高于type值
				if (this.borderColor) style.borderColor = this.borderColor;
				else style.borderColor = this.$u.color[this.type];
				return style;
			}
		},
		methods: {
			click() {
				this.$emit('click');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.u-divider {
		width: 100%;
		position: relative;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		flex-direction: row;
	}

	.u-divider-line {
		border-bottom: 1px solid $u-border-color;
		transform: scale(1, 0.5);
		transform-origin: center;
	}

	.u-divider-text {
		white-space: nowrap;
		display: inline-flex;
		padding: 0 20rpx;
	}
</style>
