<template>
	<view class="details">
		<view class="details-item">
			<view class="details-item-title">
				<view class="details-item-title-text">异常信息</view>
			</view>
			<view class="details-item-content">
				<template v-if="Number(type) === 3">
					<view class="details-item-content-item">停车场：{{ detailsInfo.roadName || '-' }}</view>
				</template>
				<template v-else>
					<view class="details-item-content-item">路段：{{ detailsInfo.roadName || '-' }}</view>
					<view class="details-item-content-item">泊位号：{{ detailsInfo.spaceNo || '-' }}</view>
				</template>
				<view class="details-item-content-item">问题描述：{{ detailsInfo.exceprionDes || '-' }}</view>
				<view class="details-item-content-item">
					<view class="left">图片：</view>
					<view class="right" v-if="detailsInfo.imgList && detailsInfo.imgList.length">
						<u--image class="right-img" v-for="(item, index) in detailsInfo.imgList" :key="index"
							:showLoading="true" :src="item" width="80px" height="80px"
							@click="previewImgae(detailsInfo.imgList, index)">
							<view slot="error" style="font-size: 24rpx">加载失败</view>
						</u--image>
					</view>
					<view v-else>暂无</view>
				</view>
			</view>
		</view>
		<view class="details-item">
			<view class="details-item-title">
				<view class="details-item-title-text">处理信息</view>
			</view>
			<view class="details-item-content">
				<view class="details-item-content-item">处理状态：{{ detailsInfo.isProcess | filtersStatus }}</view>
				<view class="details-item-content-item">处理设备：{{ detailsInfo.processDeviceName || '-' }}</view>
				<view class="details-item-content-item">损坏方式：{{ detailsInfo.damageTypeName || '-' }}</view>
				<view class="details-item-content-item">处理方式：{{ detailsInfo.processTypeName || '-' }}</view>
				<view class="details-item-content-item">处理员：{{ detailsInfo.processBy || '-' }}</view>
				<view class="details-item-content-item">上报时间：{{ detailsInfo.updateTime || '-' }}</view>
				<view class="details-item-content-item">上报人：{{ detailsInfo.createBy || '-' }}</view>
			</view>
		</view>
		<view class="details-item">
			<view class="details-item-title">
				<view class="details-item-title-text">评价信息</view>
			</view>
			<view class="details-item-content" v-if="detailsInfo.evaluateList && detailsInfo.evaluateList.length">
				<view class="details-item-content-item" v-for="(item, index) in detailsInfo.evaluateList" :key="index">
					{{ item.evaluateDes }} ------- {{ item.createBy }}
				</view>
			</view>
			<view class="empty" v-else>
				<u-empty mode="comment" icon="http://cdn.uviewui.com/uview/empty/comment.png" text="暂无评价" iconSize="40"
					width="120px" height="120px" />
			</view>
		</view>
		<view class="details-evaluate">
			<u-button type="primary" text="评价"
				@click="jumpPage('pages/patrolManagement/deviceAbnormalRecords/addEvaluate/addEvaluate', { id: detailsInfo.deviceExcptionId })">
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: undefined,
				detailsInfo: {},
				loading: false,
				type: 1
			};
		},
		onLoad(page) {
			this.id = page.id;
			this.type = page?.type ?? 1;
		},
		onShow() {
			if (this.id) {
				this.getDetails(this.id);
			}
		},
		methods: {
			getDetails(id) {
				uni.$u.api.deviceAbnormalApi
					.getDeviceAbnormalDetailsApi({
						id
					})
					.then((res) => {
						if (res.code === 200) {
							this.detailsInfo = res.data;
						}
					})
			},
			/**
			 * 设置消息已读
			 * @param { String } id
			 */
			updateDeviceAbnormalInfo(id) {
				uni.$u.api.deviceAbnormalApi
					.updateDeviceAbnormalInfoApi({
						id
					})
					.then((res) => {
						console.log('已读:', id);
					});
			},
			/**
			 * 预览图片
			 * @date 2022-08-23
			 * @param {any} imgList
			 * @param {any} index
			 * @returns {any}
			 */
			previewImgae(imgList, index) {
				uni.previewImage({
					current: index,
					urls: imgList
				});
			},
			/**
			 * 跳转页面
			 * @date 2022-09-06
			 * @param {any} url
			 * @param {any} params
			 * @returns {any}
			 */
			jumpPage(url, params) {
				uni.$u.route({
					url,
					params
				})
			}
		},
		filters: {
			filtersStatus(val) {
				let label = '-';
				if (val || val === 0) {
					switch (Number(val)) {
						case 0:
							label = '未处理';
							break;
						case 1:
							label = '已处理';
							break;
						case 2:
							label = '部分处理';
							break;
					}
				}
				return label;
			}
		}
	};
</script>

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

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