<template>
	<div>
		<el-dialog
			v-model="state.isShowDialog"
			draggable
			title="补充信息"
			append-to-body
		>
			<el-form :model="state.ruleForm" label-width="90px" ref="ruleFormRef">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="工单标题">
							{{ state.showForm.title }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="工单编码">
							{{ state.showForm.no }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="受理类型">
							{{ state.showForm.acceptTypeText }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="热点分类">
							{{ state.showForm.hotspotSpliceName }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="补充内容" class="textarea" prop="opinion" :rules="[{ required: true, message: '请填写补充内容', trigger: 'blur' }]">
							<el-input
								v-model="state.ruleForm.opinion"
								type="textarea"
								:autosize="{ minRows: 10, maxRows: 10 }"
								placeholder="请填写补充内容"
								clearable
								max-length="2000"
							>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="附件" prop="additions" :rules="[{ required: false, message: '请填写诉求内容', trigger: 'change' }]">
							<el-upload
								v-model:file-list="state.fileList"
								class="upload-demo w100"
								action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
								multiple
								:before-remove="beforeRemove"
								:on-exceed="handleExceed"
								ref="uploadListRef"
							>
								<el-button> <SvgIcon name="ele-Upload" /> 上传附件 </el-button>
								<template #file="{ file }">
									<div class="el-upload-list__item-info">
										<a class="el-upload-list__item-name">
											<SvgIcon class="mr5" :name="fileType(checkFile(file.name))" size="16px" />
											<span class="el-upload-list__item-file-name">{{ file.name }}</span>
										</a>
									</div>
									<SvgIcon name="ele-Close" class="el-icon--close" size="14px" title="删除文件" @click="handleRemove(file)" />
								</template>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" class="default-button">取 消</el-button>
					<el-button type="primary" @click="onSubmit" :loading="state.loading">提 交</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="orderSupply">
import { reactive, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { UploadProps } from 'element-plus';
import { throttle, checkFile, fileType } from '/@/utils/tools';
import { supplement } from '/@/api/system/workflow';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['onSupplySubmit']);
// 定义变量内容
const state = reactive<any>({
	isShowDialog: false,
	ruleForm: {
		opinion: '',
		additions: [], // 附件
		workflowId: '', // 流程id
	},
	showForm:{},
	fileList: [],
	loading: false,
});
const ruleFormRef = ref();
const uploadListRef = ref();
// 打开弹窗
const openDialog = async (val: any) => {
	ruleFormRef.value?.clearValidate();
	ruleFormRef.value?.resetFields();
	state.showForm = val;
	state.ruleForm.workflowId = val.workflowId;
	state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 删除确认
const beforeRemove: UploadProps['beforeRemove'] = (uploadFile) => {
	return ElMessageBox.confirm(`确定要删除 ${uploadFile.name} ?`).then(
		() => true,
		() => false
	);
};
// 删除文件
const handleRemove = (file: any) => {
	uploadListRef.value.handleRemove(file);
};
const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
	ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`);
};
// 提交
const onSubmit = throttle(() => {
	ruleFormRef.value.validate((valid: boolean) => {
		if (valid) {
			ElMessageBox.confirm(`确认提交?`, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
				draggable: true,
				cancelButtonClass: 'default-button',
				autofocus: false,
			})
				.then(() => {
					state.loading = true;
					supplement(state.ruleForm)
						.then(() => {
							state.loading = false;
							state.isShowDialog = false;
							emit('onSupplySubmit');
						})
						.catch(() => {
							state.loading = false;
							state.isShowDialog = false;
						});
				})
				.catch(() => {});
		} else {
			return false;
		}
	});
}, 1000);
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
<style lang="scss" scoped>
.upload-demo {
	:deep(.el-upload-list) {
		display: flex;
		flex-wrap: wrap;
		.el-upload-list__item {
			width: calc(25% - 10px);
			border: var(--el-border);
			margin-right: 10px;
		}
	}
}
</style>
