<template>
	<view class="el-line" :style="[style]"></view>
</template>

<script setup>
	import { computed } from "vue";
	import { rpx2px } from "../../libs/utils.js";
	
	const props = defineProps({
		color: {
			type: String,
			default: '#e4e7ed'
		},
		// 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等
		length: {
			type: String,
			default: '100%'
		},
		// 线条方向，col-竖向，row-横向
		direction: {
			type: String,
			default: 'row'
		},
		// 是否显示细边框
		hairLine: {
			type: Boolean,
			default: true
		},
		// 线条与上下左右元素的间距，字符串形式，如"30rpx"、"20rpx 30rpx"
		margin: {
			type: String,
			default: '0'
		},
		// 线条的类型，solid-实线，dashed-方形虚线，dotted-圆点虚线
		borderStyle: {
			type: String,
			default: 'solid'
		}
	});
	
	const style = computed(()=>{
		let style = {};
		style.margin = props.margin;
		if(props.direction == 'row') {
			style.borderBottomWidth = '1px';
			style.borderBottomStyle = props.borderStyle;
			style.width = rpx2px(props.length,true);
			if(props.hairLine) style.transform = 'scaleY(0.5)';
		} else {
			style.borderLeftWidth = '1px';
			style.borderLeftStyle = props.borderStyle;
			style.height = rpx2px(props.length,true);
			if(props.hairLine) style.transform = 'scaleX(0.5)';
		}
		
		style.borderColor = props.color;
		return style;
	});
	
</script>

<style lang="scss" scoped>
	.el-line {
		vertical-align: middle;
	}
</style>