<template>
	<view>
		<u-navbar autoBack placeholder bgColor="linear-gradient(91deg, #FDEDEE 0%, #FFFFFF 100%)">
			<view class="navSlot" slot="left">
				<u-icon name="arrow-left" size="19"></u-icon>
				<text class="title">公厕详情</text>
			</view>
		</u-navbar>
		<view class="main">
			<view class="details">
				<view class="detailsItem">
					<view>公厕位置</view>
					<view class="content">{{data.region}}</view>
					<u-line class="line" length="90%"></u-line>
				</view>
				<view class="detailsItem">
					<view class="des">管理员姓名</view>
					<view class="content">{{data.managerName}}</view>
					<u-line class="line" length="90%"></u-line>
				</view>
				<view class="detailsItem">
					<view class="des">管理员联系方式</view>
					<view class="content">{{data.managerContact}}</view>
					<u-line class="line" length="90%"></u-line>
				</view>
				<view class="detailsItem">
					<view class="des">公厕面积</view>
					<view class="content">{{data.area}}平方米</view>
					<u-line class="line" length="90%"></u-line>
				</view>
				<!-- <view class="detailsItem">
					<view class="des">公厕坑位</view>
					<view class="content">{{data.units}}</view>
					<u-line class="line" length="90%"></u-line>
				</view> -->
				<view class="detailsItem">
					<view class="des">绑定设备</view>
					<view class="content">{{data.equipmentBinding}}</view>
					<u-line class="line" length="90%"></u-line>
				</view>
				<view class="detailsItem">
					<view class="des">公厕照片</view>
					<view>
						<image v-for="(item,index) in data.images" :key="index" class="img" :src="item"></image>
					</view>
					<u-line class="line" length="90%"></u-line>
				</view>

				<view class="detailsItem">
					<view class="des">备注信息</view>
					<view>{{data.remarks}}</view>
				</view>

			</view>

			<view class="addTiem">
				<view>添加时间</view>
				<view>{{data.createdAt}}</view>
			</view>


		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				data: {}
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getDetails()
		},
		onShow() {

		},
		methods: {
			getDetails() {
				const params = {
					// url: '/system/inspections/' + this.id,
					url: '/app/system/toilets/info',
					data: {
						id: this.id
					},
				}
				this.$request(params).then(res => {
					this.data = res.data;
					// this.data.images = res.data.image.split(',').slice(0, -1);
				})
			},

		}
	}
</script>

<style lang="scss">
	.main {
		padding: 24rpx;

		.addTiem {
			padding: 20rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			background: #FFFFFF;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			color: #333333;
		}

		.details {
			background: #FFFFFF;
			margin-top: 10rpx;
			padding: 20rpx;
			font-size: 28rpx;
			border-radius: 14rpx 14rpx 14rpx 14rpx;

			.detailsItem {
				margin-top: 30rpx;

				.des {
					color: #333333;
				}

				.content {
					margin-top: 20rpx;
					color: #666666;
				}

				.img {
					width: 185rpx;
					height: 185rpx;
					margin-top: 20rpx;
					background: #F8F4F4;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					margin-right: 20rpx;
				}

				.line {
					padding-top: 20rpx;
				}
			}
		}
	}

	page {
		background-color: #F8F4F4;
	}
</style>