<template>
	<view class="uni-layout-row" :class="{'after':after,'before':before}">
		<view :style="leftStyle">
			<slot name='left'></slot>
		</view>
		<view :style="rightStyle">
			<slot name='right'></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			layout:{
				type: Number,
				default:50
			},
			// 容器顶部边框
			before: {
				type: Boolean,
				default: false
			},
			// 容器底部边框
			after: {
				type: Boolean,
				default: true
			}
		},
		data(){
			return {
				proportion:50
			}
		},
		computed: {
			leftStyle() {
				if(this.layout<=100 && this.layout>=0){
					this.proportion=this.layout;
				}
				return {
					float: 'left',
					width: this.proportion===0?'0': this.proportion+'%'
				}
			},
			rightStyle() {
				return {
					float: 'right',
					width: (100-this.proportion)===0?'0': (100-this.proportion)+'%'
				}
			}
		},
		methods: {
		}
	}
</script>

<style>
	.uni-layout-row {
		display: flex;
		flex-direction: row;
		position: relative;
		line-height: 40px;
		height: 40px;
	}
	
	.uni-layout-row.before::before {
		position: absolute;
		right: 0;
		top: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #c8c7cc;
		z-index: 99; /* 这里会被input覆盖1px给了一个置顶 */
	}
	
	.uni-layout-row.after::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #c8c7cc;
	}
	
</style>
