<template>
	<!-- 机房巡检操作 -->
	<view>
		<view v-for="(item, index) in itemData.detail" :key="index">
			<view v-if="index==0" class="form-item">
				<text class="form-label"><text class="required" v-if="item.required">*</text>{{ item.label }}</text>
				<view class="switch-container">
					<view :class="['status-btn', { active: item.inspectionResult === 0 }]"
						@click="setInspectionResult(index, 0, item.lableArr[0])">
						{{ item.lableArr[0] }}
					</view>
					<view :class="['status-btn', { active: item.inspectionResult === 1 }]"
						@click="setInspectionResult(index, 1, item.lableArr[1])">
						{{ item.lableArr[1] }}
					</view>
				</view>
			</view>
			<template v-if="item.inspectionResult === 1 && index==0">
				<view class="form-item">
					<text class="form-label"><text class="required">*</text>情况摘要</text>
					<text :class="['conclusion', { 'no-text': !item.conclusion }]" @click="showPopup(item, index)">
						{{ item.conclusion || "请输入情况摘要" }}</text>
				</view>
				<view class="form-item">
					<text class="form-label"><text class="required">*</text>现场照片</text>
					<CommonUpload v-model="item.photos" :max-count="5">
					</CommonUpload>
				</view>
			</template>
			<template v-if="index==1">
				<view class="form-item">
					<text class="form-label"><text class="required" v-if="item.required"></text>{{ item.label }}</text>
					<text :class="['conclusion', { 'no-text': !item.conclusion }]" @click="showPopup(item, index)">
						{{ item.conclusion || "请输入情况摘要" }}</text>
				</view>
				<view class="form-item">
					<text class="form-label"><text class="required"></text>现场照片</text>
					<CommonUpload v-model="item.photos" :max-count="9999" @input="onPhotoChange">
						<template #tip>
							<div></div>
						</template>
					</CommonUpload>
				</view>
			</template>
		</view>
		<custom-popup ref="customPopup" :inspectionItem="inspectionItem" @confirm="handlePopupConfirm">
		</custom-popup>
	</view>
</template>

<script>
	import CommonUpload from "@/components/CommonUpload/index.vue";
	import customPopup from "./customPopup.vue";
	import _ from "lodash";

	import mixin from "./mixin";
	export default {
		mixins: [mixin],
		components: {
			CommonUpload,
			customPopup,
		},
		props: {
			// 父组件传递的巡检状态
			status: {
				type: Number,
				default: 0,
			},
			// 父组件传递的巡检事项名
			inspectionItem: {
				type: String,
				default: "",
			},
			// 父组件传递的数据
			defaultData: {
				type: Object,
				default: () => ({}),
			},
		},
		data() {
			return {
				isQt: true,
				currentIndex: 0, // 当前操作的索引
				photos: [],
				// 父组件传递的数据
				itemData: {
					isValid: false, // true是不校验
					status: 0, //0是未巡检 1是已巡检 2巡检异常
					statusLabel: "未巡检",
					inspectionItem: "", //巡检事项
					detail: [{
							required: true,
							label: "水箱",
							inspectionResult: "",
							inspectionResultLable: "正常",
							lableArr: ["正常", "异常"],
							conclusion: "",
							photos: [],
						},
						{
							required: false,
							label: "其他问题",
							inspectionResult: 0,
							inspectionResultLable: "正常",
							lableArr: ["正常", "异常"],
							conclusion: "",
							photos: [],
						},
					],
				},
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.now_user || {};
			},
		},
		watch: {
			defaultData(newVal) {
				// 在这里处理数据变化
				if (Object.keys(this.defaultData).length !== 0) {
					this.itemData = this.defaultData;
				}
			},
		},
		mounted() {},
		methods: {
			// 处理弹窗确认
			handlePopupConfirm(summary) {
				this.itemData.detail[this.currentIndex].conclusion = summary; // 回显到文字显示区域
			},
			// 处理】数据
			getFromData() {
				this.itemData.inspectionItem = this.inspectionItem;
				const {isValid, status, statusLabel} = this.validForm(this.itemData.detail);
				this.itemData.isValid = isValid;
				this.itemData.status = status 
				this.itemData.statusLabel = statusLabel
				return this.itemData;
			},
			validForm(list) {
				let isValid = list.every(item => this.validFormItem(item))
				let status = list.some(item => item.inspectionResult === 1 && item.required) ? 2: 1;
				let statusLabel = isValid ? '已巡检' : '未巡检'
				
				const ret = {
					isValid, // 必填 false 不通过 true 通过
					status, // 1 正常 2 异常
					statusLabel // 已巡检 | 未巡检
				}
				console.log('validForm', ret)
				return ret;
			},
			validFormItem(item) {
				if(item.required) {
					if (item.inspectionResult === 1) {
						// 如果 inspectionResult 为 1，检查 conclusion 和 photos
						if (!item.conclusion || item.photos.length === 0) {
							return false;
						} else {
							return true
						}
					} else {
						return true
					}
				} else {
					return true
				}
			},
			// 数据校验方法 true说明有未填项
			areAllObjectsValid(arr) {
				for (let i = 0; i < arr.length; i++) {
					const obj = arr[i];
					const keys = Object.keys(obj);
					for (let j = 0; j < keys.length; j++) {
						const key = keys[j];
						const value = obj[key];
						if (value === null || value === undefined || value === "") {
							return false;
						}
						if (Array.isArray(value)) {
							if (value.length === 0) {
								return false;
							}
							for (let k = 0; k < value.length; k++) {
								if (typeof value[k] === "object" && value[k] !== null) {
									if (!validateArrayObjects([value[k]])) {
										return false;
									}
								}
							}
						} else if (typeof value === "object" && value !== null) {
							if (!validateArrayObjects([value])) {
								return false;
							}
						}
					}
				}
				return true;
			},
			// 校验是否有异常
			areAllInspectionResultsOne(arr) {
				return arr.every((obj) => obj.inspectionResult === 0);
			},
			onPhotoChange(val) {
				this.itemData.detail[1].photos = val;
			},
		},
	};
</script>
<style scoped lang="less">
	.form-item {
		display: flex;
		align-items: center;
		padding: 9.6px 0;
		line-height: 28.8px;
		border-bottom: 0.8px solid #f2f3f5;

		.form-label {
			font-size: 11.2px;
			margin-right: 25.6px;
			width: 88px;
			text-align: right;
			color: #7c7c7c;

			.required {
				color: red;
				margin-right: 3.2px;
			}
		}

		.conclusion {
			&.no-text {
				color: #c7c7c7;
			}

			.have {
				color: #000;
			}
		}

		.label {
			font-size: 11.2px;
		}

		.switch-container {
			display: flex;
			gap: 9.6px;

			.status-btn {
				flex: 1;
				padding: 5.6px 19.2px;
				font-size: 12.8px;
				color: #000000;
				background: #f2f2f2;
				text-align: center;
				font-weight: 400;
				line-height: 17.6px;
				border-radius: 14.4px;

				&.active {
					color: #ffffff;
					background: #3774f6;
					border: 0.32px solid rgba(224, 224, 224, 1);
				}
			}
		}

		.input-box {
			flex: 1;
			border-radius: 3.2px;
			font-size: 12.8px;
			line-height: 19.2px;
		}

		.photo-limit {
			font-size: 12.8px;
			color: #959595;
			line-height: 19.2px;
			font-weight: 400;
		}

		.photo-container {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 6.4px;

			.photo-item {
				position: relative;
				margin-right: 6.4px;
				margin-bottom: 6.4px;

				.photo {
					width: 57.6px;
					height: 57.6px;
					border-radius: 3.2px;
					margin-left: 9.6px;
				}

				.delete-photo {
					position: absolute;
					top: -6.4px;
					right: -6.4px;
					background-color: #ff4d4f;
					color: #fff;
					width: 12.8px;
					height: 12.8px;
					border-radius: 50%;
					text-align: center;
					line-height: 12.8px;
					font-size: 9.6px;
				}
			}
		}

		.photo-btn {
			background: #ffffff;
			border: 0.272px solid rgba(221, 221, 221, 1);
			border-radius: 1.64px;
			width: 57.6px;
			height: 57.6px;
			font-size: 57.6px;
			color: #cccccc;
			text-align: center;
			line-height: 51.2px;
		}
	}
</style>