﻿<template>
	<div class="eqDrawingManage-container">
		<el-dialog v-model="state.isShowDialog" v-if="state.isShowDialog" :width="800" draggable="" :close-on-click-modal="false">
			<template #header>
				<div style="color: #fff">
					<!--<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>-->
					<span>{{ props.title }}</span>
				</div>
			</template>
			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto" :rules="rules">
				<el-row :gutter="35">
					<el-form-item v-show="false">
						<el-input v-model="state.ruleForm.id" />
					</el-form-item>
					
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="图纸编码" prop="drawing_code">
							<el-input v-model="state.ruleForm.drawing_code" placeholder="请输入图纸编码" maxlength="255" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="图纸名称" prop="drawing_name">
							<el-input v-model="state.ruleForm.drawing_name" placeholder="请输入图纸名称" maxlength="255" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="版本" prop="versions_number">
							<el-input v-model="state.ruleForm.versions_number" placeholder="请输入版本" maxlength="255" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="适用设备编码" prop="apply_device_code">
							<el-input v-model="state.ruleForm.apply_device_code" placeholder="请输入适用设备编码" maxlength="255" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="适用设备id" prop="apply_device_id">
							<el-input v-model="state.ruleForm.apply_device_id" placeholder="请输入适用设备id" maxlength="255" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="适用设备名称" prop="apply_device_name">
							<el-input v-model="state.ruleForm.apply_device_name" placeholder="请输入适用设备名称" maxlength="255" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="备注" prop="remark">
							<el-input v-model="state.ruleForm.remark" placeholder="请输入备注" maxlength="255" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					
					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="文件地址" prop="file">
							<el-input v-model="state.ruleForm.file" placeholder="请输入文件地址" maxlength="500" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col> -->
					<el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="文件地址" prop="file">
							<!-- <el-upload ref="uploadRef" drag :auto-upload="false" :limit="1" :file-list="state.fileList" action="" :on-change="handleChange" accept=".jpg,.png,.bmp,.gif,.txt,.pdf,.xlsx,.docx">
								<el-icon class="el-icon--upload">
									<ele-UploadFilled />
								</el-icon>
								<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
								<template #tip>
									<div class="el-upload__tip">请上传大小不超过 10MB 的文件</div>
								</template>
							</el-upload> -->
							<el-upload :show-file-list="false" :http-request="uploadFilePathHandle" v-if="!state.ruleForm.file">
								<el-button type="primary">点击上传</el-button>
							</el-upload>
							<div v-else>
								{{ state.ruleForm.file.name }}
								<el-icon size="14" style="margin-right: 5px; display: inline; vertical-align: middle; color: red; cursor: pointer" @click="state.ruleForm.file = null">
									<ele-Delete />
								</el-icon>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<style lang="scss" scoped>
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}
</style>
<script lang="ts" setup>
    import { ref,onMounted, reactive } from "vue";
	import { ElMessage } from "element-plus";
	import type { FormRules } from "element-plus";
	import { addEqDrawingManage, updateEqDrawingManage, detailEqDrawingManage } from "/@/api/cqds/eqDrawingManage";
	import { pageEqDrawingManage, deleteEqDrawingManage } from '/@/api/cqds/eqDrawingManage';
	import {uploadFilePath } from '/@/api/mes/mesProduct.ts';

  	import { formatDate } from '/@/utils/formatTime';
	  import { getAPI } from '/@/utils/axios-utils';
	  import { SysFileApi } from '/@/api-services/api';

	//父级传递来的参数
	var props = defineProps({
		title: {
		type: String,
		default: "",
	},
	});
	//父级传递来的函数，用于回调
	const emit = defineEmits(["reloadTable"]);
	const ruleFormRef = ref();
    const state = reactive({
    isShowDialog: false,
    ruleForm: {} as any,
	fileList: [] as any,
	fileUrl: '',
	docxUrl: '',
	excelUrl: '',
	pdfUrl: '',
	fileName: '',
	fileType: '',
	isPublic: false,
});

	//自行添加其他规则
	const rules = ref<FormRules>({
	});

	// 页面加载时
	onMounted(() => {

	});

	// 打开弹窗
	const openDialog = async (row: any) => {
		// state.ruleForm = JSON.parse(JSON.stringify(row));
		// 改用detail获取最新数据来编辑
		let rowData = JSON.parse(JSON.stringify(row));
		if (rowData.id){
			state.ruleForm = (await detailEqDrawingManage(rowData.id)).data.result;
			state.ruleForm.file = JSON.parse(state.ruleForm.file)
		}
		else
			state.ruleForm = rowData;
		state.isShowDialog = true;
	};

	// 关闭弹窗
	const closeDialog = () => {
		emit("reloadTable");
		state.isShowDialog = false;
	};

	// 取消
	const cancel = () => {
		state.isShowDialog = false;
	};

	// 提交
	const submit = async () => {
		ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
			if (isValid) {
				let values = state.ruleForm;
				values.file = JSON.stringify(values.file)
				if (state.ruleForm.id == undefined || state.ruleForm.id == null || state.ruleForm.id == "" || state.ruleForm.id == 0) {
					await addEqDrawingManage(values);
				} else {
					await updateEqDrawingManage(values);
				}
				closeDialog();
			} else {
				ElMessage({
					message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
					type: "error",
				});
			}
		});
	};

	const uploadFilePathHandle = async (options: UploadRequestOptions) => {
		const res = await uploadFilePath(options);
		state.ruleForm.file = { url: res.data.result?.url, name: res.data.result?.fileName };
	};

	// 通过onChanne方法获得文件列表
	const handleChange = (file: any, fileList: []) => {
		state.fileList = fileList;
	};

	// 上传
	// const handleUpload = async () => {
	// 	if (state.fileList.length < 1) return;
	// 	var res = await getAPI(SysFileApi).apiSysFileUploadFilePostForm(state.fileList[0].raw, state.fileType, state.isPublic, undefined);
	// 	ElMessage.success('上传成功');
	// 	return res.data.result.url;
	// };

	//将属性或者函数暴露给父组件
	defineExpose({ openDialog });
</script>




