<template>
	<view class="disac fw bacf" :style="{paddingBottom:itemTop}">
		<block v-for="(item,index) in list" :key="index">
			<view @tap="chooseGe(item.url,index)" class="disjcac fc pad-s30" :style="{width:['50%','50%','50%','33.3%','25%','20%'][rowNum],paddingTop:itemTop}">
				<view class="disjcac" :style="{height: maxHeight+'rpx'}">
					<image :src="item.iconsrc" mode="widthFix" :style="{width: item.iconWidth +'rpx',height: item.iconHeight +'rpx'}"></image>
				</view>
				<view class="clips1" :style="{color:titlec,fontSize:fonts,marginTop:titleTop}">{{item.title}}</view>
			</view>
		</block>
	</view>
</template>
<script>
	export default {
		name:'column-function',
		props:{
			list:{
				type:Array,
				default:()=>{
					return [
						{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题一'},
						{url:'',iconsrc:'/static/tabbar/icon-select-fun.png',iconWidth:60,iconHeight:60,title:'标题二'},
						{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题三'},
						{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
						{url:'',iconsrc:'/static/tabbar/icon-scan.png',iconWidth:60,iconHeight:60,title:'标题五'},
						{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题五'},
						{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题五'},
					]
				}
			},
			// 一排显示数量
			rowNum:{
				type:String,
				default:'5'
			},
			// 标题颜色
			titlec:{
				type:String,
				default:'#000000'
			},
			// 字体大小
			fonts:{
				type:String,
				default:'28rpx'
			},
			// 字体距离图标的距离
			titleTop:{
				type:String,
				default:'20rpx'
			},
			// item的顶部距离
			itemTop:{
				type:String,
				default:'30rpx'
			}
		},
		data(){
			return {
				
			}
		},
		computed:{
			// 找图标高度最大值
			maxHeight() {
				let arr = [];
				this.list.forEach(item=>{arr.push(item.iconHeight);})
				let max = arr.reduce((a,b)=>{return b > a ? b : a})
				return max;
			}
		},
		methods:{
			// 列表选择事件
			chooseGe(url,index) {
				// 抛出事件
				this.$emit('chooseGe',{url,index})
				if(url) {
					uni.navigateTo({url})
				}
			}
		}
	}
</script>

<style>
	
</style>