<template>
	<view class="carDetails">
		<view class="container">
			<view class="ul">
				<view class="li">船名：运程10</view>
				<view class="li">航次：HC97759809</view>
				<view class="li">贸易类型：外贸</view>
				<view class="li">进出口：进口</view>
				<view class="li">港口：巴塞罗那</view>
				<view class="li">提单号：TD6955975087</view>
				<view class="li">报关状态：未报关</view>
				<view class="li">报关单号：TD6955975087</view>
				<view class="li">场位：c4区15道*2</view>
				<view class="li">货代：上海海通国际汽车物流有限公司</view>
				<view class="li">联系人：张星星</view>
				<view class="li">联系方式：13266688888</view>
				<view class="li">品牌：特斯拉</view>
				<view class="li">车型：轿车</view>
				<view class="li">车型明细：轿车</view>
				<view class="li">型号：STAY-CONNECTB</view>
				<view class="li">源类型：新能源</view>
				<view class="li">数量：199</view>
				<view class="li">车长：199</view>
				<view class="li">车宽：199</view>
				<view class="li">车高：100</view>
				<view class="li">重量：1978</view>
				<view class="li">体积：979</view>
				<view class="li">单票数量：100</view>
				<view class="li">单票重量：1978</view>
				<view class="li">单票体积：979</view>
			</view>
			<view class="tableInfo">
				<view class="title">车架号明细</view>
				<uni-table ref="table" :loading="loading" border emptyText="暂无更多数据">
					<uni-tr>
						<uni-th width="150" align="center">序号</uni-th>
						<uni-th align="center">车架号/条形码</uni-th>
						<uni-th align="center">场位</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td align="center">{{ item.id }}</uni-td>
						<uni-td align="center">{{item.vinCod}}</uni-td>
						<uni-td align="center">{{ item.field }}</uni-td>
					</uni-tr>
				</uni-table>
				<view class="pagination">
					<uni-pagination :total="total" :pageSize="pageSize" v-model="pageCurrent" title="标题文字" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [{
					id: "01",
					vinCod: "CJH67892734895917",
					field: "A1-09-03"
				}, {
					id: "02",
					vinCod: "CJH67892734895917",
					field: "A1-09-03"
				}, {
					id: "03",
					vinCod: "CJH67892734895917",
					field: "A1-09-03"
				}],
				loading: false,
				// 每页数据量
				pageSize: 20,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 50,
			}
		},
		methods: {},
	}
</script>

<style lang="less" scoped>
	.carDetails {
		.container {
			padding: 30px 20px;
			background-color: #fff;

			.ul {
				display: flex;
				flex-wrap: wrap;
				padding: 20px;
				border-bottom: 1px solid #ccc;

				.li {
					width: 32%;
					font-weight: bold;
					margin-bottom: 10px;
				}
			}

			.tableInfo {
				padding: 20px;

				.title {
					font-size: 16px;
					font-weight: bold;
					margin-bottom: 20px;
				}

				/deep/.uni-table-th {
					background-color: #fafafa;
				}

				.pagination {
					margin-top: 10px;
				}
			}
		}
	}
</style>