<template>
	<view class="contract-page">
		<view class="contract-list" v-if="contractList.length">
			<view
				class="contract-card"
				v-for="item in contractList"
				:key="item.id"
				@click="viewContract(item)"
			>
				<text class="contract-name">{{ item.title }}</text>
				<text class="contract-meta">签定时间：{{ item.signTime }}</text>
				<text class="contract-meta">签订人：{{ item.signatory }}</text>
			</view>
		</view>
		<view class="empty" v-else>暂无合同</view>
	</view>
</template>

<script>
import { MOCK_CONTRACT_LIST } from './mock.js'

export default {
	data() {
		return {
			contractList: [],
		}
	},
	onShow() {
		this.loadList()
	},
	methods: {
		loadList() {
			// 接口就绪后替换
			this.contractList = [...MOCK_CONTRACT_LIST]
		},
		viewContract(item) {
			const str = uni.$u.queryParams({
				id: item.id,
				title: item.title,
				fileType: item.fileType,
				fileUrl: item.fileUrl,
			})
			uni.navigateTo({ url: `/workbench/contract/detail${str}` })
		},
	},
}
</script>

<style lang="scss" scoped>
.contract-page {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 24rpx;
	box-sizing: border-box;
}

.contract-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.contract-card {
	background: #fff;
	border-radius: 12rpx;
	padding: 28rpx 32rpx;
}

.contract-name {
	display: block;
	font-size: 30rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 16rpx;
}

.contract-meta {
	display: block;
	font-size: 26rpx;
	color: #999;
	line-height: 1.6;
}

.empty {
	text-align: center;
	padding: 120rpx 0;
	font-size: 28rpx;
	color: #999;
}
</style>
