<template>
	<up-popup :show="visible" mode="right" closeable @close="handleClose" @open="handleOpen">
		<uni-section titleFontSize="18px" type="line" title="设备点检信息"> </uni-section>
		<scroll-view scroll-y="true" style="height: 85vh; width: 90vw">
			<view class="content">
				<up-row class="flex-wrap p10" style="background-color: #f5f7fa">
					<up-col class="mb10" :span="gridCol" v-for="(item, index) in detailSchema">
						<view style="color: #666"><span
								style="color: #333">{{ item.label }}：</span>{{ deviceInfo[item.value] }}</view>
					</up-col>
				</up-row>

				<view class="p10">
					<view>备注：
						<text style="color: #666">
							{{ detailInfo.content }}
						</text>
					</view>
					<up-row>
						<up-col span="6">
							<view class="pt10">点检人：
								<text style="color: #666">
									{{ detailInfo.checkUserName }}
								</text>
							</view>
							<view class="pt10">点检日期：
								<text style="color: #666">
									{{ nx.$helper.formateToDateTime(detailInfo.checkDate) }}
								</text>
							</view>
						</up-col>
						<up-col span="6">
							<up-album multiple-size="70" single-size="70" :urls="attachment" row-count="4"> </up-album>
						</up-col>
					</up-row>
				</view>
				<view>
					<up-row class="p10 font-bold" style="background-color: #f5f5f5">
						<up-col span="3">点检项目</up-col>
						<up-col span="5">检查标准</up-col>
						<up-col span="2"> 频次</up-col>
						<up-col span="2">是否正常</up-col>
					</up-row>
					<view class="pt10">
						<up-row class="pb10" v-for="(item, index) in detailInfo.maintainItemList" :key="index">
							<up-col span="3">
								<view class="x-f">
									<text class="pl10">
										{{ item.itemName }}
									</text>
								</view>
							</up-col>

							<up-col span="5">{{ item.standard }}</up-col>
							<up-col span="2">{{ item.frequencyRemark }}</up-col>
							<up-col span="2">
								<u-tag v-if="item.checkResult == '正常'" text="正常" size="mini" type="success" plain
									plainFill></u-tag>
								<u-tag v-else text="不正常" type="error" size="mini" plain plainFill></u-tag>
							</up-col>
						</up-row>
					</view>
					<view class="p10"></view>
				</view>
			</view>
		</scroll-view>
	</up-popup>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watch,
		computed
	} from 'vue'
	import {
		getDeviceBusInfoById
	} from '@/nx/api/deviceInfo'
	import {
		detailSchema
	} from './dailyCheck.data'
	import dailyCheckApi from '@/nx/api/dailyCheck'
	import {
		getImgBaseUrl
	} from '@/defaultBaseUrl'
	import {
		useGridCol
	} from '@/nx/hooks/useGridCol'
	import nx from '@/nx'
	const {
		gridCol
	} = useGridCol([700], [6, 4])
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		checkInfo: {
			type: Object
		}
	})
	const visible = ref(props.show)
	// 监听外部传入的show属性变化
	watch(
		() => props.show,
		newVal => {
			visible.value = newVal
		}
	)
	let detailInfo = ref({})
	const attachment = computed(() => {
		const fileRet = detailInfo.value.businessFileRet.data
		if (fileRet.length) {
			return fileRet.map((item) => item.fileUrl)
		} else {
			return []
		}
	})
	async function getDetailInfo(id) {
		const res = await dailyCheckApi.queryById(id)
		res.maintainItemList.forEach(item => {
			if (item.checkResult == 'false' || !item.checkResult) {
				item.checkResult = false
			}
			if (item.checkResult == 'true') {
				item.checkResult = true
			}
		})
		detailInfo.value = res
	}
	const deviceInfo = ref({})
	async function getDeviceInfo(id) {
		const res = await getDeviceBusInfoById(id)
		deviceInfo.value = res
	}
	const emit = defineEmits(['close', 'open'])

	function handleClose() {
		emit('close')
	}

	function handleOpen() {
		getDetailInfo(props.checkInfo.id)
		getDeviceInfo(props.checkInfo.deviceId)
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fff;
		height: 100%;
		padding: 16px;
		padding-top: 10px;
		font-size: 16px;
	}

	:deep(.uicon-close) {
		font-size: 22px !important;
	}

	:deep(.u-popup__content__close--top-right) {
		top: 30px;
	}
</style>