<template>
	<view class="claims-detail">
		<u-navbar title="理赔详情" titleStyle="{'font-weight':'500','font-size':'32rpx'}" height="108rpx"></u-navbar>
		<view class="claims-body">
			<view class="claims-top" v-if="type==1">
				<view class="top-title" >
					<image src="../../static/img/title-img1.png"></image>
					<text> 验蟹师审核中</text>
				</view>
				<view class="card-tips">
					等待验蟹师审核，<text>{{restTime}}</text>后将自动理赔
				</view>
				<view class="card-info">
					<view class="card-time">
						2024.06.01 12:24
					</view>
					<view class="card-price">
						预计理赔<text>23.67</text>
					</view>
				</view>
			</view>
			<view class="claims-top" v-if="type==2">
				<view class="top-title" >
					<image src="../../static/img/title-img2.png"></image>
					<text> 理赔完成</text>
				</view>
				<view class="card-tips">
					理赔款已赔付至您的钱包余额，请您查收
				</view>
				<view class="card-info">
					<view class="card-time">
						2024.06.01 12:24
					</view>
					<view class="card-price">
						预计理赔<text>23.67</text>
					</view>
				</view>
			</view>
			<view class="claims-top disagree" v-if="type==3">
				<view class="top-title" >
					<image src="../../static/img/title-img3.png"></image>
					<text> 验蟹师驳回</text>
				</view>
				<view class="card-tips">
					未提交 3 只死蟹在一张照片中的合影
				</view>
				<view class="card-info">
					<view class="card-time">
						2024.06.01 12:24
					</view>
					<view class="card-price">
						预计理赔<text>23.67</text>
					</view>
				</view>
			</view>
			<view class="claims-process">
				<view class="title">理赔进度</view>
				<view class="body">
					<!-- 验蟹师通过申请 -->
					<view class="process-item" v-if="type==2">
						<view class="process-title" >
							<view :class="['process-title-circle',{act: process==3}]"></view>
							<view :class="['process-title-text',{act: process==3}]">验蟹师通过申请</view>
						</view>
						<view class="process-line"></view>
						<view class="process-text">
							验蟹师已确认并通过理赔申请
						</view>
						<view class="process-date">
							2024-06-03 8:37
						</view>
					</view>
					<!-- 验蟹师驳回申请 -->
					<view class="process-item" v-if="type==3">
						<view class="process-title" >
							<view :class="['process-title-circle',{act: process==3}]"></view>
							<view :class="['process-title-text',{act: process==3}]">验蟹师驳回申请</view>
						</view>
						<view class="process-line"></view>
						<view class="process-text">
							未提交 3 只死蟹在一张照片中的合影
						</view>
						<view class="process-date">
							2024-06-03 8:37
						</view>
					</view>
					<!-- 等待验蟹师处理 -->
					<view class="process-item">
						<view class="process-title">
							<view :class="['process-title-circle',{act: process==2}]"></view>
							<view :class="['process-title-text',{act: process==2}]">等待验蟹师处理</view>
						</view>
						<view class="process-line"></view>
						<view class="process-text">
							验蟹师同意后将理赔到您的微信钱包。如验蟹师超过3天未处理，系统将自动为您理赔。
						</view>
						<view class="process-date">
							2024-06-02 19:37
						</view>
					</view>
					<!-- 理赔信息已提交 -->
					<view class="process-item">
						<view class="process-title">
							<view :class="['process-title-circle',{act: process==1}]"></view>
							<view :class="['process-title-text',{act: process==1}]">理赔信息已提交</view>
						</view>
						<view class="process-text">
							2 两 公蟹
						</view>
						<view class="process-img-box">
							<view class="img-item">
								<image src="https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"></image>
							</view>
							<view class="img-item">
								<image src="https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"></image>
							</view>
							<view class="img-item">
								<image src="https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"></image>
							</view>
						</view>
						<view class="process-date">
							2024-06-01 12:24
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="claims-btn" v-if="type!=2">
			<view class="btn-border" v-if="type==1">
				<button>撤销理赔</button>
			</view>
			<view class="left-btn" v-if="type==3">
				<button>补充材料</button>
			</view>
			<view class="right-btn" v-if="type==3">申请蟹联网介入</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				type:3,
				restTime:"12:23:21",
				process:3
			}
		}
	}
</script>

<style lang="scss">
	.claims-body{
		width: 750rpx;
		min-height: 100vh;
		background: #F3F4F5;
		margin-top: 220rpx;
		padding: 24rpx 36rpx;
		box-sizing: border-box;
		// 理赔状态
		.claims-top{
			width: 678rpx;
			height: 210rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.top-title{
				width: 260rpx;
				height: 50rpx;
				display: flex;
				box-sizing: border-box;
				>image{
					height: 40rpx;
					width: 40rpx;
					margin-top: 4rpx;
				}
				>text{
					font-weight: 600;
					font-size: 36rpx;
					color: #2388FF;
					margin-left: 4rpx;
					text-align: center;
				}
			}
			.card-tips{
				font-weight: 400;
				font-size: 24rpx;
				color: #555555;
				line-height: 34rpx;
				text-align: left;
				>text{
					color: #FF2D46 ;
				}
			}
			.card-info{
				display: flex;
				justify-content: space-between;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 34rpx;
				height: 67rpx;
				.card-price{
					>text{
						margin-left: 12rpx;
						font-weight: 600;
						font-size: 48rpx;
						color: #FF2D46;
						line-height: 67rpx;
						&::before{
							content: '¥';
							font-size: 24rpx;
							margin-right: 6rpx;
						}
					}	
				}
			}
			&.disagree{
				.top-title{
					>text{
						color: #FF2D46;
					}
				}
			}
		}
		// 理赔进度
		.claims-process{
			margin-top: 12rpx;
			width: 678rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;
			// 理赔进度标题
			.title{
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				line-height: 45rpx;
			}
			// 理赔进度内容
			.body{
				// 进度
				.process-item{
					//background-color: antiquewhite;
					position: relative;
					//保证line跟随每个item移动
				}
				.process-title{
					display: flex;
					height: 40rpx;
					margin-top: 20rpx;
					.process-title-circle{
						width: 32rpx;
						height: 32rpx;
						background: #BFBFBF;
						border-radius: 100rpx;
						margin-top: 4rpx;
						z-index: 10;
						&.act{
							background: #2388FF;
						}
					}
					.process-title-text{
						font-weight: 500;
						font-size: 28rpx;
						color: rgba(34,34,34,0.6);
						margin-left: 16rpx;
						&.act{
							color: #2388FF;
						}
					}
				}
				.process-line{
					width: 0rpx;
					height: 170rpx;
					border: 3rpx dashed #C8CACB;
					position: absolute;
					z-index: 5;
					top: 16rpx;
					left: 14rpx;
				}
				//进度详情
				.process-text{
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(34,34,34,0.6);
					line-height: 34rpx;
					margin-top: 12rpx;
					margin-left: 48rpx;
				}
				.process-date{
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(0,0,0,0.3);
					line-height: 34rpx;
					margin-top: 12rpx;
					margin-left: 48rpx;
				}
				.process-img-box{
					margin-top: 12rpx;
					margin-left: 48rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: left;
					.img-item{
						width: 194rpx;
						height: 210rpx;
						background: #F9F9F9;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						border: 2rpx solid rgba(0,0,0,0.1);
						margin-right: 8rpx;
						box-sizing: border-box;
						>image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
	.claims-btn{
		width: 750rpx;
		height: 184rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		padding: 24rpx;
		box-sizing: border-box;
		.btn-border{
			width: 678rpx;
			height: 92rpx;
			background-image: linear-gradient(91deg, rgba(67, 161, 255, 1), rgba(47, 128, 249, 1));
			border-radius: 24rpx;
			padding: 2rpx;
			box-sizing: border-box;
			>button{
				width: 100%;
				height: 100%;
				border-radius: 24rpx;
				background: #FFFFFF;
				font-weight: 500;
				font-size: 28rpx;
				color: #2388FF;
				line-height: 39rpx;
				padding-top: 26rpx;
			}
		}
		.left-btn{
			width: 344rpx;
			height: 92rpx;
			border-radius: 24rpx;
			padding: 2rpx;
			background-image: linear-gradient(91deg, rgba(67, 161, 255, 1), rgba(47, 128, 249, 1));
			box-sizing: border-box;
			>button{
				width: 100%;
				height: 100%;
				border-radius: 24rpx;
				background: #FFFFFF;
				font-weight: 500;
				font-size: 28rpx;
				color: #2388FF;
				line-height: 39rpx;
				padding-top: 26rpx;
			}
		}
		.right-btn{
			width: 344rpx;
			height: 92rpx;
			background: linear-gradient( 91deg, #43A1FF 0%, #2F80F9 100%);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 39rpx;
			text-align: center;
			padding-top: 26rpx;
			box-sizing: border-box;
		}
	}
</style>