<template>
	<view class="shopTourDetails">
		<view class="shopTourDetails-wrap">
			<scroll-view scroll-y class="scroll-con-l">
				<view class="item-con" v-for="(item, index) in itemList" :key="index">
					<view :class="['item-tit', nowInd==index ? 'active' : '']" @click="changeType(index)">{{item.assessItemName}}</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y class="scroll-con-r">
				<view class="item-con" v-for="(item, index) in evaluationItemsList" :key="index">
					<view class="item-tit">{{item.assessTargetName}}</view>
					<view class="item-main">
						<view class="item-state">状态：
							<text :class="item.result == 'PASS' ? 'green' : item.result == 'NOT_PASS' ? 'red' : item.result == 'NOT_WORK' ? 'yellow' : ''">{{item.resultDictValue}}</text>
						</view>
						<text v-if="item.comments || item.taskTargetPhotoList" class="item-btn" @click="getComments(item)">查看评论</text>
					</view>
				</view>
				<u-empty text="暂无数据" img-width="120" v-if="itemList.length > 0 && evaluationItemsList.length == 0" mode="list"></u-empty>
			</scroll-view>
		</view>
		<view v-if="itemList.length == 0" style="width: 100%;padding-top: 10vh;">
			<u-empty text="暂无数据" img-width="120" mode="list"></u-empty>
		</view>
		<!-- 查看评论 -->
		<comment-popup :openPopup="openPopup" :comments="comments" :taskTargetPhotoList="taskTargetPhotoList" @close="closePopup" />
	</view>
</template>

<script>
	import CommentPopup from './commentPopup.vue'
	import { getTaskItem } from '@/api/taskItem.js'
	export default{
		components: { CommentPopup },
		data(){
			return{
				itemList: [],  //  考评项目
				evaluationItemsList: [],  //  考评项
				nowInd: 0,  //  当前考评分类
				openPopup: false,  //  查看评论
				detail: null,  //  详情
				taskId: '',  //  任务id
				comments: '',  //  评论
				taskTargetPhotoList: [],  //  评论图片
			}
		},
		onLoad(opts) {
			this.taskId = opts.taskId
			this.getTaskItem()
		},
		methods: {
			//  获取详情
			getTaskItem(){
				getTaskItem({ id: this.taskId }).then(res => {
					if(res.status == 200&&res.data){
						this.itemList = res.data
						this.nowInd = 0
						if(this.itemList.length){
							this.evaluationItemsList = this.itemList[this.nowInd].taskTargetVOList ? this.itemList[this.nowInd].taskTargetVOList : []
						}
					}
				})
			},
			//  切换分类
			changeType(ind){
				this.nowInd = ind
				this.evaluationItemsList = this.itemList[this.nowInd].taskTargetVOList ? this.itemList[this.nowInd].taskTargetVOList : []
			},
			//  查看评论
			getComments(item){
				this.comments = item.comments ? item.comments : ''
				if(item.taskTargetPhotoList){
					let arr = []
					item.taskTargetPhotoList.map(params => {
						arr.push(params.photoPath)
					})
					this.taskTargetPhotoList = arr
				}else{
					this.taskTargetPhotoList = []
				}
				this.openPopup = true
			},
			//  关闭   查看评论
			closePopup(){
				this.openPopup = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
		height: calc(100vh - 48px);
	}
	.shopTourDetails-wrap{
		height: 100%;
		background-color: #f8f8f8;
		display: flex;
		justify-content: space-between;
		.scroll-con-l{
			display: inline-block;
			width: 28%;
			height: 99%;
			margin: 1% 1% 0;
			box-sizing: border-box;
			.item-con{
				.item-tit{
					text-align: center;
					padding: 26upx 0;
					margin-bottom: 12upx;
					background-color: #fff;
					position: relative;
				}
				.item-tit.active{
					 border-right: 1px solid #00aaff;
					 color: #00aaff;
				}
			}
		}
		.scroll-con-r{
			display: inline-block;
			width: 68%;
			height: 99%;
			margin: 1% 1% 0 0;
			.item-con{
				padding: 14upx 30upx;
				margin-bottom: 18upx;
				border-radius: 12upx;
				background-color: #fff;
				.item-tit{
					font-weight: bold;
				}
				.item-main{
					padding: 14upx 0;
					display: flex;
					justify-content: space-between;
					.item-state{
						font-size: 26upx;
						text.green{
							color: #19be6b;
						}
						text.yellow{
							color: #ff9900;
						}
						text.red{
							color: #fa3534;
						}
					}
					.item-btn{
						font-size: 24upx;
						color: #2979ff;
					}
				}
				.item-footer{
					font-size: 24upx;
					color: #464646;
				}
			}
		}
	}
</style>
