<template>
	<view class="table">
		<view class="table-header">
			<!-- 表格的表头 -->
			<view class="flex-1 text-center" v-for="item in header" :key="item">{{ item }}</view>
		</view>
		<!-- 表格的内容 -->
		<view class="table-row" v-for="(item,index) in data" :key="index">
			<view class="table-cell">
				<view>{{item.materialsName}}</view>
				<view>({{item.lowestPriceRange}}-{{item.highestPriceRange}})</view>
			</view>
			<view class="table-cell">{{item.area}}</view>
			<view class="table-cell">{{(Number(item.lowestPriceRange) * Number(item.area)) }} - {{ (Number(item.highestPriceRange) * Number(item.area))}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			header: { // 表头数据
				type: Array,
				default: () => []
			},
			data: { // 表格内容数据
				type: Array,
				default: () => []
			}
		},
		methods: {
			// 表格的点击事件
			handleRowClick(row) {
				console.log("点击了一行数据:", row);
			}
		}
	}
</script>

<style scoped>
	.table-header {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #666666;
		width: 100%;
		border-collapse: collapse;
		margin-bottom: 24rpx;
	}
	.table-cell {
		flex: 1;
		text-align: center;
		font-size: 24rpx;
		color: #333333;
	}

	.table-row {
		display: flex;
		align-items: center;

	}
	.table-row:not(:last-child){
		margin-bottom: 40rpx;
	}
	/* .table-row:hover {
		background-color: #f5f5f5;
		cursor: pointer;
	} */
</style>