<template>
	<el-dialog
		v-model="state.dialogVisible"
		draggable
		title="工单退回"
		@mouseup="mouseup"
		:style="'transform: ' + state.transform + ';'"
		ref="dialogRef"
		append-to-body
		destroy-on-close
		@close="close"
	>
		<el-form :model="state.ruleForm" label-width="90px" ref="ruleFormRef" v-loading="state.loading">
			<el-row :gutter="20">
				<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
					<el-form-item
						label="退回节点"
						prop="assignStepId"
						:rules="[{ required: false, message: '请选择退回节点', trigger: 'change' }]"
						v-if="state.nextStepOptions && state.nextStepOptions.length"
					>
						<el-select v-model="state.ruleForm.assignStepId" placeholder="请选择退回节点">
							<el-option v-for="item in state.nextStepOptions" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
					<el-form-item prop="isSms" v-if="isShowReturnSms">
						<el-checkbox v-model="state.ruleForm.isSms" label="短信通知" />
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="退回意见" class="textarea" prop="opinion" :rules="[{ required: true, message: '请填写退回意见', trigger: 'blur' }]">
						<common-advice
							@chooseAdvice="chooseAdvice"
							v-model="state.ruleForm.opinion"
							placeholder="请填写退回意见"
							:loading="state.loading"
							:commonEnum="commonEnum.Return"
						/>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="附件">
						<annex-list name="退回附件" ref="annexListRef" :businessId="state.ruleForm.orderId" classify="退回附件" v-model:format="handleFiles" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="closeDialog" class="default-button">取 消</el-button>
				<el-button type="primary" @click="onSubmit(ruleFormRef)" :loading="state.loading">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, defineAsyncComponent } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import { throttle } from '@/utils/tools';
import { commonEnum } from '@/utils/constants';
import { orderPrevious } from '@/api/system/workflow';
import { orderReturnParams } from '@/api/business/order';

// 引入组件
const CommonAdvice = defineAsyncComponent(() => import('@/components/CommonAdvice/index.vue')); // 常用意见
const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/index.vue')); // 附件列表

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);
// 定义变量内容
const state = reactive<any>({
	dialogVisible: false,
	ruleForm: {
		opinion: '', // 退回原因
		isSms: false, // 是否发送短信
		orderId: null,
		workflowId: null,
		nextStepCode: '', // 下一节点
		nextStepName: '', // 下一节点名称
		nextHandlers: [], // 下一节点办理对象
		orderAssignMode: 0, // 派单类型默认逐级派单
		stepId: null, // 步骤id
		isStartCountersign: false, // 是否发起会签
		assignStepId: null, // 选择的退回节点ID
	},
	orderDetail: {}, // 工单详情
	loading: false, // 提交按钮loading
	transform: 'translate(0px, 0px)', // 滚动条位置
	nextStepOptions: [],
});
// 查询退回参数
const getSubmitObj = async (val: any) => {
	try {
		const { result } = await orderReturnParams(val.id);
		state.ruleForm.orderId = val.id;
		state.ruleForm.workflowId = val.workflowId;
		state.nextStepOptions = result.steps ?? [];
		handleResultReturn(result);
		state.loading = false;
	} catch (e) {
		state.loading = false;
		console.log(e);
	}
};
const ruleFormRef = ref<RefType>();
// 打开弹窗
const openDialog = (val: any) => {
	state.loading = true;
	state.dialogVisible = true;
	getSubmitObj(val);
};
// 处理退回 currentBusinessType   表示选择节点到哪一步  0 坐席 1派单  2部门节点  3部门领导节点
// targetBusinessType  0 坐席 1派单  2部门节点  3部门领导节点
const isShowReturnSms = ref(false);
const handleResultReturn = (result: any) => {
	// 部门退部门需要默认选中短信
	if (result.currentBusinessType === 2 && result.targetBusinessType === 2) {
		isShowReturnSms.value = true;
		state.ruleForm.isSms = true;
	} else {
		isShowReturnSms.value = false;
		state.ruleForm.isSms = false;
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
const close = () => {
	ruleFormRef.value?.clearValidate();
	ruleFormRef.value?.resetFields();
};
// 选中常用意见
const chooseAdvice = (item: any) => {
	state.ruleForm.opinion += item.content;
};
// 设置抽屉
const dialogRef = ref<RefType>();
const mouseup = () => {
	state.transform = dialogRef.value.dialogContentRef.$el.style.transform;
};
// 提交
const handleFiles = ref<EmptyArrayType>([]); // 附件列表
const onSubmit = throttle((formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		const requestReturn = { ...state.ruleForm, files: handleFiles.value };
		state.loading = true;
		orderPrevious(requestReturn)
			.then(() => {
				emit('updateList');
				ElMessage.success('退回申请成功');
				closeDialog();
				state.loading = false;
			})
			.catch(() => {
				emit('updateList');
				closeDialog();
				state.loading = false;
			});
	});
}, 300);
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
