<template>
	<view class="spotCheckDetails-wrap">
		<view class="item-con" v-for="(item,index) in list" :key="index">
			<view class="item-header">
				<view class="header-l">
					<view class="item-c">
						{{item.assessTargetName}}
					</view>
				</view>
				<text :class="['header-r', item.result == 'PASS' ? 'green' : item.result == 'NOT_PASS' ? 'red' : item.result == 'NOT_WORK' ? 'yellow' : '']">{{item.resultDictValue}}</text>
			</view>
			<view class="comment-con">
				<u-row gutter="16" class="pic-con">
					<u-col span="3" v-for="(pic, ind) in item.taskTargetPhotoList" :key="ind">
						<u-image class="pic" width="100%" height="150upx" :src="pic.photoPath" @click="clickPic(index, ind)"></u-image>
					</u-col>
				</u-row>
				<view class="comment-main" v-if="item.comments">评论：{{item.comments}}</view>
				<view class="comment-main" v-else>评论：--</view>
			</view>
		</view>
		<view style="width: 100%;padding-top: 10vh;">
			<u-empty text="暂无数据" img-width="120" v-if="list.length == 0" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import { getTaskTargetById } from '@/api/taskTarget.js'
	export default{
		data(){
			return{
				list: [],  //  列表数据
				taskId: ''  //  任务id
			}
		},
		onLoad(opts) {
			this.taskId = opts.taskId ? opts.taskId : ''
			this.getDetails()
		},
		methods: {
			//  查看评论大图
			clickPic(index,ind){
				// 预览图片
				uni.previewImage({
					current: ind,
					urls: this.list[index].photoList
				})
			},
			//  获取详情
			getDetails(){
				getTaskTargetById({ taskId: this.taskId }).then(res => {
					if(res.status == 200){
						res.data.map(item => {
							if(item.taskTargetPhotoList){
								item.photoList = []
								item.taskTargetPhotoList.map(subItem => {
									item.photoList.push(subItem.photoPath)
								})
							}
						})
						this.list = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}
	.spotCheckDetails-wrap{
		padding-top: 20upx;
		.item-con{
			background-color: #fff;
			margin: 0 20upx 20upx;
			border: 1px solid #F8F8F8;
			border-radius: 6upx;
			box-shadow: 1px 1px 3px #eee;
			.item-header{
				display: flex;
				justify-content: space-between;
				padding: 20upx;
				border-bottom: 1px solid #F8F8F8;
				.header-l{
					flex-grow: 1;
					position: relative;
					.item-sub{
						position: absolute;
						left: 0;
						top: 0;
						width: 66upx;
						text-align: center;
					}
					.item-c{
						.item-c-tit{
							font-weight: bold;
						}
					}
				}
				.header-r{
					flex-shrink: 0;
				}
				.header-r.green{
					color: #19be6b;
				}
				.header-r.yellow{
					color: #ff9900;
				}
				.header-r.red{
					color: #fa3534;
				}
			}
			.comment-con{
				padding: 20upx;
				.comment-main{
					font-size: 26upx;
					padding: 16upx 20upx;
					line-height: 1.5em;
					margin-top: 20upx;
					.comment-tit{
						font-weight: bold;
					}
					.comment-txt{
						
					}
				}
			}
		}
	}
</style>
