<template>
	<view class="leaseInfo">
		<u-navbar title="签约详情" :title-bold="true"></u-navbar>
		<view class="content">
			<view class="top">
				<TopItem width="280rpx" height="210rpx" :info="info"></TopItem>
			</view>

			<view class="order">
				<view class="info">
					<view class="title">
						订单信息
					</view>
					<view class="item">
						<text class="text">合同编号：</text>P06023400
					</view>
					<view class="item">
						<text class="text"> 合同签注时间：</text> 2021-05-26
					</view>
					<view class="item">
						<text class="text"> 租赁年限：</text>20年
					</view>
					<view class="item">
						<text class="text"> 租赁到期时间：</text> 2041-05-26
					</view>

					<view class="item pdf">
						<text class="text"> 合同文件：</text>
						<view class="link" @click="toLink">
							<text class="link">链上查看</text>
							<u-icon name="arrow-right" size="24" style="margin-left: 12rpx;"></u-icon>
						</view>
					</view>

					<view class="item authority">
						<view class="text">
							使用权证：
						</view>
						<view class="img">
							<u-image width="100%" height="500rpx" src="../../../static/authority.png"
								border-radius="12rpx" style="margin-top: 24rpx;"></u-image>
						</view>
					</view>
				</view>
			</view>

			<!-- 证明 -->
			<view class="prove">
				<view class="title">
					订单信息
				</view>
				<view class="item">
					<text class="text">使用人姓名：</text>何生
				</view>
				<view class="item">
					<text class="text">使用人身份证号码：</text>何生
				</view>
				<view class="item img">
					<text class="text">死亡证明：</text>
					<u-image width="100%" height="500rpx" src="../../../static/authority.png" border-radius="12rpx"
						style="margin-top: 24rpx;"></u-image>
				</view>
				<view class="item img">
					<text class="text">火化证明：</text>
					<u-image width="100%" height="500rpx" src="../../../static/authority.png" border-radius="12rpx"
						style="margin-top: 24rpx;"></u-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TopItem from '../../../components/lease_list_item'
	export default {
		data() {
			return {
				info: {
					imgUrl: "../../../static/banner.png",
					name: '云凌藏隐陵园009号神塔',
					position: '72墓穴｜5层',
					location: '深圳市南山区桃源街道莫屋村24…',
					status: 2,
					serial: '合同编号：P06023400'
				},
			}
		},
		methods: {
			toLink() {
				uni.navigateTo({
					url: '../../mian/linkInfo/linkInfo'
				})
			}
		},
		components: {
			TopItem
		}
	}
</script>

<style scoped lang="scss">
	.leaseInfo {
		background-color: #f5f7fa;
	}

	.top {
		height: 372rpx;
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		background-color: #FFFFFF;
	}

	.order,
	.prove {
		background-color: #FFFFFF;
		padding: 46rpx 36rpx;
		margin-bottom: 24rpx;
		.title {
			display: flex;
			width: 100%;
			margin-bottom: 24rpx;
			font-size: 32rpx;
			color: #303133;
			font-weight: 600;
		}

		.item {
			width: 100%;
			margin-bottom: 14rpx;

			.text {
				color: #909399;
			}

			font-size: 28rpx;
			font-family: SF Pro;
			line-height: 36rpx;
			color: #303133;
			word-break:break-all;
		}

		.pdf {
			display: flex;
			justify-content: space-between;

			.link {
				color: #5173B9;
			}
		}
		
		.img {
			margin-bottom: 48rpx;
		}
	}
</style>
