<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 pt10 pl10" style="background-color: #f5f7fa">
					<up-col class="mb8" :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">
					<up-row>
						<up-col span="6">
							<view>维护保养人：
								<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">
							<u-album multiple-size="70" single-size="70" :urls="attachment" row-count="4" />
						</up-col>
					</up-row>
				</view>
				<view>
					<up-row class="p10 font-bold" style="background-color: #f5f5f5">
						<up-col span="5">维护保养内容</up-col>
						<up-col span="3"> 频次</up-col>
						<up-col span="4">维护保养标准</up-col>
					</up-row>
					<view>
						<view v-for="(item, index) in detailInfo.maintainItemList" :key="index">
							<up-row class="p10">
								<up-col span="5">
									<view class="x-f">
										<text>
											{{ item.itemName }}
										</text>
									</view>
								</up-col>
								<up-col span="3">{{ item.frequencyRemark }}</up-col>
								<up-col span="4">{{ item.standard }}</up-col>
							</up-row>
							<up-row class="fill-content">
								<up-col span="12">
									<view>维护保养情况:
										<text style="color: #666">
											{{ item.checkRemark }}
										</text>
									</view>
								</up-col>
							</up-row>
						</view>
						<view class="p10"></view>
					</view>
				</view>
			</view>
		</scroll-view>
	</up-popup>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watch,
		computed
	} from 'vue'
	import {
		useGridCol
	} from '@/nx/hooks/useGridCol'
	import dailyCheckApi from '@/nx/api/dailyCheck'
	import {
		getDeviceBusInfoById
	} from '@/nx/api/deviceInfo'
	import {
		getImgBaseUrl
	} from '@/defaultBaseUrl'
	import nx from '@/nx'
	const {
		gridCol
	} = useGridCol([700], [6, 4])
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		checkInfo: {
			type: Object
		}
	})
	const detailSchema = [{
			label: '设备名称',
			value: 'deviceName'
		},
		{
			label: '别名',
			value: 'alias'
		},
		{
			label: '设备型号',
			value: 'modelNo'
		},
		{
			label: '设备编码',
			value: 'deviceCode'
		},
		{
			label: '使用班组',
			value: 'deptName'
		}
	]
	const visible = ref(props.show)
	// 监听外部传入的show属性变化
	watch(
		() => props.show,
		newVal => {
			visible.value = newVal
		}
	)
	const attachment = computed(() => {
		const fileRet = detailInfo.value.businessFileRet.data
		if (fileRet.length) {
			return fileRet.map((item) => item.fileUrl)
		}else{
			return []
		}
	})
	let detailInfo = ref({})
	async function getDetailInfo(id) {
		const res = await dailyCheckApi.queryById(id)
		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: 10px;
		font-size: 16px;

		.fill-content {
			font-size: 14px;
			border-radius: 3px;
			box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);
			background-color: #fdf6ec;
			padding: 10px;
		}
	}

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

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