<template>
	<view class="disac fw" :style="{paddingBottom:itemTop,backgroundColor: backc}">
		<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 icon-box posir" :style="{width:iconwh,height:iconwh}" :class="ifShadow ? 'haveShadow' : ''">
					<image :src="item.iconsrc" mode="aspectFill" :style="{width: item.iconWidth +'rpx',height: item.iconHeight +'rpx'}"></image>
					<!-- <view class="posia fon24 textc bacf" v-if="item.num" style="right: -54rpx;bottom: -39rpx;border-radius: 100%; color: #666;">({{item.num}})</view> -->
				</view>
				<view class="clips1" :style="{color:titlec,fontSize:fonts,marginTop:titleTop}">{{item.title}}<text v-if="item.num" style="margin-left:3px; color:#666">({{item.num}})</text></view>
			</view>
		</block>
	</view>
</template>
<script>
	export default {
		name:'column-function',
		props:{
			list:{
				type:Array,
				default:()=>{
					return [
						{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题一',num:0},
						{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题二',num:0},
						{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题三',num:0},
						{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题四',num:0},
						{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题五',num:0},
						{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题五',num:0},
						{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题五',num:0},
					]
				}
			},
			ifShadow:{
				type:Boolean,
				default:true
			},
			// 背景颜色
			backc:{
				type:String,
				default:'transparent'
			},
			// 一排显示数量
			rowNum:{
				type:String,
				default:'5'
			},
			// 标题颜色
			titlec:{
				type:String,
				default:'#000000'
			},
			// 字体大小
			fonts:{
				type:String,
				default:'24rpx'
			},
			// 字体距离图标的距离
			titleTop:{
				type:String,
				default:'20rpx'
			},
			// item的顶部距离
			itemTop:{
				type:String,
				default:'30rpx'
			},
			// iconbox宽高
			iconwh:{
				type:String,
				default:'110rpx'
			}
		},
		data(){
			return {
				
			}
		},
		computed:{
			// 找图标高度最大值
			maxHeight() {
				let arr = [];
				let max = '';
				this.list.forEach(item=>{arr.push(item.iconHeight);})
				if(arr.length) {
					max = arr.reduce((a,b)=>{return b > a ? b : a})
				}
				return max;
			},
		},
		methods:{
			// 列表选择事件
			chooseGe(url,index) {
				// 抛出事件
				this.$emit('chooseGe',{url,index})
			}
		}
	}
</script>

<style>
	.icon-box{
		width: 110rpx;
		height: 110rpx;
		border-radius: 42%;
		
	}
	.haveShadow{
		background: linear-gradient(to top,#ff3574 0%,#fd5648 100%);
		box-shadow: 0rpx 10rpx 10rpx rgba(255, 53, 116, 0.6);
	}
</style>