<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.company_name}}
						</view>
						<view class="newline">
							|
						</view>
						<view v-if="task.commentsStar && task.commentsStar != 0" class="raterow">
							<span> 评分：</span>
							<span style="color: #FA9C22;margin-right: 5rpx;">{{task.commentsStar}}</span>
							<u-rate :current="task.commentsStar" :disabled="true" active-color="#fa9c22"
								inactive-color="#CDCECE"></u-rate>
						</view>
						<view v-else style="min-width: 120rpx;font-weight: 500;font-size: 26rpx;color: #808080;">
							暂无评分
						</view>
					</view>
					<view class="newinfoMB">
						企业
					</view>
				</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">
			<view class="companyinfotext">
				{{task.company_desc}}
			</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,
				},
			}
		},
		onLoad(options) {
			const task = JSON.parse(decodeURIComponent(options.taskInfo))
			this.task = task
			// this.getTaskList()
		},
		methods: {
			dateFormat,
			findLabelValueByPropnew,
			// 跳转订单详情
			goTaskDetail() {},
			// 查询任务列表
			// getTaskList() {
			// 	this.http.quickGet(`/crowdsource/listAnon?pageNum=${this.queryparams.pageNum}&pageSize=${this.queryparams.pageSize}`).then(res => {
			// 		this.crowdlist = res.data.rows;
			// 	})
			// },
			// 查询评价列表
			getReviewList() {
				this.http.quickGet(
					`/comment/comments/${this.task.publisher_id}?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}`
				})
			},
		},
		// 触底刷新
		onReachBottom() {
			if (this.activetab == 1) {
				// 任务第一次触底
				// if (this.crowdlist.length % 10 != 0) {
				// 	return
				// } else {
				// 	this.queryparams.pageNum++
				// 	this.http.quickGet(`/crowdsource/listAnon?pageNum=${this.queryparams.pageNum}&pageSize=${this.queryparams.pageSize}`).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.publisher_id}?pageNum=${this.queryparams1.pageNum}&pageSize=${this.queryparams1.pageSize}`,
						false).then(res => {
						this.reviewList.push(...res.data.rows);
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.peixunbanpage {
		width: 100vw;
		height: 100%;
		background: #f5f7fa;
		padding: 25rpx 25rpx 25rpx 25rpx;
		box-sizing: border-box;

		.noreview {
			font-size: 33rpx;
			// font-weight: bold;
			color: #9D9D9D;
			text-align: center;
			margin-top: 40rpx;
		}

		.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;

			.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, #F9BD55, #F49C45);
				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;
	}
</style>