<template>
	<view class="replyList">
		<view class="reply-h2">整改记录</view>
		<view class="reply-item flex" v-for="(item,index) in replyData" :key="index">
			<view class="user-image">
				<image src="/static/safeMange/upload_image.png"></image>
			</view>
			<view class="reply-detail">
				<view class="detail-item">
					<view class="detail-label flex">{{item.type == 1 ? '整改人':'复查人'}}<text>{{item.createTime}}</text></view>
					<view class="detail-content">{{item.createUserName}}</view>
				</view>
				
				<view class="detail-item">
					<view v-if="item.type == 1">
						<view class="detail-label">整改状态</view>
						<view class="detail-content status">{{item.status == 1 ? '待整改':'已整改'}}</view>
					</view>

					<view v-if="item.type == 2">
						<view class="detail-label">复查状态</view>
						<view class="detail-content" :class="{'error': item.status == 1, 'success': item.status == 2}">{{item.status == 1 ? '复查未通过':'复查通过'}}</view>
					</view>
				</view>
				
				<view class="detail-item">
					<view class="detail-label">{{item.type == 1 ? '整改内容':'复查情况'}}</view>
					<view class="detail-content">{{item.additionalRemarks}}</view>
				</view>
				
				<view class="detail-item" v-if="item.fileUrl">
					<view class="detail-label">图片</view>
					<view class="detail-content">
						<view class="imgBox" v-show="item.fileUrl" v-for="(itm,idx) in item.fileUrl.split(',')" :key="idx">
							<image :src="url_config+'image/'+itm" class="img"
								@click="previewImage(url_config+'image/'+itm)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name: "reply-list",
		props:{
			replyData:{
				type: Array
			}
		},
		data(){
			return{
				imgFileList: []
			}
		},
		methods:{
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
		}
	}
</script>

<style lang="less" scoped>
.replyList{
	margin: 0 20rpx;
	background: #fff;
	padding: 36rpx 32rpx;
	box-sizing: border-box;
	.flex{
		display: flex;
	}
	.reply-h2{
		margin-bottom: 24rpx;
		font-size: 30rpx;
		font-weight: bold;
	}
	.reply-item{
		font-size: 28rpx;
		background: #F6FBFF;
		padding: 26rpx 24rpx;
		margin-bottom: 20rpx;
		.user-image{
			margin-right: 20rpx;
			uni-image{
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
			}
		}
		.reply-detail{
			padding-top: 8rpx;
			flex: 1;
			.detail-item{
				margin-bottom: 26rpx;
				.detail-label{
					color: #9399A9;
					font-size: 24rpx;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 12rpx;
				}
				.status{
					color: #E6A23C;
				}
				.success{
					color: #67C23A;
				}
				.error{
					color: #F56C6C;
				}
			}
			.imgBox {
				width: 120rpx;
				height: 120rpx;
				display: inline-flex;
				position: relative;
				margin-right: 12rpx;
				margin-bottom: 16rpx;
				border-radius: 10rpx;
				.img {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
}
</style>
