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

<template>
	<el-drawer
		:visible.sync="visible"
		:show-close="false"
		:wrapper-closable="false"
		class="drawer"
		size="60%">
		<small-title slot="title" :no-padding="true">
			{{ disabled ? '查看详情' : !dataForm.maintenanceStatus ? '修改' : '完成' }}
		</small-title>
		<el-form
			ref="form"
			:model="dataForm"
			label-width="100px"
			v-loading="formLoading">
			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item label="维修单号" prop="repairOrderNumber">
						<span>{{ dataForm.repairOrderNumber }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="设备名称" prop="equipmentName">
						<span>{{ dataForm.equipmentName }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="维修工" prop="repairman">
						<span>{{ dataForm.repairman }}</span>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item label="故障发生时间" prop="faultTime">
						<span>{{ dataForm.faultTime }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="故障级别" prop="faultLevel">
						<span>{{ dataForm.faultLevel }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="联系方式" prop="repairmanPhone">
						<span>{{ dataForm.repairmanPhone }}</span>
					</el-form-item>
				</el-col>
			</el-row>
			<small-title style="margin: 16px 0; padding-left: 8px" :no-padding="true">
				{{ '可编辑信息' }}
			</small-title>
			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item
						label="维修开始时间"
						prop="maintenanceStartTime"
						:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
						<el-date-picker
							v-model="dataForm.maintenanceStartTime"
							type="datetime"
							:disabled="disabled"
							placeholder="请选择维修开始时间"
							value-format="timestamp" />
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item
						label="维修结束时间"
						prop="maintenanceFinishTime"
						:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
						<el-date-picker
							v-model="dataForm.maintenanceFinishTime"
							type="datetime"
							:disabled="disabled"
							placeholder="请选择维修开始时间"
							value-format="timestamp" />
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item
						label="维修方式"
						prop="repairMode"
						:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
						<el-select
							:disabled="disabled"
							v-model="dataForm.repairMode"
							placeholder="请选择维修方式">
							<el-option
								v-for="opt in getDictDatas('repair-mode')"
								:key="opt.value"
								:label="opt.label"
								:value="opt.value" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item label="故障类型" prop="faultType">
						<el-select
							:disabled="disabled"
							v-model="dataForm.faultType"
							placeholder="请选择故障类型">
							<el-option
								v-for="opt in getDictDatas('fault-type')"
								:key="opt.value"
								:label="opt.label"
								:value="opt.value" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col>
					<el-form-item
						label="故障明细"
						prop="faultDetail"
						:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
						<!-- // 富文本 -->
						<editor v-model="dataForm.faultDetail" :read-only="disabled" :min-height="380"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col>
					<el-form-item label="维修记录" prop="maintenanceDetail">
						<!-- // 富文本 -->
						<editor v-model="dataForm.maintenanceDetail" :read-only="disabled" :min-height="380"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col>
					<el-form-item label="维修附件" prop="file">
						<FileUpload v-model="file" :disabled="disabled" />
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col>
					<el-form-item label="备注" prop="remark">
						<el-input
							v-model="dataForm.remark"
							:placeholder="`请输入备注`"
							:disabled="disabled" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<div class="drawer-body__footer">
			<el-button style="" @click="goback()">取消</el-button>
			<el-button v-if="disabled" type="primary" @click="goEdit()">
				编辑
			</el-button>
			<el-button v-else type="primary" @click="dataFormSubmit()">确定</el-button>
		</div>
	</el-drawer>
</template>

<script>
import SmallTitle from '../../base/alarm/Record/SmallTitle.vue';
import { getEqRepair, updateEqRepair } from '@/api/equipment/base/repair'
import Editor from "@/components/Editor";
import FileUpload from "@/components/FileUpload";
import { getDictDatas } from "@/utils/dict";

export default {
	name: 'DialogForm',
	model: {
		prop: 'dataForm',
		event: 'update',
	},
	emits: ['update'],
	components: { SmallTitle, Editor, FileUpload },
	props: {
		// dataForm: {
		// 	type: Object,
		// 	default: () => ({}),
		// },
		// disabled: {
		// 	type: Boolean,
		// 	default: false
		// },
	},
	data() {
		return {
			formLoading: true,
			visible: false,
			disabled: false,
			dataForm: {},
			file: ''
		};
	},
	mounted() {},
	methods: {
		goback() {
			this.$emit('refreshDataList');
			this.visible = false;
		},
		goEdit() {
			this.isdetail = false;
		},
		/** 模拟透传 ref  */
		validate(cb) {
			return this.$refs.form.validate(cb);
		},
		resetFields(args) {
			return this.$refs.form.resetFields(args);
		},
		init(row, isdetail) {
			// this.initData();
			this.disabled = isdetail || false;
			this.dataForm.id = row.id || undefined;
			this.visible = true;
			console.log('111', this.dataForm, row)

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

				if (this.dataForm.id) {
					// 获取设备维修
					getEqRepair(this.dataForm.id).then(response => {
						this.formLoading = false
            this.dataForm = response.data;
						this.dataForm.maintenanceStatus = row.maintenanceStatus || 0
          });
				} else {
					// if (this.urlOptions.isGetCode) {
          //   this.getCode()
          // }
				}
			});
		},
		// 表单提交
    dataFormSubmit() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return false;
        }
        // 修改的提交
				if (this.file) {
					const temp = this.file.split(',') // 获取文件个数
					let arry = []
					temp.forEach(item => {
						arry.push({
							fileType: 2,
							fileUrl: item
						})
					})
					this.dataForm.files = arry
				}
        if (this.dataForm.id) {
          updateEqRepair(this.dataForm).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.visible = false;
            this.$emit("refreshDataList");
          });
          return;
        }
        // 添加的提交
        // this.urlOptions.createURL(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;
}
.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;
	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>
