<!-- slice(0,6), 6,14 -->
<template>
	<div style="display: flex;align-items: center;justify-content: center;padding: 30px;font-size: 36px;">热门企业</div>
	<div class="mt10">
		<a-row :gutter="[10,10]">
			<a-col span="18">
				<a-row :gutter="[10,10]">
					<a-col span="8" v-for="(item, index) in data1">
						<div class="compamy-box">
							<div class="compamy-img mt10">
								<a-image width="50px" height="50px" :src="item.image"></a-image>
							</div>
							<div class="compamy-title mt10">
								{{item.title}}
							</div>
							<div class="compamy-nature mt10">
								{{item.des}}
							</div>
						</div>
					</a-col>
				</a-row>
			</a-col>
			<a-col span="6">
				<a-row>
					<a-col span="24">
						<a-list size="small" bordered :data-source="data" style="height: 294px">
							<template #renderItem="{ item }">
								<a-list-item>{{ item }}</a-list-item>
							</template>
							<template #header>
								<div>Header</div>
							</template>
						</a-list></a-col>
				</a-row>
			</a-col>
		</a-row>
	</div>
	<template v-if="showData">
		<a-row :gutter="[10,10]">
			<a-col span="6" v-for="(item, index) in data2">
				<div class="compamy-box">
					<div class="compamy-img mt10">
						<a-image width="50px" height="50px" :src="item.image"></a-image>
					</div>
					<div class="compamy-title mt10">
						{{item.title}}
					</div>
					<div class="compamy-nature mt10">
						{{item.des}}
					</div>
				</div>
			</a-col>
		</a-row>
	</template>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue';
	let companyList = ref<object[]>([
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		},
		{
			image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
			title: '中山市海港城安域有限公司',
			des: '民营企业：100-1000人'
		}
	])
	let data1 = ref([])
	let data2 = ref([])
	let showData = ref(false)
	onMounted(() => {
		if (companyList.value.length > 14) {
			data1.value = companyList.value.slice(0, 6)
			data2.value = companyList.value.slice(6, 14)
			showData.value = true;
		} else {
			data1.value = companyList.value;
			showData.value = false;
		}
	})
</script>

<style lang="less" scoped>
	.compamy-box {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		padding: 10px;
		background-color: #ffffff;

		.compamy-img {}

		.compamy-title {}

		.compamy-nature {}


	}

	.mt10 {
		margin-bottom: 10px;
	}
</style>