<template>
	<view class="checkManDetail">
		<u-navbar :bgColor="background" left-icon=" "></u-navbar>
		<view class="topImgCon">
			<image src="https://wx3.sinaimg.cn/mw1024/007bFxqGly1hrtnqdv7fpj30u00u0afj.jpg" mode="aspectFill" class="topBg"></image>
			<image src="../../static/img/2.png" class="topBtBg"></image>
			<view class="topTip taste">
				<image src="../../static/img/happy1.png"></image> 味道鲜美</view>
			<view class="topTip weight">
				<image src="../../static/img/happy1.png"></image>足斤足两</view>
			<view class="topTip quality">
				<image src="../../static/img/happy2.png"></image>肉质鲜嫩</view>
			<view class="man-id-card">
				<view class="name-box">
					<view class="name">验蟹师名字</view>
					<view class="visitor">
						<image src="../../static/img/eye.png"></image>
						访客<text class="visitor-num">121</text>
					</view>
				</view>
				<view class="label-box">
					<!-- <view class="label">
						<view class="label-img first">
							<image src="../../static/img/label1.png" class="labelBg"></image>
<!-- 							<image src="../../static/img/timeC.png"></image> -->
						<!-- </view>
						<view class="label-text first">从业14年</view>
					</view> -->
					<!-- <view class="label">
						<view class="label-img second">
							<image src="../../static/img/certification.png"></image>
						</view>
						<view>金牌验蟹师</view>
					</view> -->
				</view>
				<view class="man-detail">
					<view class="box left">
						<view class="detail-tip">
							<image src="../../static/img/map-pin@2x.png" class="detail-img"></image>
							南京市
						</view>
						<view class="detail-tip">
							<image src="../../static/img/magic-hands@2x.png" class="detail-img"></image>
							已验蟹 2W+
						</view>
					</view>
					<view class="box right">
						<view class="rate-text">评分</view>
						<view class="rate-value">{{valueCheckman}}</view>
						<view class="rate">
							<u-rate :count="count" v-model="valueCheckman" size="20rpx" :allowHalf="true"></u-rate>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bodyCon">
			<view class="claims-box" v-if="type==0">
				<view class="title">缺斤少两，<text>三步</text>轻松理赔</view>
				<view class="title-add">蟹联网理赔成功率 99%</view>
				<view class="part3">
					<view class="steps-box left">
						<view class="steps-num">01</view>
						<view class="steps-con">提交快递信息</view>
						<view class="row left">
							<image src="../../static/img/row.png"></image>
						</view>
					</view>
					<view class="steps-box center">
						<view class="steps-num">02</view>
						<view class="steps-con">补充订单信息</view>
						<view class="row right">
							<image src="../../static/img/row.png"></image>
						</view>
					</view>
					<view class="steps-box right">
						<view class="steps-num">03</view>
						<view class="steps-con">上传证明材料</view>
					</view>
				</view>
				<view class="part4">
					<button class="claims-btn">
						前往理赔
						<image src="../../static/img/chevron-right-small@2x.png"></image>
					</button>
				</view>
			</view>
			<claims-card class="claims-card" v-if="type!=0" :type="type" bodyHeight="344rpx"></claims-card>
			<view class="line"></view>
			<view class="claims-assess-box">
				<view class="title">您对本次验蟹结果满意吗？</view>
				<view class="bottom-img">
					<view class="img-con">
						<image src="../../static/img/anger.png"></image>
						<text>很糟糕</text>
					</view>
					<view class="img-con">
						<image src="../../static/img/happy1.png"></image>
						<text>还可以</text>
					</view>
					<view class="img-con">
						<image src="../../static/img/happy2.png"></image>
						<text>太赞了</text>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="assess-box">
				<view class="assess-top">
					<view class="left">
						<view class="title">用户评价</view>
						<view class="title-add">已有 {{customerNum}} 名用户参与评价</view>
					</view>
					<view class="right">
						<u-rate :count="count" v-model="valueCustomer" size="20rpx" :allowHalf="true"></u-rate>
						<view class="rate-value">{{valueCustomer}}</view>
					</view>
				</view>
				<view class="assess-body">
					<view class="assess-item" v-for="item in assessList">
						{{item.name}}{{item.num}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import claimsCard from './components/claimsCard.vue'
	export default {
		components:{claimsCard,},
		data(){
			return{
				type:3,
				background:"transparent",
				valueCheckman:4.9,
				valueCustomer:3.9,
				count:5,
				customerNum:6712,
				assessList:[{
					name:"味道鲜美",
					num:8
				},
				{
					name:"饱满香浓",
					num:6
				},
				{
					name:"蟹膏浓郁",
					num:10
				},
				{
					name:"味道好",
					num:8
				},
				{
					name:"肉质鲜嫩",
					num:8
				},
				{
					name:"足斤足两",
					num:12
				}]
			}
		}
	}
</script>

<style lang="scss">
	.checkManDetail{
	}
	.topImgCon{
		width: 750rpx;
		height: 750rpx;
		position: relative;
		.topBg{
			width: 100%;
			height: 100%;
			z-index: 5;
		}
		.topBtBg{
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 96rpx;
			z-index: 10;
		}
		.topTip{
			width: 184rpx;
			height: 56rpx;
			background: rgba(0,0,0,0.2);
			border-radius: 56rpx 56rpx 56rpx 56rpx;
			position: absolute;
			display: flex;
			justify-content: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 34rpx;
			text-align: center;
			padding-top: 12rpx;
			box-sizing: border-box;
			>image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
			&.taste{
				left: 124rpx;
				top: 360rpx;
			}
			&.weight{
				left: 316rpx;
				top: 434rpx;
			}
			&.quality{
				left: 416rpx;
				top: 360rpx;
			}
		}
		.man-id-card{
			z-index: 12;
			width: 678rpx;
			height: 338rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 14rpx 58rpx 0rpx rgba(100,100,111,0.2);
			border-radius: 24rpx;
			position: absolute;
			top: 532rpx;
			left: 36rpx;
			padding: 28rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.name-box{
				height: 78rpx;
				display: flex;
				justify-content: space-between;
				.name{
					font-weight: 600;
					font-size: 56rpx;
					color: #222222;
					line-height: 78rpx;
				}
				.visitor{
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(34,34,34,0.6);
					line-height: 34rpx;
					text-align: left;
					display: flex;
					>image{
						height: 32rpx;
						width: 32rpx;
						margin-right: 4rpx;
					}
					>text{
						font-weight: 600;
						font-size: 26rpx;
						color: #222222;
						line-height: 36rpx;
						margin-left: 4rpx;
					}
				}
				
			}
			.label-box{
				height: 40rpx;
				// background-color: rebeccapurple;
				// display: flex;
				// position: relative;
				// .label{
				// 	height: 40rpx;
				// 	width: 152rpx;
				// 	display: flex;
				// 	font-weight: 400;
				// 	font-size: 20rpx;
				// 	color: #FFFFFF;
				// 	line-height: 28rpx;	
				// 	.label-img{
				// 		.labelBg{
				// 			height: 36rpx;
				// 			width: 36rpx;
				// 		}
				// 	}
				// 	.label-text{
				// 		width: 112rpx;
				// 		height: 30rpx;
				// 		border-radius: 4rpx;
				// 		text-align: center;
				// 		&.first{
				// 			background: #2388FF;
				// 		}
				// 	}
					
				// }
			}
			.man-detail{
				width: 622rpx;
				height: 134rpx;
				display: flex;
				justify-content: space-between;
				.box{
					width: 310rpx;
					height: 134rpx;
					background: #F8F9FA;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					&.left{
						padding: 24rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.detail-tip{
							height: 36rpx;
							font-weight: 400;
							font-size: 26rpx;
							color: #333333;
							line-height: 36rpx;
							text-align: left;
							display: flex;
							.detail-img{
								width: 36rpx;
								height: 36rpx;
								margin-right: 8rpx;
							}
						}
					}
					&.right{
						position: relative;
						box-sizing: border-box;
						.rate-text{
							position: absolute;
							right:24rpx;
							top:24rpx;
							font-weight: 400;
							font-size: 26rpx;
							color: #B2B2B2;
							line-height: 36rpx;
						}
						.rate-value{
							position: absolute;
							left: 34rpx;
							top:20rpx;
							font-family: D-DIN-DIN, D-DIN-DIN;
							font-weight: bold;
							font-size: 92rpx;
							color: #FF480B;
							line-height: 92rpx;
							display: flex;
						}
						.rate{
							position: absolute;
							left: 162rpx;
							bottom: 36rpx;
						}
						
					}
				}
				
			}
		}
	}
	
	.bodyCon{
		position: absolute;
		top: 878rpx;
		.claims-box{
			width: 750rpx;
			height: 414rpx;
			background: #FFFFFF;
			//background-color: #FF480B;
			padding: 32rpx 36rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.part3{
				height: 120rpx;
				display: flex;
				position: relative;
				.steps-box{
					height: 120rpx;
					background: linear-gradient( 180deg, rgba(51,135,251,0.05) 0%, rgba(51,135,251,0.1) 100%);
					width: 240rpx;
					border-radius: 16rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 10rpx 0 12rpx 24rpx;
					box-sizing: border-box;
					&.center{
						width: 266rpx;
						padding-left: 56rpx;
					}
					&.right{
						padding-left: 60rpx;
					}
				}
				.steps-num{
					font-family: D-DIN-DIN, D-DIN-DIN;
					font-weight: bold;
					font-size: 48rpx;
					color: #3387FB;
					line-height: 67rpx;
					text-align: left;
				}
				.steps-con{
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(34,34,34,0.6);
					line-height: 34rpx;
					text-align: left;
				}
				.row{
					height: 180rpx;
					width: 80rpx;
					>image{
						height: 100%;
						width: 100%;
					}
					&.left{
						position: absolute;
						left: 194rpx;
						top: -30rpx;
					}
					&.right{
						position: absolute;
						right: 168rpx;
						top: -30rpx;
					}
				}
			}
			.part4{
				
				.claims-btn{
					width: 678rpx;
					height: 92rpx;
					background: #FFFFFF;
					border-radius: 98rpx 98rpx 98rpx 98rpx;
					border: 2rpx solid #2388FF;
					display: flex;
					justify-content: center;
					font-weight: 500;
					font-size: 28rpx;
					color: #2388FF;
					line-height: 39rpx;
					padding-top: 26rpx;
					>image{
						width: 43rpx;
						height: 43rpx;
					}
				}
			}
		}
		.claims-assess-box{
			width: 750rpx;
			height: 254rpx;
			background: #FFFFFF;
			//background-color: aqua;
			padding: 32rpx 36rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.bottom-img{
				width: 496rpx;
				height: 106rpx;
				margin-left: 96rpx;
				display: flex;
				justify-content: space-between;
				.img-con{
					display: flex;
					flex-direction: column;
					>image{
						width: 72rpx;
						height: 72rpx;
						filter: grayscale(100%);
					}
					>text{
						font-size: 24rpx;
						color: #000000;
						line-height: 34rpx;
						text-align: center;
					}
				}
			}
		}
		.assess-box{
			width: 750rpx;
			height: 284rpx;
			background: #FFFFFF;
			//background-color: blueviolet;
			padding: 32rpx 36rpx 28rpx 36rpx;
			margin-bottom: 68rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.assess-top{
				display: flex;
				justify-content: space-between;
				.left{
					width: 308rpx;
					height: 98rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}
				.right{
					display: flex;
					position: relative;
					height: 92rpx;
					.u-rate{
						position: absolute;
						bottom: 12rpx;
						right: 140rpx;
					}
					.rate-value{
						font-family: D-DIN-DIN, D-DIN-DIN;
						font-weight: bold;
						font-size: 92rpx;
						color: #FF480B;
						line-height: 92rpx;
					}
				}
			}
			.assess-body{
				width: 680rpx;
				height: 108rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: left;
				.assess-item{
					width: 160rpx;
					height: 50rpx;
					background: #F5F5F5;
					border-radius: 8rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(34,34,34,0.6);
					line-height: 34rpx;
					text-align: center;
					padding-top: 8rpx;
					box-sizing: border-box;
					margin-right: 8rpx;
				}
			}
			
		}
		.line{
			width: 714rpx;
			height: 0rpx;
			border: 2rpx solid rgba(0,0,0,0.04);
			margin: 12rpx 18rpx;
		}
		.title{
			font-weight: 600;
			font-size: 36rpx;
			color: #222222;
			line-height: 50rpx;
			>text{
				color: #2388FF;
			}
		}
		.title-add{
			font-weight: 400;
			font-size: 26rpx;
			color: rgba(0,0,0,0.5);
			line-height: 36rpx;
		}
	}
	
</style>