<template>
	<xn-form-container title="详情" :width="900" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-form ref="formRef" :model="formData" :label-col="labelCol4" :wrapper-col="wrapperCol20">
			<a-descriptions :column="4" size="middle" bordered class="mb-2" :label-style="labelStyle" :contentStyle="contentStyle">
				<a-descriptions-item label="车牌号码" :span="2">{{ formData.licensePlate }}</a-descriptions-item>
				<a-descriptions-item label="车牌颜色" :span="2">{{ formData.licensePlateColor }}</a-descriptions-item>
				<a-descriptions-item label="进出类型" :span="2">
					<a-tag
						:color="
							formData.inOutFactory === '1'
								? 'volcano'
								: formData.inOutFactory === '2'
								  ? 'processing'
								  : 'error'
						"
					>
						{{ $TOOL.dictTypeData('in_out_factory', formData.inOutFactory) }}
					</a-tag>
				</a-descriptions-item>
				<a-descriptions-item label="进出时间" :span="2">{{ formData.inOutTime }}</a-descriptions-item>
				<a-descriptions-item label="放行方式" :span="4">
					<a-tag
						:color="
							formData.releaseType.toString() === '1'
								? 'volcano'
								: formData.releaseType.toString() === '2'
								  ? 'processing'
								  : 'error'
						"
					>
						{{ $TOOL.dictTypeData('release_type', formData.releaseType.toString()) }}
					</a-tag>
				</a-descriptions-item>


				<a-descriptions-item label="过磅图片" :span="4">
					<div class="imgDiv">
						<a-image :width="200" :src="formData.cloudPlateName"  v-if="formData.cloudPlateName!=null"/>
						<a-image :width="200" :src="formData.cloudLicenseName" v-if="formData.cloudLicenseName!=null"/>
					</div>
				</a-descriptions-item>

				<a-descriptions-item label="抓拍图片" :span="4">
					<div class="imgDiv">
						<a-image :width="200" :src="formData.cloudCapturePic1"  v-if="formData.cloudCapturePic1!=null"/>
						<a-image :width="200" :src="formData.cloudCapturePic2" v-if="formData.cloudCapturePic2!=null"/>
						<a-image :width="200" :src="formData.cloudCapturePic3" v-if="formData.cloudCapturePic3!=null"/>
						<a-image :width="200" :src="formData.cloudCapturePic4" v-if="formData.cloudCapturePic4!=null"/>
						<a-image :width="200" :src="formData.cloudCapturePic5" v-if="formData.cloudCapturePic5!=null"/>
					</div>
				</a-descriptions-item>
			</a-descriptions>
		</a-form>
	</xn-form-container>
</template>

<script setup name="recordDoubleForm">
	import { cloneDeep } from 'lodash-es'
	// 默认是关闭状态
	const visible = ref(false)
	const formData = ref({})
	const table = ref()
	const resultJson = ref()

	const labelStyle = {
		width: '20%'
	}
	const contentStyle = {
		width: '30%'
	}

	const labelCol4 = ref({span: 4, style: 'width: 26%; line-height: 20px; white-space: normal',})
	const labelCol8 = ref({span: 8, style: 'width: 26%; line-height: 20px; white-space: normal',})
	const wrapperCol20 = ref({span: 20})

	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		//getRecordDoubleDetail(record)
		if(record){
			let recordData = cloneDeep(record)
			formData.value = Object.assign({}, recordData)
		}

	}
	const getRecordDoubleDetail = (record) => {
		const param = {
			id: record.id
		}
		tbRecordDoubleApi.recordDoubleDetailPic(param).then((data) => {
			Object.assign(record, data)
			formData.value = record
		})
	}
	// 关闭抽屉
	const onClose = () => {
		resultJson.value = ''
		visible.value = false
	}

	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>

<style scoped>
	.imgDiv ::v-deep .ant-image {
		margin-left: 20px;
		margin-top: 10px;
	}
	.imgDiv ::v-deep .ant-image-mask-info {
		margin-left: 20px;
		margin-top: 10px;
	}
</style>
