<template>
	<view class="details">
		<view class="details-content" v-if="detailsInfo.id">
			<view class="details-content-road">
				<view class="details-content-road-name">{{ detailsInfo.roadName }}</view>
				<view class="details-content-road-date">{{ detailsInfo.createTime }}</view>
			</view>
			<view class="details-content-describe">
				{{ detailsInfo.exceprionDes }}
			</view>
			<view class="details-content-imgs" v-if="detailsInfo.imgsList && detailsInfo.imgsList.length">
				<view class="details-content-imgs-item" v-for="(img, index) in detailsInfo.imgsList" :key="index">
					<image :src="img" mode="aspectFit" @click="previewImage(detailsInfo.imgsList, index)"/>
				</view>
			</view>
		</view>
		<view class="details-content" v-else>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: undefined,
				detailsInfo: {}
			}
		},
		onLoad(page) {
			this.id = page.id
		},
		onShow() {
			if (this.id) {
				this.getDetails(this.id)
			}
		},
		methods: {
			getDetails(id) {
				this.loading = true
				uni.$u.api.deviceAbnormalApi.getDeviceAbnormalDetailsApi({
					id
				}).then(res => {
					if (res.code === 200) {
						this.detailsInfo = res.data
						if (this.detailsInfo.imgs) {
							this.detailsInfo.imgsList = this.detailsInfo.imgs.split(';')
						}
						if (this.detailsInfo.isRed === 0) {
							this.updateDeviceAbnormalInfo(this.id);
						}
					}
				})
			},
			/**
			 * 设置消息已读
			 * @param {Object} id
			 */
			updateDeviceAbnormalInfo(id) {
				uni.$u.api.deviceAbnormalApi.updateDeviceAbnormalInfoApi({
					id
				}).then(res => {
					console.log('已读:', res)
				})
			},
			previewImage(list, current) {
				uni.previewImage({
					urls: list,
					current
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: calc(100vh - 44px);
		background-color: #1767F2;
	}
</style>

<style lang="scss" scoped>
	@import './recordsDetails.scss';
</style>
