<template>
	<view>
		<block v-for="(item,index) in list" :key="index">
			<view @tap="chooseEv(item.url,index)" class="disjbac fon28" :class="[ifLastLine ? 'bbot' : 'borbot',ifIcon ? 'pad-sx25' : 'pad-sx25']" :style="{borderBottomColor: ifLine ? linec : '#FFFFFF'}">
				<view class="disac flexs pad-y40">
					<image class="mar-y20 flexs" v-if="item.iconsrc && ifIcon" :src="item.iconsrc" mode="aspectFill" lazy-load :style="{width:item.iconWidth+'rpx',height:item.iconHeight+'rpx'}"></image>
					<view :style="{color:titlec,fontSize: fonts+'rpx'}" class="clips1">{{item.title}}</view>
				</view>
				<view class="disac">
					<view v-if="item.content" class="clips1" :style="{color:item.contentColor}">{{item.content}}</view>
					<i v-if="item.ifNext" class="icon icon-next" style="color: #999999;font-size: 28rpx;margin-left: 10rpx;"></i>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name:'column-function',
		props:{
			list:{
				type:Array,
				default:()=>{
					return [
						{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题一',content:'',contentColor:'#999999',ifNext:true},
						{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题二',content:'',contentColor:'#999999',ifNext:true},
						{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题三',content:'',contentColor:'#999999',ifNext:true},
					]
				}
			},
			// 标题颜色
			titlec:{
				type:String,
				default:'#000000'
			},
			// 是否显示左侧图标
			ifIcon:{
				type:Boolean,
				default:false
			},
			// 是否显示下划线
			ifLine:{
				type:Boolean,
				default:true
			},
			// 下划线颜色
			linec:{
				type:String,
				default:"#EEEEEE"
			},
			// 是否显示最后一条下划线
			ifLastLine:{
				type:Boolean,
				default:true
			},
			fonts:{
				type:String,
				default:'28rpx'
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
			// 列表选择事件
			chooseEv(url,index) {
				// if(url) {
				// 	uni.navigateTo({url})
				// }
				// 抛出事件
				this.$emit('chooseEv',{url,index})
			}
		}
	}
</script>

<style>
	
</style>