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

<script>
	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
	import props from './props.js';
	/**
	 * line 線條
	 * @description 此組件壹般用於顯示壹根線條，用於分隔內容塊，有橫向和豎向兩種模式，且能設置0.5px線條，使用也很簡單
	 * @tutorial https://www.uvui.cn/components/line.html
	 * @property {String}			color		線條的顏色 ( 默認 '#d6d7d9' )
	 * @property {String | Number}	length		長度，豎向時表現為高度，橫向時表現為長度，可以為百分比，帶px單位的值等 ( 默認 '100%' )
	 * @property {String}			direction	線條的方向，row-橫向，col-豎向 (默認 'row' )
	 * @property {Boolean}			hairline	是否顯示細線條 (默認 true )
	 * @property {String | Number}	margin		線條與上下左右元素的間距，字符串形式，如"30px"  (默認 0 )
	 * @property {Boolean}			dashed		是否虛線，true-虛線，false-實線 (默認 false )
	 * @property {Object}			customStyle	定義需要用到的外部樣式
	 * @example <uv-line color="red"></uv-line>
	 */
	export default {
		name: 'uv-line',
		mixins: [mpMixin, mixin, props],
		computed: {
			lineStyle() {
				const style = {}
				style.margin = this.margin
				// 如果是水平線條，邊框高度為1px，再通過transform縮小壹半，就是0.5px了
				if (this.direction === 'row') {
					// 此處采用兼容分開寫，兼容nvue的寫法
					style.borderBottomWidth = '1px'
					style.borderBottomStyle = this.dashed ? 'dashed' : 'solid'
					style.width = this.$uv.addUnit(this.length)
					if (this.hairline) style.transform = 'scaleY(0.5)'
				} else {
					// 如果是豎向線條，邊框寬度為1px，再通過transform縮小壹半，就是0.5px了
					style.borderLeftWidth = '1px'
					style.borderLeftStyle = this.dashed ? 'dashed' : 'solid'
					style.height = this.$uv.addUnit(this.length)
					if (this.hairline) style.transform = 'scaleX(0.5)'
				}
				style.borderColor = this.color
				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uv-line {
		/* #ifndef APP-NVUE */
		vertical-align: middle;
		/* #endif */
	}
</style>
