<template>
	<el-dialog :title="'模板配置（' + dialogTitle + '）'" v-model="dialogVisible" draggable width="900px">
		<el-form :model="state.queryParams" ref="ruleDialogFormRef" :inline="true" @submit.native.prevent class="mt15">
			<el-form-item label="关键字查询" prop="Keyword">
				<el-input v-model="state.queryParams.Keyword" placeholder="模板名称/编码" clearable @keyup.enter="queryList" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="queryList" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
				<el-button @click="resetQuery(ruleDialogFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
			</el-form-item>
		</el-form>
		<el-table :data="state.tableData" @current-change="handleSelectionChange" max-height="500" v-loading="state.loading">
			<el-table-column prop="phoneNo" label="请选择" width="70">
				<template #default="{ row }">
					<el-radio v-model="state.tableRadio" :label="row.id">&nbsp;</el-radio>
				</template>
			</el-table-column>
			<el-table-column prop="phoneNo" label="模板名称" show-overflow-tooltip>
				<template #default="{ row }">
					<span class="color-primary">{{ row.name }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="version" label="模板版本号" show-overflow-tooltip> </el-table-column>
			<el-table-column prop="code" label="模板编码" show-overflow-tooltip> </el-table-column>
			<el-table-column prop="creationTime" label="创建时间" show-overflow-tooltip width="170">
				<template #default="{ row }">
					<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
				</template>
			</el-table-column>
			<template #empty>
				<Empty />
			</template>
		</el-table>
		<!-- 分页 -->
		<pagination :total="state.total" v-model:page="state.queryParams.PageIndex" v-model:limit="state.queryParams.PageSize" @pagination="queryList" />
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false" class="default-button">取 消</el-button>
				<el-button type="primary" @click="onSubmit" :disabled="!state.tableRadio">保 存</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup name="workflowConfig">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { workflowList, wfmodulesMatch } from '/@/api/system/workflow';
import { formatDate } from '/@/utils/formatTime';
import { throttle } from '/@/utils/tools';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList', 'openDialog', 'closeDialog']);

// 定义变量内容
const state = reactive<any>({
	tableData: [], // 表格数据
	total: 0, // 总条数
	loading: false, // 加载
	queryParams: {
		PageIndex: 1, // 当前页
		PageSize: 10, // 每页条数
		Keyword: '', // 关键字
		Status: '1', // 状态
	},
	tableRadio: '', // 选择的模板
	rowCode: '', // 行数据code
});
const ruleDialogFormRef = ref<FormInstance>(); // 表单
const dialogVisible = ref(false); // 弹窗
const dialogTitle = ref(''); // 弹窗标题

// 打开弹窗
const openDialog = async (row: any) => {
	try {
		queryList();
		state.rowCode = row.code;
		if (row.definitionId) state.tableRadio = row.definitionId;
		else state.tableRadio = '';
		dialogTitle.value = row.name;
		dialogVisible.value = true;
	} catch (error) {
		console.log(error);
		state.loading = false;
	}
};

const queryList = () => {
	state.loading = true;
	workflowList(state.queryParams)
		.then((res: any) => {
			state.tableData = res.result?.items ?? [];
			state.total = res.result?.total ?? 0;
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
const resetQuery = throttle((formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	queryList();
}, 500);

// 选择重复件
const handleSelectionChange = (row: any) => {
	if (row) {
		state.tableRadio = row.id;
	}
};

// 关闭弹窗
const closeDialog = () => {
	dialogVisible.value = false;
};
// 选择模板
const onSubmit = () => {
	wfmodulesMatch({ code: state.rowCode, definitionId: state.tableRadio })
		.then(() => {
			ElMessage.success('操作成功');
			emit('updateList');
			dialogVisible.value = false;
		})
		.catch(() => {});
};

//暴漏变量和方法
defineExpose({ closeDialog, openDialog });
</script>
