<template>
	<view class="uni-container">
		<u-navbar :autoBack="true" :placeholder="true" :bgColor="bgColor">
			<view slot='center' style="font-size: 36rpx; font-weight: bold;">
				投诉详情
			</view>
		</u-navbar>
		<view class="con-box">
			<view class="time">{{$utils.formatDate('Y-M-D', detData.createTime)}}</view>
			<view class="content">{{detData.content}}</view>
			<view class="img-box" v-if="image.length">
				<image class="img" v-for="(item, index) in image" :key="index"
					:src="item" @tap="previewImg(index)" mode=""></image>
			</view>
		</view>
		<view class="schedule-box">
			<view class="title">投诉进度</view>
			<view class="flow-box">
				<view class="flow-item">
					<view class="label">
						<u-icon name="checkmark-circle-fill" color="#01BE69"></u-icon>
						<view class="text">用户提交</view>
					</view>
					<view class="time">{{detData.createTime}}</view>
				</view>
				<view class="flow-item mt83" v-if="detData.status == 1">
					<view class="label">
						<u-icon name="checkmark-circle-fill" color="#01BE69"></u-icon>
						<view class="text">处理完成</view>
					</view>
					<view class="time">{{detData.updateTime}}</view>
				</view>
				<view class="flow-item mt83" v-if="detData.status == 0">
					<view class="label">
						<u-icon name="checkmark-circle-fill" color="#999999"></u-icon>
						<view class="text">处理完成</view>
					</view>
				</view>
				<view class="line"></view>
			</view>
		</view>
		<view class="result-box" v-if="detData.status == 1">
			<view class="title">处理结果</view>
			<view class="con">{{detData.ptContent}}</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
                id: '',
				bgColor: '#FFFFFF',
				detData: {},
				image: []
			};
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.reportDetail()
		},
		methods: {
			async reportDetail() {
				const params = {
					id: this.id
				}
				let info = await this.$http.reportDetail(params)
				if (info.code === 200) {
					this.detData = info.data
					this.image = []
					if (this.detData.image) {
						let arr = this.detData.image.split(',')
						arr.forEach(e => {
							this.image.push(this.$utils.setImgUrl(e))
						})
					}
				} else {
					uni.$u.toast(info.msg);
				}
			},
			previewImg(index) {
				uni.previewImage({
					urls: this.image,
					current: index,
					indicator: 'default'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-container {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		background: #FBFBFB;
		padding-bottom: 32rpx;
		.con-box {
			margin: 32rpx 32rpx 0;
			padding: 32rpx 24rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			.time {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
			.content {
				margin-top: 20rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}
			.img-box {
				display: flex;
				align-items: center;
				flex-direction: row;
				flex-wrap: wrap;
				.img {
					width: 172rpx;
					height: 172rpx;
					border-radius: 10rpx;
					margin: 20rpx 30rpx 0 0;
				}
			}
		}
		.schedule-box {
			margin: 32rpx 32rpx 0;
			padding: 32rpx 24rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
			.flow-box {
				margin-top: 30rpx;
				position: relative;
				.flow-item {
					display: flex;
					align-items: center;
					flex-direction: row;
					justify-content: space-between;
					.label {
						display: flex;
						align-items: center;
						flex-direction: row;
						.text {
							margin-left: 36rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}
					}
					.time {
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
					}
				}
				.mt83 {
					margin-top: 83rpx;
				}
				.line {
					position: absolute;
					width: 0;
					height: 43rpx;
					border-right: 2rpx dashed #999;
					left: 15rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
		.result-box {
			margin: 32rpx 32rpx 0;
			padding: 32rpx 24rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
			.con {
				margin-top: 20rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}
		}
	}
</style>