<template>
	<view class="grid-box" :style="{ 'border-radius': data.border_radius + 'px', 'background-color': data.background_color, 'margin-left': data.margin_horizontal + 'px', 'margin-right': data.margin_horizontal + 'px', 'margin-top': data.margin_vertical + 'px', 'margin-bottom': data.margin_vertical + 'px' }">
	    <view class="grid-box-item" :style="{ width: gridWidth + '%' }"  v-for="(value,i) in data.list" :key="i" @click="jump(value.link)">
	        <view class="grid-box-item-img" v-if="data.style == 1">
	            <image :src="value.image" :style="{ 'border-radius': data.image_border_radius + 'px' }"></image>
	        </view>
	        <text class="grid-box-item-text" :style="{ color: data.text_color }">{{ value.title }}</text>
	    </view>
	</view>
</template>

<script setup>
	import { navigateTo } from "@/el-ui/libs/navigate";
	import { ref,computed,onMounted } from "vue";
	
	const props = defineProps({
		data: {
			type: Object,
			default: function() {
				return {};
			}
		}
	});
	
	let gridWidth = ref("33.333");
	
	onMounted(()=>{
		let value = "33.333";
		if(props.data.nav_line_mun == 4){
			value = "25";
		}else if(props.data.nav_line_mun == 5){
			value = "20";
		}
				
		gridWidth.value = value;
	});
	
	const jump = (value)=>{
		navigateTo(value.path);
	}
	
</script>

<style lang="scss">
.grid-box{
	background: #fff;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding-top: 10px;
	overflow: hidden;
	.grid-box-item { 
		width: 25%;
		height: auto !important;
		height: 150rpx;
		min-height: 150rpx;
		text-align: center; 
		.grid-box-item-img { 
			display: block;
			image {
				width: 90rpx;
				height: 90rpx;
				overflow: hidden;
			}
		}
		.grid-box-item-text {
			display: block;
			font-size: 26rpx;
			color: #666;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
</style>