<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">
					<text class="item-sub">{{index + 1}}、</text>
					<view class="item-c">
						<text class="item-c-tit">{{item.name}}：</text>
						<text class="item-c-txt">{{item.content}}</text>
					</view>
				</view>
				<text v-if="item.state == 0" class="header-r green">合格</text>
				<text v-if="item.state == 1" class="header-r red">不合格</text>
				<text v-if="item.state == 2" class="header-r yellow">不适用</text>
			</view>
			<view class="comment-con">
				<u-row gutter="16" class="pic-con">
					<u-col span="3" v-for="(pic, ind) in item.picList" :key="ind">
						<u-image class="pic" width="100%" height="150upx" :src="pic" @click="clickPic(index, ind)"></u-image>
					</u-col>
				</u-row>
				<view class="comment-main">
					<text class="comment-tit">{{item.userName}}：</text>
					<text class="comment-txt">{{item.remarks}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list: [  //  列表数据
					{ 
						name: '着装标准',
						content: '服装干净、整洁、无污渍服装干净、整',
						picList: [
							'', '', ''
						],
						userName: '测试账号',
						remarks: '未穿工服、办公桌面不整洁',
						state: 0
					},
					{
						name: '着装标准',
						content: '服装干净、整洁、无污渍服装干净、整洁、无污渍服装干净、整洁、无污渍服装干净、整洁、无污渍服装干净、整洁、无污渍服装干净、整洁、无污渍',
						picList: [
							'', '', ''
						],
						userName: '测试账号',
						remarks: '未穿工服、办公桌面不整洁,未穿工服、办公桌面不整洁,未穿工服、办公桌面不整洁,未穿工服、办公桌面不整洁',
						state: 1
					},
					{
						name: '着装标准',
						content: '服装干净、整洁、无污渍服装干净、整',
						picList: [
							'', '', ''
						],
						userName: '测试账号',
						remarks: '未穿工服、办公桌面不整洁',
						state: 2
					},
				],
				taskId: ''  //  任务id
			}
		},
		onLoad(opts) {
			this.taskId = opts.taskId ? opts.taskId : ''
			this.getDetails()
		},
		methods: {
			//  查看评论大图
			clickPic(index,ind){
				// 预览图片
				uni.previewImage({
					current: ind,
					urls: this.list[index].picList
				})
			},
			//  获取详情
			getDetails(){
				getTaskItem({ id: this.taskId }).then(res => {
					if(res.status == 200){
						this.list = res.data
					}
				})
			}
		}
	}
</script>

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