<template>
	<view class="container">
		<view class="titleContent">
			<view v-for="item in title" :key="item.no" :style="{width:item.width}">{{item.name}}</view>
		</view>
		<view class="listContent">
			<view v-for="listItem in lists" :key="listItem.id" class="line">
				<view v-for="subItem in listItem.children" :key="subItem.no" :style="{color:subItem.link ? '#2D56A7' : '#333',width:subItem.width}">
					<text :style="{borderColor:subItem.link ? '#2D56A7' : 'transparent'}" @click="link(subItem.link)">{{subItem.value}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"listItem",
		props: {
			title:{
				type:Array,
				default:[{no:Number,name:String,width:Number}]
			},
			lists:{
				type:Array,
				default:[{id:Number,children:[{no:Number,value:String,link:String}]}]
			}
		},
		data() {
			return {
				
			};
		},
		mounted() {
			console.log(this.lists)
		},
		onLoad() {
			
		},
		methods:{
			link(val){
				if(val){
					uni.navigateTo({
						url:val
					})
				}else{
					return false;
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.container{
		height: 100%;
		background-color: #fff;
		.titleContent{
			color: #333;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			padding: 20rpx 36rpx 20rpx 24rpx;
			font-weight: bold;
			view{
				text-align: center;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}
		.listContent{
			font-size: 26rpx;
			.line{
				display: flex;
				align-items: center;
				text-align: center;
				padding: 20rpx 36rpx 5rpx 24rpx;
				text{
					border-bottom: 1px solid transparent;
				}
				view{
					border-bottom: 1px solid #F2F2F2;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
			
		}
	}
</style>