<!-- 
    filename: dialogForm.vue
    author: liubin
    date: 2023-10-31 15:55:13
    description: 
-->

<template>
	<el-drawer
		ref="drawer"
		:visible.sync="visible"
		:show-close="false"
		:wrapper-closable="isdetail"
		class="drawer"
		size="55%"
		@closed="$emit('destroy')">
		<small-title slot="title" :no-padding="true">
			{{ isdetail ? '查看详情' : !dataForm.id ? '新增' : '编辑' }}
		</small-title>

		<el-form
			ref="dataForm"
			style="margin: 0 16px; padding: 0 16px"
			:model="dataForm"
			:rules="dataRule"
			label-width="100px"
			label-position="top"
			v-loading="formLoading">
			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item
						label="设备大类"
						prop="equipmentCategory"
						:rules="[
							{ required: true, message: '请选择设备大类', trigger: 'blur' },
						]">
						<el-select
							v-model="dataForm.equipmentCategory"
							:disabled="isdetail"
							:placeholder="`请选择设备大类`"
							filterable
							@change="handleEqTypeChange">
							<el-option
								v-for="opt in equipmentTypeOptions"
								:key="opt.value"
								:label="opt.label"
								:value="opt.value" />
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item
						label="设备名称"
						prop="equipmentId"
						:rules="[
							{ required: true, message: '设备不能为空', trigger: 'blur' },
						]">
						<el-select
							v-model="dataForm.equipmentId"
							filterable
							clearable
							:disabled="isdetail"
							style="width: 100%"
							placeholder="请选择设备名称"
							@change="setConfig">
							<el-option
								v-for="dict in equipmentOptions"
								:key="dict.value"
								:label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<!-- <el-form-item label="物料名称" prop="name">
						<el-input v-model="dataForm.name" :disabled="isdetail" clearable placeholder="请输入物料名称" />
					</el-form-item> -->
					<el-form-item
						label="巡检配置名称"
						prop="configId"
						:rules="[
							{ required: true, message: '巡检配置不能为空', trigger: 'blur' },
						]">
						<el-select
							v-model="dataForm.configId"
							filterable
							clearable
							:disabled="isdetail"
							style="width: 100%"
							placeholder="请选择巡检配置"
							@change="setInspectionContet">
							<el-option
								v-for="dict in configList"
								:key="dict.id"
								:label="dict.name"
								:value="dict.id" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="设备编码" prop="equipmentCode">
						<el-input
							v-model="dataForm.equipmentCode"
							disabled
							clearable
							placeholder="请输入设备编码" />
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item label="巡检人" prop="responsible">
						<el-input
							v-model="dataForm.responsible"
							:disabled="isdetail"
							clearable
							placeholder="请输入巡检人" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="巡检时间" prop="actualTime">
						<el-date-picker
							v-model="dataForm.actualTime"
							type="datetime"
							:disabled="isdetail"
							format="yyyy-MM-dd HH:mm:ss"
							value-format="timestamp"
							placeholder="选择巡检时间" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="数据来源" prop="origin">
						<el-select
							v-model="dataForm.origin"
							filterable
							clearable
							:disabled="isdetail"
							style="width: 100%"
							placeholder="请选择数据来源">
							<el-option key="1" label="手动" :value="1" />
							<el-option key="2" label="PDA" :value="2" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-form-item label="巡检内容">
				<base-table
					:table-props="tableProps"
					:page="listQuery.pageNo"
					:limit="listQuery.pageSize"
					:table-data="list" />
			</el-form-item>
			<el-form-item label="巡检详情" prop="description">
				<editor
					v-if="!isdetail"
					v-model="dataForm.description"
					:min-height="150" />
				<div
					v-else
					v-html="dataForm.description"
					style="padding: 5px; margin-left: 5px; border: 1px solid #dfdfdf" />
			</el-form-item>
			<el-form-item label="附件">
				<FileUpload
					v-model="file"
					:limit="1"
					:f-name="fileName"
					:disabled="isdetail"
					@name="setFileName" />
			</el-form-item>
		</el-form>

		<div v-if="!isdetail" class="drawer-body__footer">
			<el-button @click="goback()">取消</el-button>
			<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
		</div>
	</el-drawer>
</template>

<script>
import SmallTitle from './SmallTitle.vue';
import {
	createCheckLog,
	updateCheckLog,
	getcheckConfigByEqList,
	getEqCheckLog,
} from '@/api/equipment/base/inspection/record';
import { getEquipmentAll } from '@/api/base/equipment';
import Editor from '@/components/Editor';
import { getCheckDetPage } from '@/api/equipment/base/inspection/settings';
// import FileUpload from "@/components/FileUpload";
// import { parseTime } from '../../../../core/mixins/code-filter';
// import attrAdd from './attr-add';
import FileUpload from '@/components/FileUpload';

const tableBtn = [
	{
		type: 'delete',
		btnName: '删除',
	},
];

const tableProps = [
	{
		prop: 'program',
		label: '巡检项目',
	},
	{
		prop: 'content',
		label: '巡检内容',
	},
];

export default {
	name: 'AddRecord',
	model: {
		prop: 'dataForm',
		event: 'update',
	},
	emits: ['update'],
	components: { SmallTitle, Editor, FileUpload },
	props: {
		// dataForm: {
		// 	type: Object,
		// 	default: () => ({}),
		// },
		// disabled: {
		// 	type: Boolean,
		// 	default: false
		// },
	},
	data() {
		return {
			tableBtn,
			tableProps,
			addOrUpdateVisible: false,
			formLoading: true,
			visible: false,
			isdetail: false,
			dataForm: {
				id: undefined,
				configId: undefined,
				equipmentId: undefined,
				actualTime: undefined,
				responsible: undefined,
				description: undefined,
				equipmentCode: undefined,
				equipmentCategory: undefined,
				origin: 1,
				files: [],
			},
			equipmentTypeOptions: [
				{ label: '安全设备', value: 1 },
				{ label: '消防设备', value: 2 },
				{ label: '特种设备', value: 3 },
			],
			list: [],
			eqList: [],
			configList: [],
			listQuery: {
				pageSize: 10,
				pageNo: 1,
				total: 0,
			},
			file: '',
			fileName: '',
			dataRule: {
				responsible: [
					{ required: true, message: '巡检人不能为空', trigger: 'blur' },
				],
				actualTime: [
					{ required: true, message: '巡检时间不能为空', trigger: 'blur' },
				],
			},
		};
	},
	mounted() {
		this.getDict();
	},
	methods: {
		setFileName(val) {
			this.fileName = val;
		},
		async getDict() {
			const res = await getEquipmentAll();
			this.eqList = res.data;
			this.handleEqTypeChange();

			const configres = await getcheckConfigByEqList();
			this.configList = configres.data;
		},
		async setConfig() {
			const configres = await getcheckConfigByEqList({
				equipmentId: this.dataForm.equipmentId,
			});
			this.configList = configres.data;
			this.dataForm.configId =
				this.configList.filter((it) => {
					return it.id === this.dataForm.configId;
				})[0]?.id ?? undefined;
			this.dataForm.equipmentCode =
				this.eqList.filter((item) => {
					return item.id === this.dataForm.equipmentId;
				})[0]?.code ?? undefined;
		},
		goback() {
			this.$emit('refreshDataList');
			this.visible = false;
		},
		goEdit() {
			this.isdetail = false;
		},
		/** 模拟透传 ref  */
		validate(cb) {
			return this.$refs.dataForm.validate(cb);
		},
		resetFields(args) {
			return this.$refs.dataForm.resetFields(args);
		},
		initData() {
			this.list = [];
			this.file = '';
			this.fileName = '';
		},
		init(id, isdetail) {
			this.initData();
			this.isdetail = isdetail || false;
			this.dataForm.id = id || undefined;
			this.visible = true;

			// const scrollContainer = this.$refs.dataForm;
			// const scrollPosition = scrollContainer.scrollTop;
			// console.log('12', scrollPosition);

			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields();

				if (this.dataForm.id) {
					// 获取巡检记录
					getEqCheckLog(this.dataForm.id).then((response) => {
						this.formLoading = false;
						this.dataForm = response.data;
						if (this.dataForm.files.length > 0) {
							this.file = this.dataForm.files[0].fileUrl;
							this.fileName = this.dataForm.files[0].fileName;
						}
						this.dataForm.description = this.dataForm.description || '无';
						this.setConfig();
						this.setInspectionContet();
					});
				} else {
					// if (this.urlOptions.isGetCode) {
					//   this.getCode()
					// }
				}
			});
			this.formLoading = false;
		},
		setInspectionContet() {
			// 根据巡检配置名称获得巡检配置详细对应巡检内容
			getCheckDetPage({
				pageNo: 1,
				pageSize: 99,
				configId: this.dataForm.configId,
			}).then((response) => {
				this.list = response.data.list;
				this.listQuery.total = response.data.total;
			});
		},
		// 新增 / 修改
		addNew(id) {
			this.addOrUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(id);
			});
		},
		handleEqTypeChange(type) {
			this.dataForm.equipmentId = null;
			this.dataForm.equipmentCode = null;
			if (type) {
				this.equipmentOptions = this.eqList
					.filter((item) => item.special)
					.filter((item) => item.specialType === type)
					.map((item) => ({ label: item.name, value: item.id }));
			} else
				this.equipmentOptions = this.eqList
					// .filter((item) => item.special)
					.map((item) => ({
						label: item.name,
						value: item.id,
					}));
			// this.$emit('update', this.form)
		},
		// 表单提交
		dataFormSubmit() {
			this.$refs['dataForm'].validate((valid) => {
				if (!valid) {
					return false;
				}
				if (this.file) {
					const temp = this.file.split(','); // 获取文件个数
					let arry = [];
					temp.forEach((item, index) => {
						arry.push({
							fileName: this.fileName,
							fileType: 2,
							fileUrl: item,
						});
					});
					this.dataForm.files = arry;
				} else {
					this.dataForm.files = [];
				}

				// 修改的提交
				if (this.dataForm.id) {
					updateCheckLog(this.dataForm).then((response) => {
						this.$modal.msgSuccess('修改成功');
						this.visible = false;
						this.$emit('refreshDataList');
					});
					return;
				}
				// 添加的提交
				createCheckLog(this.dataForm).then((response) => {
					this.$modal.msgSuccess('新增成功');
					this.visible = false;
					this.$emit('refreshDataList');
				});
			});
		},
	},
};
</script>

<style scoped>
.el-date-editor,
.el-select {
	width: 100%;
}
.drawer-body__footer {
	display: flex;
	justify-content: flex-end;
	padding: 18px;
}
.action_btn {
	float: right;
	margin: 5px 15px;
	font-size: 14px;
}
.add {
	color: #0b58ff;
}
.drawer >>> .el-drawer {
	border-radius: 8px 0 0 8px;
	display: flex;
	flex-direction: column;
}

.drawer >>> .el-form-item__label {
	padding: 0;
}

.drawer >>> .el-drawer__header {
	margin: 0;
	padding: 32px 32px 24px;
	border-bottom: 1px solid #dcdfe6;
}
.drawer >>> .el-drawer__body {
	flex: 1;
	height: 1px;
	margin: 10px 0;
	display: flex;
	flex-direction: column;
}

.drawer >>> .content {
	padding: 30px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	/* height: 100%; */
}

.drawer >>> .visual-part {
	flex: 1 auto;
	max-height: 76vh;
	overflow: hidden;
	overflow-y: scroll;
	padding-right: 10px; /* 调整滚动条样式 */
}

.drawer >>> .el-form,
.drawer >>> .attr-list {
	padding: 0 16px;
}

.drawer-body__footer {
	display: flex;
	justify-content: flex-end;
	padding: 18px;
}
</style>
