<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" @click="show=true">
				<view class="title">您对本次验蟹结果满意吗？</view>
				<view class="bottom-img">
					<view class="img-con" v-for="item in rateList">
						<image :src="item.imgUrl" class="unclick"></image>
						<text class="unclick">{{item.name}}</text>
					</view>
				</view>
				<u-popup :show="show" mode="bottom" @open="open" :safeAreaInsetBottom="false" :round="16">
					<view class="rate-popup">
						<image src="../../static/img/popup-close.png" @click="close"></image>
						<view class="top-bg">
							<view class="top-bg-linear"></view>
						</view>
						<view class="rate-img">
							<view class="img-con" v-for="(item,index) in rateList" @click="click" :data-id="item.num" :key="index">
								<image :src="item.imgUrl" :class="{'click':item.isClicked}"></image>
								<text :class="{'click':item.isClicked}">{{item.name}}</text>
							</view>
						</view>
						<view class="rate-item-box">
							<view class="rate-item" v-for="item in clickList" @click="rateClick" :class="{'click':item.checked}" :data-id="item.num">
								{{item.name}}
							</view>
						</view>
						<view class="advice-input-box">
							<input placeholder="您的建议是我们前进的方向" placeholder-class="input-text"/>
						</view>
						<view class="assess-btn">
							匿名评价
						</view>
					</view>
				</u-popup>
			</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{
				show:false,
				type:0,
				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
				}],
				
				rateList:[{
					imgUrl:"../../static/img/anger.png",
					name:"很糟糕",
					num:0,
					isClicked:false,
				},
				{
					imgUrl:"../../static/img/happy1.png",
					name:"还可以",
					num:1,
					isClicked:false,
				},
				{
					imgUrl:'../../static/img/happy2.png',
					name:"太赞了",
					num:2,
					isClicked:true,
				}],
				
				//太赞了
				perfectList:[{
					name:"无损活蟹",
					num:0,
					checked:false
				},
				{
					name:"肉肥黄满",
					num:1,
					checked:false
				},
				{
					name:"色泽鲜亮",
					num:2,
					checked:false
				},
				{
					name:"肉质紧实",
					num:3,
					checked:false
				},
				{
					name:"口感极佳",
					num:4,
					checked:false
				},
				{
					name:"顶级品质",
					num:5,
					checked:false
				}],
				//还可以
				goodList:[{
					name:"质量一般",
					num:0,
					checked:false
				},
				{
					name:"肉质尚可",
					num:1,
					checked:false
				},
				{
					name:"比较新鲜",
					num:2,
					checked:false
				},
				{
					name:"活力一般",
					num:3,
					checked:false
				},
				{
					name:"品相尚可",
					num:4,
					checked:false
				},
				{
					name:"个头适中",
					num:5,
					checked:false
				}],
				//很糟糕
				badList:[{
					name:"品质极差",
					num:0,
					checked:false
				},
				{
					name:"死蟹很多",
					num:1,
					checked:false
				},
				{
					name:"无肉无黄",
					num:2,
					checked:false
				},
				{
					name:"异味明显",
					num:3,
					checked:false
				},
				{
					name:"肉质松散",
					num:4,
					checked:false
				},
				{
					name:"缺斤少两",
					num:5,
					checked:false
				}],
				clickType:0,
				clickList:this.perfectList
			}
		},
		mounted() {
			for(var item of this.rateList){
				if(item.isClicked == true){
					this.clickType = item.num
					if(this.clickType == 0){
						this.clickList = this.badList
					}else if(this.clickType == 1){
						this.clickList = this.goodList
					}else{
						this.clickList = this.perfectList
					}
				}
			}
		},
		methods:{
			open(){
				this.show = true
			},
			close(){
				this.show = false
			},
			click:function(e){
				var index = e.currentTarget.dataset.id
				var list = this.rateList
				this.clickType = index
				console.log(index)
				console.log(list[index].isClicked)
				if(list[index].isClicked == false){
					for (var item of this.rateList){
						item.isClicked = false
					}
					list[index].isClicked = true
					if(this.clickType == 0){
						this.clickList = this.badList
					}else if(this.clickType == 1){
						this.clickList = this.goodList
					}else{
						this.clickList = this.perfectList
					}
				}
				this.rateList = list
				console.log(this.rateList[index].isClicked)
			},
			rateClick:function(e){
				var index = e.currentTarget.dataset.id
				var list = this.clickList
				console.log(index)
				console.log(list)
				if(list[index].checked == false){
					list[index].checked = true
				}else{
					for (var item of this.rateList){
						item.checked = false
					}
					list[index].checked = false
				}
				this.clickList = list
			}
		}
	}
</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;
				margin-top: 34rpx;	
			}
			.img-con{
				display: flex;
				flex-direction: column;
				justify-content: center;
				>image{
					width: 72rpx;
					height: 72rpx;
					&.unclick{
						filter: grayscale(100%);
					}
					&.click{
						// width: 120rpx;
						// height: 120rpx;
						transform: scale(1.7);
						position: absolute;
						top: 20rpx;
					}
				}
				>text{
					font-size: 24rpx;
					color: rgba(0,0,0,0.3);
					line-height: 34rpx;
					text-align: center;
					&.unclick{
						color: #000000;
					}
					&.click{
						color: #000000;
						margin-top: 68rpx;
					}
				}
			}
			.rate-popup{
				width: 750rpx;
				height: 718rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding-bottom: 68rpx;
				border-radius: 16rpx;
				//关闭图标
				>image{
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					right: 0;
					top: -72rpx;
				}
				.top-bg{
					width: 750rpx;
					height: 88rpx;
					background: linear-gradient( 133deg, #D0FFBA 0%, #FFF6A1 100%);
					border-radius: 16rpx;
					.top-bg-linear{
						width: 750rpx;
						height: 88rpx;
						background:	linear-gradient(rgba(255, 255, 255, 0.1),rgba(255, 255, 255, 1));
					}
				}
				.rate-img{
					width: 544rpx;
					position: absolute;
					left: 102rpx;
					top: -28rpx;
					display: flex;
					justify-content: space-between;
					padding-top: 48rpx;
					//background-color: #2388FF;
				}
				.rate-item-box{
					width: 702rpx;
					height: 244rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					margin-top: 86rpx;
					margin-left: 24rpx;
					box-sizing: border-box;
					.rate-item{
						width: 344rpx;
						height: 72rpx;
						border-radius: 8rpx;
						border: 2rpx solid rgba(0,0,0,0.1);
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
						line-height: 39rpx;
						text-align: center;
						padding-top: 16rpx;
						box-sizing: border-box;
						&.click{
							background:rgba(35,136,255,0.1);
							border: 2rpx solid #2388FF;
						}
					}
				}
				.advice-input-box{
					width: 702rpx;
					height: 72rpx;
					background: #F8F8F8;
					border-radius: 8rpx;
					box-sizing: border-box;
					padding-top: 16rpx;
					margin: 24rpx;
					.input-text{
						text-align: center;
						font-weight: 400;
						font-size: 28rpx;
						color: rgba(0,0,0,0.5);
						line-height: 39rpx;
					}
				}
				.assess-btn{
					width: 702rpx;
					height: 92rpx;
					background: linear-gradient( 91deg, #43A1FF 0%, #2F80F9 100%);
					border-radius: 24rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 39rpx;
					text-align: center;
					padding-top: 26rpx;
					box-sizing: border-box;
					margin: 8rpx 24rpx 12rpx 24rpx;
				}
				
			}
		}
		.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>