<!-- 项目的报警记录 -->
<template>
	<div class="warning-page">
		<!-- <div class="form_div"> -->
		<el-form :model="form" :inline="true" @submit.prevent class="form" ref="FormRef">
			<el-form-item label="监控名称">
				<el-select class="select" v-model="form.code" placeholder="请输入">
					<el-option v-for="item in nameList" :key="item.code" :label="item.name" :value="item.code" />
				</el-select>
			</el-form-item>
			<el-form-item label="创建时间">
				<el-date-picker
					v-model="form.createTime"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					@change="onDatePicker"
				/>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handSearch">查询</el-button>
			</el-form-item>
		</el-form>
		<!-- </div> -->

		<div class="imgPage">
			<div class="imgTable">
				<div class="img_item" v-for="item in questList.records" @click="onShowImg(item)" :key="item.id">
					<el-image style="width: 100%; height: 182px" class="item_image" :src="item.image" fit="fill" />
					<div class="page_text flx-justify-column">
						<div class="img_title">{{ item.typeName }}</div>
						<div style="display: flex; justify-content: space-between">
							<div style="font-size: 12px">位置：{{ item.deviceName }}</div>
							<div style="font-size: 12px">报警事件：{{ item.createTime }}</div>
						</div>
					</div>
				</div>
				<Pagination
					:pageable="pages"
					:total="pages.total"
					:page-size="pages.pageSize"
					layout="prev, pager, next, jumper"
					:handleSizeChange="handleSizeChange"
					:handleCurrentChange="handleCurrentChange"
					:background="background"
					class="pagination"
				/>
			</div>
		</div>
	</div>

	<el-dialog class="imgDialog" title="整改图片" width="40%" v-model="imgVisible" show-close>
		<el-image style="width: 100%; height: 600px" :src="imgList.image" fit="fill" />
		<template #footer>
			<div class="flx-justify-between">
				<div class="flx-center">
					<span class="img_diatitle m-10">{{ imgList.typeName }}</span>
					<span class="img_text m-10">位置：{{ imgList.deviceName }}</span>
					<span class="img_text m-10">时间：{{ imgList.createTime }}</span>
					<span class="img_text m-10 flx-center"
						><div :class="imgList.state === -1 ? 'pending' : 'complete'"></div>
						{{ imgList.state === -1 ? "待处理" : "已处理" }}</span
					>
				</div>
				<div>
					<el-button type="primary" v-if="imgList.state === -1" @click="onRecord"> 去整改 </el-button>
				</div>
			</div>
		</template>
	</el-dialog>

	<el-dialog class="imgDialog" :title="title" width="50%" v-model="visible" show-close>
		<div class="littleTitle Snap">抓拍隐患</div>
		<el-form class="diaForm" :rules="rules" :model="formData" ref="ruleFormRef" label-width="160px">
			<el-form-item label="名称：">
				<el-input v-model="formData.deviceName" placeholder="请输入" />
			</el-form-item>
			<el-form-item label="隐患类型：">
				<el-input v-model="formData.typeName" placeholder="请输入" />
			</el-form-item>
			<el-form-item label="图片显示：">
				<!-- <el-image v-model="form.image" placeholder="请输入" /> -->
				<el-image style="width: 95px; height: 53px" :src="formData.image" fit="fill" />
			</el-form-item>
			<el-row>
				<el-col :span="12">
					<el-form-item label="下达人：">
						<el-input v-model="formData.createBy" placeholder="请输入" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="创建时间：">
						<el-date-picker
							style="width: 100%"
							v-model="formData.createTime"
							format="YYYY-MM-DD HH:mm:ss"
							value-format="YYYY-MM-DD HH:mm:ss"
							type="datetime"
							placeholder="请选择时间"
						/>
					</el-form-item>
				</el-col>
			</el-row>

			<div class="littleTitle situation">整改情况</div>
			<el-form-item label="整改状态：" prop="state">
				<el-radio-group v-model="formData.state">
					<el-radio :label="0">待整改</el-radio>
					<el-radio :label="1">已整改</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="整改图片：">
				<el-upload
					class="avatar-uploader"
					:action="`${baseUrl}` + '/xmgl/file/upload'"
					:show-file-list="false"
					:on-success="handleAvatarSuccess"
					:before-upload="beforeAvatarUpload"
					accept="image/jpg, image/jpeg, image/png"
					v-if="title === '问题整改'"
				>
					<img v-if="formData.solveImage" :src="formData.solveImage" class="avatar" />
					<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
				</el-upload>
				<el-image v-else style="width: 95px; height: 53px" :src="formData.solveImage" fit="fill" />
			</el-form-item>

			<el-row>
				<el-col :span="12">
					<el-form-item label="整改人：">
						<el-input v-model="formData.solveBy" placeholder="请输入" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="整改时间：">
						<!-- <el-input v-model="form.solveTime" placeholder="请输入" /> -->
						<el-date-picker
							style="width: 100%"
							v-model="formData.solveTime"
							format="YYYY-MM-DD HH:mm:ss"
							value-format="YYYY-MM-DD HH:mm:ss"
							type="datetime"
							placeholder="请选择时间"
						/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="备注：">
				<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="formData.remark" placeholder="请输入" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div v-if="title === '问题整改'">
				<el-button class="cancelButtonStyle" @click="visible = false">取消</el-button>
				<el-button type="primary" @click="confirm(ruleFormRef, formData)"> 保存 </el-button>
			</div>
			<div v-else class="footer">
				<el-button type="primary" @click="visible = false">关闭</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue";
import { getAIAlarmPage, addAIrecords, getAiMonitorDev, getIdAIrecords } from "@/api/modules/project";
import { ReqAiadd } from "@/api/types/government/AIwaring";
import Pagination from "@/components/ProTable/components/Pagination.vue";
import { ElMessage } from "element-plus";
import type { ResAiProjectPage, ResAiEngineerPage } from "@/api/types/government/AIwaring";
import type { UploadProps, FormInstance, FormRules } from "element-plus";

interface nameList {
	name: string;
	code: number;
}

interface formData {
	createBy: string;
	createTime: string;
	deviceCode: string;
	deviceName: string;
	id: string;
	image: string;

	remark: string;
	solveBy: string;
	solveImage: string;
	solveTime: string;
	state: number | undefined;
	type: undefined;
	typeName: string | string;
	// image:string
}

const imgVisible = ref(false);
const background = ref(true);
const visible = ref(false);
const title = ref("");
const baseUrl = import.meta.env.VITE_API_URL;
const ruleFormRef = ref<FormInstance>();
// 项目或者工程名字
const searchName = ref<string>("");

const pages = ref({
	pageNo: 1,
	pageSize: 12,
	total: 0
});

const records = ref<ResAiProjectPage[] | ResAiEngineerPage[]>([]);
// 监控设备
const monitorList = ref<ResAiProjectPage[]>([]);

const questList = ref([]);
const form = ref({
	code: "",
	createTime: "",
	startTime: "",
	endTime: ""
});

const formData = ref<formData>({
	createBy: "",
	createTime: "",
	deviceCode: "",
	deviceName: "",

	id: "",
	image: "",
	remark: "",
	solveBy: "",
	solveImage: "",
	solveTime: "",
	state: undefined,
	type: undefined,
	typeName: ""
});

// form下拉框
const nameList = ref<nameList[]>([]);

// 点击图片存的数据
const imgList = ref({
	createBy: "",
	createTime: "",
	deviceCode: "",
	deviceName: "",
	// engineeringSn: "",
	id: "",
	image: "",
	// projectSn: "",
	// remark: "",
	// solveBy: "",
	// solveImage: "",
	// solveTime: "",
	state: -1,
	// type: 4,
	typeName: ""
});

const rules = reactive<FormRules>({
	state: {
		required: true,
		message: "请输入选择整改状态",
		trigger: "blur"
	}
});

const confirm = async (formEl: FormInstance | undefined, form: any) => {
	// 标记表单校验
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			const res = await addAIrecords(form);
			ElMessage.success("保存成功");
			visible.value = false;
		} else {
			console.log("error submit!", fields);
			ElMessage({
				showClose: true,
				message: "请完善表单信息！",
				type: "error"
			});
		}
	});
};

const onShowImg = async (params: any) => {
	imgVisible.value = true;
	imgList.value = { ...params };
};

// 去整改的弹窗
const onRecord = async () => {
	title.value = "问题整改";
	formData.value = reactive({
		createBy: "",
		createTime: "",
		deviceCode: "",
		deviceName: "",

		id: "",
		image: "",

		remark: "",
		solveBy: "",
		solveImage: "",
		solveTime: "",
		state: undefined,
		type: undefined,
		typeName: ""
	});
	formData.value.deviceName = imgList.value.deviceName;
	formData.value.typeName = imgList.value.typeName;
	formData.value.image = imgList.value.image;
	formData.value.createBy = imgList.value.createBy;
	formData.value.createTime = imgList.value.createTime;
	formData.value.id = imgList.value.id;
	visible.value = true;
};
// form日期选择后改变入参
const onDatePicker = () => {
	form.value.startTime = form.value.createTime[0];
	form.value.endTime = form.value.createTime[1];
};

// 页面的form搜索  这里
const handSearch = async () => {
	const res = await getAIAlarmPage({ ...form.value, ...pages.value });
	questList.value = res.result;
};

// 页面的分页
const handleCurrentChange = async (page: number) => {
	const res = await getAIAlarmPage({
		pageNo: page,
		pageSize: pages.value.pageSize
	});
	questList.value = res.result;
	pages.value.total = +questList.value.total;
};

const handleSizeChange = async (size: number) => {
	const res = await getAIAlarmPage({
		pageNo: pages.value.pageNo,
		pageSize: size
	});
	questList.value = res.result;
	pages.value.total = +questList.value.total;
};

// 图片上传成功后的钩子
const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
	formData.value.solveImage = response.result.url;
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
	if (rawFile.type !== "image/png" && rawFile.type !== "image/jpg" && rawFile.type !== "image/jpeg") {
		console.log(rawFile.type);

		ElMessage.error("请上传jpg或者png格式的图片");
		return false;
	}
	//   限制文件大小
	//   else if (rawFile.size / 1024 / 1024 > 2) {
	//     ElMessage.error('Avatar picture size can not exceed 2MB!')
	//     return false
	//   }
	return true;
};

// 获取报警记录的分页
const getAIproPage = async () => {
	const { result } = await getAIAlarmPage(pages.value);
	questList.value = result;
	pages.value.total = Number(result.total);
};
// 监控名称下拉框的value
const getAiMonitorDevList = async () => {
	const res = await getAiMonitorDev({});
	nameList.value = res.result;
};

onMounted(async () => {
	getAIproPage();
	getAiMonitorDevList();
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
