<template>
	<view class="peixunbanpage">
		<!-- 公司信息 -->
		<view class="companyinfo">
			<view class="newinfo">
				<image class="newinfoimg" v-if="task.avatar" :src="task.avatar" mode=""></image>
				<image class="newinfoimg" v-else src="../../../static/crowd/defaultAva.jpg" mode=""></image>
				<view class="newinfoM">
					<view class="newinfoMT">
						<view class="newnaem">
							{{task.name}}
						</view>
						<view class="newline">
							|
						</view>
						<view v-if="star && star != 0" class="raterow">
							<span> 评分：</span>
							<span style="color: #FA9C22;margin-right: 5rpx;">{{star}}</span>
						</view>
						<view v-else style="min-width: 120rpx;font-weight: 500;font-size: 26rpx;color: #808080;">
							暂无评分
						</view>
					</view>
					<view class="newinfoMB" v-if="task.tester_status == '云员工'">
						云员工
					</view>
					<view class="newinfoMB" v-else-if="task.tester_status =='个人'"
						style="background: linear-gradient(90deg, #5EA6FD, #1A81F9);">
						个人
					</view>
					<view class="newinfoMB" v-else
						style="background: linear-gradient(90deg, #99A4B3, #77818D);">
						未认证
					</view>
				</view>
				<!-- 在线简历 -->
				<view class="onlineJl" @click="goonline">
					在线简历
				</view>
			</view>
			<view class="tabnav">
				<view class="tabnavitem" :class="{'activeitem': activetab == 1}" @click="tabnavClick(1)">
					中标记录
				</view>
				<view class="tabnavitem" :class="{'activeitem': activetab == 2}" @click="tabnavClick(2)">
					收到的评价
				</view>
			</view>
		</view>

		<!-- 任务列表 -->
		<template v-if="activetab == 1">
			<block v-if="crowdlist.length">
				<view v-for="(item,key) of crowdlist" class="sign_list" @click="signupdetails(item.task_id)">
					<view
						style="display:flex;margin:0 12px 8px 0;justify-content: space-between;align-items: flex-end;">
						<view v-if='item.status==0' class="rightb"
							style="background: linear-gradient(90deg, #FFDC00, #ED9706);"> 竞标中
						</view>
						<view v-if='item.status==1' class="rightb"> 实施中 </view>
						<view v-if='item.status==3' class="rightb"
							style="background: linear-gradient(90deg, #FCA141, #FD6940);"> 待验收 </view>
						<view v-if='item.status==4' class="rightb"
							style="background: linear-gradient(90deg, #FCA141, #FD6940);"> 待付款 </view>
						<view v-if='item.status==2' class="rightb"
							style="background: linear-gradient(90deg, #FCA141, #FD6940);">竞标失败</view>
						<view v-if='item.status==5' class="rightb"
							style="background: linear-gradient(90deg, #1BF5B3, #08C78F);"> 已完成 </view>
						<view v-if='item.status==6' class="rightb"
							style="background: linear-gradient(90deg, #FCA141, #FD6940);"> 验收不通过 </view>
						<!-- <view v-if='item.status==2 && item.process_status==3' class="rightb" style="background: linear-gradient(90deg, #FCA141, #FD6940);">竞标成功</view> -->
						<p style="color:#FD461A;">￥{{item.price}} </p>
					</view>
					<view class="fline"></view>
					<view style="margin:12px 15px 0 15px;color:#333333;font-size:13px;line-height:27px;">
						<p>项目名称：{{item.project_name}}</p>
						<p>项目周期：{{item.period}}天</p>
					</view>
				</view>
			</block>
			<view v-else class="noreview">
				暂无任务
			</view>
		</template>


		<!-- 评价列表 -->
		<template v-if="activetab == 2">
			<block v-if="reviewList.length">
				<view class="pxitembox" v-for="it in reviewList" :key="it.comment_id">
					<view class="pxitemboxt">
						<view class="pxitemboxtl">
							<image class="pxitemboxtlimg" src="../../../static/crowd/defaultAva.jpg" mode=""></image>
							<!-- {来自{{it.from_city}}的伙伴} -->
							{{it.user_name}}
						</view>
						<view class="pxitemboxtr">
							{{dateFormat(new Date(it.create_time)) }}
						</view>
					</view>
					<view class="pxitemboxc">
						<view class="ratebox">
							<u-rate v-model="it.star" :current="2" :disabled="true" active-color="#fa9c22"
								inactive-color="#CDCECE"></u-rate>
						</view>
						<view class="pxitemboxcremark">
							{{it.content}}
						</view>
						<view class="pxitemboxctask" @click="goTaskDetail">
							{{it.project_name}}
						</view>
					</view>
				</view>
			</block>
			<view v-else class="noreview">
				暂无评论
			</view>

		</template>
	</view>
</template>

<script>
	import {
		findLabelValueByPropnew
	} from '@/utils/util.js'
	import mixin from '@/utils/mixin/index.js'
	import {
		dateFormat
	} from '@/utils/util.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				activetab: 1,
				task: {},
				crowdlist: [],
				reviewList: [],
				// 任务分页
				queryparams: {
					pageSize: 10,
					pageNum: 1,
				},
				queryparams1: {
					pageSize: 10,
					pageNum: 1,
				},
				userInfo: {},
				obj: {},
				userinform: {},
				star: 0
			}
		},
		onLoad(options) {
			const task = JSON.parse(decodeURIComponent(options.taskInfo))
			this.task = task
			this.getDetail()
			this.getTaskList()
			this.userinform = uni.getStorageSync('wxUserInfo');
			this.http.quickGet(
				`/crowdsource/user/commStar/${this.task.userId}`, true).then(res => {
				this.star = res.data.data ? res.data.data : 0
			})
		},
		methods: {
			dateFormat,
			findLabelValueByPropnew,
			// 去简历页
			goonline() {
				uni.navigateTo({
					url: '/pages/personal/personalresume/personalresume'
				})
			},
			// 获取用户信息及简历
			getDetail() {
				this.http.quickGet(
					`/crowdsource/tester/detail/${this.task.userId}/${this.task.taskId}`, true).then(res => {
					this.obj = res.data
					this.userInfo = res.data.data
					if (this.userInfo.avatar && this.userInfo.avatar.indexOf('http') == -1) {
						this.userInfo.avatar = this.http.baseUrl + this.userInfo.avatar
						console.log(this.userInfo.avatar);
					}
				})
			},
			// 跳转订单详情
			goTaskDetail() {},
			// 查询任务列表
			getTaskList() {
				this.http.quickGet(
					`/crowdsource/claim/my/${this.task.userId}?pageNum=${this.queryparams.pageNum}&pageSize=${this.queryparams.pageSize}`,
					true).then(res => {
					// status=0竞标中,1被选中也就是实施中,2项目结束
					this.crowdlist = res.data.rows
				})
			},
			// 查询评价列表
			getReviewList() {
				this.http.quickGet(
					`/comment/comments/${this.task.userId}?pageNum=${this.queryparams1.pageNum}&pageSize=${this.queryparams1.pageSize}`,
					false).then(res => {
					this.reviewList = res.data.rows
				})
			},
			// tabbar点击
			tabnavClick(val) {
				this.activetab = val
				if (val == 1) {
					this.getTaskList()
				} else {
					this.getReviewList()
				}
			},
			// 跳详情
			details(type, id) {
				uni.navigateTo({
					url: `./crowdsourcingdetails?id=${id}`
				})
			},
			signupdetails(taskid) {
				uni.navigateTo({
					url: `/pages/index/testcrowdsourc/crowdsourcingdetails?id=${taskid}`
				})
			}
		},
		// 触底刷新
		onReachBottom() {
			if (this.activetab == 1) {
				// 任务第一次触底
				if (this.crowdlist.length % 10 != 0) {
					return
				} else {
					this.queryparams.pageNum++
					this.http.quickGet(
						`/crowdsource/claim/my/${this.task.userId}?pageNum=${this.queryparams.pageNum}&pageSize=${this.queryparams.pageSize}`,
						true
					).then(res => {
						this.crowdlist.push(...res.data.rows);
					})
				}

			} else {
				// 评论
				if (this.reviewList.length % 10 != 0) {
					return
				} else {
					this.queryparams1.pageNum++
					this.http.quickGet(
						`/comment/comments/${this.task.userId}?pageNum=${this.queryparams1.pageNum}&pageSize=${this.queryparams1.pageSize}`
					).then(res => {
						this.reviewList.push(...res.data.rows);
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.noreview {
		font-size: 33rpx;
		// font-weight: bold;
		color: #9D9D9D;
		text-align: center;
		margin-top: 40rpx;
	}

	.peixunbanpage {
		width: 100vw;
		height: 100%;
		background: #f5f7fa;
		padding: 25rpx 25rpx 25rpx 25rpx;
		box-sizing: border-box;

		.companyinfotext {
			width: 100%;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 35rpx;
			box-sizing: border-box;
			font-weight: 500;
			font-size: 26rpx;
			color: #4D4D4D;
			line-height: 54rpx;
		}

		.newinfo {
			width: 100%;
			height: 179rpx;
			background: linear-gradient(90deg, #E2EDFD, #FEE4E4);
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			padding: 40rpx 25rpx 0 25rpx;
			display: flex;
			position: relative;

			.onlineJl {
				position: absolute;
				top: 40rpx;
				right: 30rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #1578ED;
			}

			.newinfoimg {
				width: 102rpx;
				height: 102rpx;
				margin-right: 20rpx;
			}

			.newinfoMT {
				display: flex;
				align-items: center;

				.newnaem {
					font-weight: bold;
					font-size: 32rpx;
					color: #1A1A1A;
				}

				.newline {
					color: #d1cfd0;
					margin: 0 10rpx;
				}
			}

			.newinfoMB {
				width: 86rpx;
				height: 32rpx;
				background: linear-gradient(90deg, #FC6C6C, #3873FA);
				border-radius: 16rpx;
				font-weight: 500;
				font-size: 22rpx;
				color: #FEFEFE;
				line-height: 32rpx;
				text-align: center;
				margin-top: 10rpx;
			}
		}

		// 公司信息
		.companyinfo {
			width: 100%;

			background-color: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;



			.comname {
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
			}

			.raterow {
				font-weight: 500;
				font-size: 26rpx;
				color: #808080;
			}

			.tabnav {
				width: 100%;
				height: 72rpx;
				border-top: 1px solid #EBEBEB;
				box-sizing: border-box;
				display: flex;

				.tabnavitem {
					flex: 1;
					font-weight: 500;
					font-size: 28rpx;
					color: #4C4C4C;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.activeitem {
					font-weight: bold;
					font-size: 28rpx;
					color: #1578ED;
					border-bottom: 4rpx solid #1578ED;
				}
			}
		}

		.pxitembox {
			width: 100%;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 30rpx;

			.pxitemboxt {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid rgba(153, 153, 153, 0.2);
				padding: 0 25rpx;
				box-sizing: border-box;
			}

			.pxitemboxtl {
				height: 89rpx;
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #1A1A1A;

				.pxitemboxtlimg {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}

			.pxitemboxtr {
				font-weight: 500;
				font-size: 22rpx;
				color: #808080;
			}

			.pxitemboxc {
				width: 100%;
				padding: 25rpx;
				box-sizing: border-box;

				.ratebox {
					margin-bottom: 20rpx;
				}

				.ratebox ::v-deep .u-icon {
					font-size: 20px !important;
				}

				.pxitemboxcremark {
					font-weight: 500;
					font-size: 22rpx;
					color: #333333;
				}

				.pxitemboxctask {
					margin-top: 20rpx;
					font-weight: 500;
					font-size: 22rpx;
					color: #2084F9;
				}
			}
		}
	}

	.notice {
		background: #FFFFFF;
		border-radius: 10px;
		display: flex;
		padding: 10px 15px;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.typej {
		font-size: 24rpx;
		color: #9D9D9D;
		margin: 13rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.leop {
		font-size: 30rpx;
		/* height:40px ; */
		font-weight: bold;
		color: #1A1A1A;
		/* margin: 13rpx 0; */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.buttonyz1 {
		width: 139rpx;
		height: 49rpx;
		background: #a8aeb6;
		border-radius: 25rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		text-align: center;
		line-height: 49rpx;
	}

	.buttonyz {
		width: 139rpx;
		height: 49rpx;
		background: linear-gradient(90deg, #5EA6FD, #1A81F9);
		border-radius: 25rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		text-align: center;
		line-height: 49rpx;
	}

	.daodile {
		text-align: center;
		margin: 20rpx 0;
		font-size: 24rpx;
		color: #9D9D9D;
	}

	.navTab {
		padding: 2vh 13px;
	}

	.sign_list {
		width: 100%;
		background: #FFFFFF;
		border-radius: 10px;
		margin-bottom: 20px;
		padding-bottom: 15px;
	}

	.rightb {
		width: 183rpx;
		height: 54rpx;
		background: linear-gradient(90deg, #5EA6FD, #1A81F9);
		border-radius: 9px 0px 46px 0px;
		color: #FFFFFF;
		font-size: .8rem;
		line-height: 54rpx;
		text-align: center;

	}

	.fline {
		width: 100%;
		height: 1rpx;
		border: 1px solid #999999;
		opacity: 0.15;
	}

	.reviewbtnbox {
		display: flex;
		justify-content: flex-end;
	}

	.reviewbtn {
		width: 150rpx;
		height: 50rpx;
		background: #FBA02A;
		border-radius: 6rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		text-align: center;
	}

	.reviewDialog {
		position: fixed;
		z-index: 99999999999999999999999999999999;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;

		.reviewbox {
			position: relative;
			width: 559rpx;
			height: 593rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 21rpx 4rpx rgba(19, 106, 189, 0.15);
			padding: 25rpx;
			box-sizing: border-box;

			.titlereview {
				font-weight: bold;
				font-size: 30rpx;
				color: #1A1A1A;
				text-align: center;
				height: 70rpx;
				line-height: 70rpx;
			}

			.closereview {
				font-weight: bold;
				font-size: 30rpx;
				color: #1A1A1A;
				font-weight: 400;
				font-size: 40rpx;
				color: #858994;
				position: absolute;
				top: 0;
				right: 20rpx;
			}

			.tipcon {
				font-weight: 500;
				font-size: 22rpx;
				color: #333333;
				text-align: center;
				margin: 20rpx 0;
			}

			.ratebox {
				display: flex;
				justify-content: center;
				margin-bottom: 23rpx;
			}

			.ratebox ::v-deep .u-icon {
				font-size: 20px !important;
			}

			.remarkbox {
				margin-bottom: 30rpx;
			}

			.reviewbtn {
				width: 100%;
				height: 60rpx;
				background: #2084F9;
				border-radius: 6rpx;
				line-height: 60rpx;
				text-align: center;
			}
		}

		.successbox {
			width: 500rpx;
			height: 70rpx;
			background: #FDF7EE;
			box-shadow: 0rpx 1rpx 15rpx 0rpx rgba(39, 50, 63, 0.15);
			border-radius: 6rpx;
			font-weight: bold;
			font-size: 26rpx;
			color: #000000;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>