<template>
	<el-drawer
		:visible.sync="visible"
		:show-close="false"
		:wrapper-closable="disabled"
		class="drawer"
		custom-class="mes-drawer"
		size="65%"
		@closed="$emit('destroy')">
		<small-title slot="title" :no-padding="true">
			{{
				disabled ? '查看详情' : !dataForm.maintenanceStatus ? '修改' : '完成'
			}}
		</small-title>
		<div class="drawer-body flex">
			<div class="drawer-body__content">
				<el-form
					ref="form"
					:model="dataForm"
					label-width="100px"
					label-position="top"
					v-loading="formLoading">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="故障发生时间" prop="faultTime">
								<span style="color: #000a;">{{ parseTime(dataForm.faultTime) }}</span>
							</el-form-item>
						</el-col>

						<!-- <el-col :span="8">
							<el-form-item label="故障级别" prop="faultLevel">
								<span>
									{{
										dataForm.faultLevel
											? getDictDatas(DICT_TYPE.FAULT_LEVEL).find(
													(item) => item.value == dataForm.faultLevel
											  )?.label
											: '---'
									}}
								</span>
							</el-form-item>
						</el-col> -->

						<el-col :span="8">
							<el-form-item label="故障级别" prop="faultLevel">
								<span style="color: #000a;">
									{{ getDictDataLabel('fault-level', dataForm.faultLevel) }}
								</span>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="故障类型" prop="faultType">
								<span style="color: #000a;">
									{{ getDictDataLabel('fault-type', dataForm.faultType) }}
								</span>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="维修工" prop="repairman">
								<span style="color: #000a;">{{ dataForm.repairman }}</span>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="联系方式" prop="repairmanPhone">
								<span style="color: #000a;">{{ dataForm.repairmanPhone }}</span>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="维修方式" prop="repairMode">
								<span style="color: #000a;">
									{{ getDictDataLabel('repair-mode', dataForm.repairMode) }}
								</span>
							</el-form-item>
						</el-col>

						<el-col :span="24">
							<el-form-item label="维修附件" prop="files">
								<div v-if="dataForm.files && dataForm.files.length > 0">
									<uploadedFile
										class="file"
										v-for="file in dataForm.files"
										:file="file"
										:key="file.fileUrl"
										:disabled="disabled"
										@delete="!disabled && handleDeleteFile(file, col.prop)" />
								</div>
								<p v-else style="color: #000a;">暂无附件</p>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="创建时间" prop="createTime">
								<span style="color: #000a;">{{ parseTime(dataForm.createTime) }}</span>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="创建人" prop="creator">
								<span style="color: #000a;">{{ dataForm.creator }}</span>
							</el-form-item>
						</el-col>

						<el-col :span="24">
							<el-form-item label="备注" prop="remark">
								<span style="color: #000a;">{{ dataForm.remark || '- 无 -' }}</span>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>

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

<script>
import SmallTitle from './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';
import { parseTime } from '@/utils/ruoyi';
import { getDictDataLabel } from '@/utils/dict';
import tupleImg from '@/assets/images/tuple.png';

const uploadedFile = {
	name: 'UploadedFile',
	props: ['file', 'disabled'],
	data() {
		return {};
	},
	methods: {
		handleDelete() {
			this.$emit('delete', this.file);
		},
		async handleDownload() {
			const data = await this.$axios({
				url: this.file.fileUrl,
				method: 'get',
				responseType: 'blob',
			});

			await this.$message.success('开始下载');
			// create download link
			const url = window.URL.createObjectURL(data);
			const link = document.createElement('a');
			link.href = url;
			link.download = this.file.fileName;
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		},
	},
	mounted() {},
	render: function (h) {
		return (
			<div
				title={this.file.fileName}
				onClick={this.handleDownload}
				style={{
					background: `url(${tupleImg}) no-repeat`,
					backgroundSize: '14px',
					backgroundPosition: '0 55%',
					paddingLeft: '20px',
					paddingRight: '24px',
					textOverflow: 'ellipsis',
					whiteSpace: 'nowrap',
					overflow: 'hidden',
					cursor: 'pointer',
					display: 'inline-block',
				}}>
				{this.file.fileName}
				{!this.disabled && (
					<el-button
						type="text"
						icon="el-icon-close"
						style="float: right; position: relative; top: 2px; left: 8px; z-index: 100"
						class="dialog__upload_component__close"
						onClick={this.handleDelete}
					/>
				)}
			</div>
		);
	},
};

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

		init(row, isdetail) {
			this.disabled = isdetail || false;
			this.dataForm.id = row.id || undefined;
			this.visible = true;

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

				if (this.dataForm.id) {
					// 获取设备维修
					getEqRepair(this.dataForm.id).then((response) => {
						this.formLoading = false;
						this.dataForm = response.data;
					});
				}
			});
		},
		handleDeleteFile(file, prop) {
			this.dataForm.files = this.dataForm.files.filter(
				(item) => item.fileUrl != file.fileUrl
			);
		},
		// 表单提交
		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({
							fileName: this.fileName,
							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>
.drawer >>> .el-drawer {
	border-radius: 8px 0 0 8px;
}

.drawer >>> .el-drawer__header {
	margin: 0;
	padding: 32px 32px 24px;
	border-bottom: 1px solid #dcdfe6;
	margin-bottom: 0px;
}

.small-title::before {
	content: '';
	display: inline-block;
	vertical-align: top;
	width: 4px;
	height: 22px;
	border-radius: 1px;
	margin-right: 8px;
	background-color: #0b58ff;
}

.drawer-body {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.drawer-body__content {
	flex: 1;
	/* background: #eee; */
	padding: 20px 30px;
	overflow-y: auto;
}

.drawer-body__content >>> .el-form-item__label {
	font-weight: 700;
}

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