<template>
	<view class="inspect-item" @click="toPage" @longpress="onLongPress">
		<view class="content" :class="details.synFlag == 1 ? 'synchronization' : ''">
			<view class="name">{{
            synFlags[details.synFlag]
          }}</view>
			<view class="info">
				<view class="info-row">
					<text class="title">{{ getLabel(details.inspectionType) }}</text>
					<text class="status" :class="{'error':details.isException == 1}">{{ details.isException == 1 ?'异常':'正常'
          }}</text>
				</view>
				<view class="info-row info-row-code">
					<text>巡检人：</text>
					<text class="code-num">{{details.userName}}</text>
					<text>编号：</text>
					<text class="code-num">{{ details.inspectionCode }}</text>
					<text>巡检日期：</text>
					<text class="code-num">{{ formattedDate }}</text>
				</view>
			</view>
			<view class="img">
				<!-- <image v-if="details.synchronization == 1" class="bg-img" src="../../static/img/add-img/default.png"></image> -->
				<!-- <image v-else class="bg-img" src="../../static/img/add-img/active.png"></image> -->
			</view>
		</view>
	</view>
</template>
<script>
	import moment from "moment";
	import {
		pad_inspection_type
	} from "@/utils/dict.js";

	export default {
		props: {
			details: {
				type: Object,
			},
			isDisable: {
				type: Boolean,
			},
		},
		data() {
			return {
				synFlags: {
					0: '未同步',
					1: '已同步',
					2: '编辑中'
				}
			}
		},
		computed: {
			formattedDate() {
				if (!this.details.createTime) {
					return '无效日期';
				}
				// 转换为数字并使用 moment 格式化日期
				const createTime = parseInt(this.details.createTime, 10);
				return moment(createTime).format('YYYY-MM-DD');
			},
		},
		mounted() {
			console.log(" this.details", this.details)
		},
		methods: {
			getLabel(val) {
				const temp =
					(
						pad_inspection_type.rows.filter((item) => item.dictValue == val)[0] || {}
					).dictLabel || "";
				return temp.length ? temp : "";
			},
			toPage() {
				const url =
					this.details.inspectionType != 2 ?
					`/pages/inspectionContent/inspectionContentList?inspectionType=${this.details.inspectionType}&isDisable=${
              this.isDisable ? 1 : 0
            }` :
					`/pages/shaftInspection/shaftInspectionList?isDisable=${
              this.isDisable ? 1 : 0
            }`;

				uni.navigateTo({
					url: `${url}&uid=${this.details.id}`,
				});
			},
			onLongPress(){
				uni.showModal({
					title: '删除确认',
					content: '确定要删除此项吗？',
					success: (res) => {
						if (res.confirm) {
							this.$emit('longpress',this.details)
						}
					}
				});
			}
		},
	};
</script>
<style scoped lang="less">
	.inspect-item {
		width: calc(50% - 6.4px);
		margin-bottom: 12.8px;

		.content {
			background: #fff;
			border: 0.32px solid rgba(224, 224, 224, 1);
			border-radius: 9.6px;
			padding: 9.6px;
			display: flex;
			align-items: center;
			height: 62.4px;
			box-sizing: border-box;
			position: relative;

			.name {
				background: #ffab2423;
				border-radius: 9.6px;
				font-size: 11.2px;
				width: 43.2px;
				height: 43.2px;
				margin-right: 8px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #f39800;
			}

			.info {
				.info-row {
					display: flex;
					align-items: center;
					margin-bottom: 6.4px;

					&:last-of-type {
						margin: 0;
					}

					.title {
						font-size: 11.2px;
						color: #000000;
						font-weight: bold;
						margin-right: 6.4px;
					}

					.status {
						padding: 0 6.4px;
						font-size: 9.6px;
						color: #0CC991;
						text-align: center;
						line-height: 16px;
						font-weight: 400;
						background: #E6F9F3;
						border-radius: 11px;
					}

					.error {
						background: #FDEBE9;
						border-radius: 11px;
						color: #F55A42
					}

					.alarm {
						margin-left: 6.4px;
						background: rgba(255, 105, 82, 0.1);
						font-size: 11.2px;
						color: #ff6952;
						text-align: center;
						line-height: 16px;
						font-weight: 400;
					}
				}

				.info-row-code {
					font-size: 11.2px;
					color: #7c7c7c;
					font-weight: 400;

					.code-num {
						font-size: 11.2px;
						color: #000000;
						font-weight: 400;
						margin-right: 19.2px;

						&:last-child {
							margin-right: 0;
						}
					}
				}
			}

			.img {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);

				.bg-img {
					width: 64px;
					/* 80px * 0.8 */
					height: 64px;
					/* 80px * 0.8 */
				}
			}
		}

		.synchronization {
			background-image: linear-gradient(-67deg, #9c9c9c16, #9c9c9c09 50%);

			.name {
				background: #9c9c9c16;
				border-radius: 9.6px;
				/* 12px * 0.8 */
				color: #4a4a4a;
			}

		
		}
	}
</style>