<template>
	<div class="cid-field-container">
		<el-card shadow="hover">
			<div class="system-user-search mb15">
				<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
					<el-form-item label="关键字" prop="keyword">
						<el-input
							v-model="tableData.param.keyword"
							placeholder="请输入字段名称"
							clearable
							size="default"
							style="width: 240px"
							@keyup.enter.native="getList"
						/>
					</el-form-item>
					<el-form-item>
						<el-button size="default" type="primary" @click="getList">
							<el-icon><ele-Search /></el-icon>
							查询
						</el-button>
						<el-button size="default" @click="resetQuery(queryRef)">
							<el-icon><ele-Refresh /></el-icon>
							重置
						</el-button>
						<el-button size="default" type="success" @click="onOpenAdd">
							<el-icon><ele-FolderAdd /></el-icon>
							新增映射
						</el-button>
						<el-button size="default" type="danger" @click="onRowDel(null)">
							<el-icon><ele-Delete /></el-icon>
							删除
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column prop="sourceField" label="源字段" show-overflow-tooltip />
				<el-table-column prop="targetField" label="目标字段" show-overflow-tooltip />
				<el-table-column prop="datasourceName" label="所属平台" show-overflow-tooltip />
				<el-table-column prop="apiName" label="所属接口" show-overflow-tooltip />
				<el-table-column prop="description" label="描述" show-overflow-tooltip />
				<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip />
				<el-table-column label="操作" width="180">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">修改</el-button>
						<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination
				v-show="tableData.total > 0"
				:total="tableData.total"
				v-model:page="tableData.param.pageNum"
				v-model:limit="tableData.param.pageSize"
				@pagination="getList"
			/>
		</el-card>

		<!-- 新增/编辑弹窗 -->
		<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" :close-on-click-modal="false">
			<el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
				<el-form-item label="源字段" prop="sourceField">
					<el-input v-model="form.sourceField" placeholder="请输入源字段名" />
				</el-form-item>
				<el-form-item label="目标字段" prop="targetField">
					<el-input v-model="form.targetField" placeholder="请输入目标字段名" />
				</el-form-item>
				<el-form-item label="所属平台" prop="datasourceId">
					<el-input v-model="form.datasourceId" placeholder="请输入所属平台ID" />
				</el-form-item>
				<el-form-item label="所属接口" prop="apiId">
					<el-input v-model="form.apiId" placeholder="请输入所属接口ID" />
				</el-form-item>
				<el-form-item label="描述" prop="description">
					<el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入描述" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialog.visible = false">取消</el-button>
				<el-button type="primary" @click="onSubmit" :loading="dialog.saving">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
export default { name: 'cidField' };
</script>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';

const queryRef = ref<FormInstance>();
const formRef = ref<FormInstance>();
const ids = ref<string[]>([]);

const tableData = reactive({
	data: [] as any[],
	total: 0,
	param: {
		pageNum: 1,
		pageSize: 10,
		keyword: '',
	},
});

const dialog = reactive({
	visible: false,
	title: '',
	saving: false,
});

const form = reactive({
	id: '',
	sourceField: '',
	targetField: '',
	datasourceId: '',
	apiId: '',
	description: '',
});

const rules = {
	sourceField: [{ required: true, message: '请输入源字段名', trigger: 'blur' }],
	targetField: [{ required: true, message: '请输入目标字段名', trigger: 'blur' }],
};

const getList = () => {
	// TODO: 调用列表接口
};

const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	getList();
};

const handleSelectionChange = (selection: any[]) => {
	ids.value = selection.map((item) => item.id);
};

const onOpenAdd = () => {
	dialog.title = '新增字典映射';
	dialog.visible = true;
	form.id = '';
	form.sourceField = '';
	form.targetField = '';
	form.datasourceId = '';
	form.apiId = '';
	form.description = '';
};

const onOpenEdit = (row: any) => {
	dialog.title = '修改字典映射';
	dialog.visible = true;
	form.id = row.id;
	form.sourceField = row.sourceField;
	form.targetField = row.targetField;
	form.datasourceId = row.datasourceId;
	form.apiId = row.apiId;
	form.description = row.description;
};

const onSubmit = () => {
	if (!formRef.value) return;
	formRef.value.validate((valid) => {
		if (!valid) return;
		dialog.saving = true;
		// TODO: 调用新增/编辑接口
		dialog.saving = false;
		dialog.visible = false;
		getList();
	});
};

const onRowDel = (row: any) => {
	const delIds = row ? [row.id] : ids.value;
	if (delIds.length === 0) {
		ElMessage.error('请选择要删除的数据');
		return;
	}
	ElMessageBox.confirm(`确定要删除选中的字典映射吗？`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			// TODO: 调用删除接口
			ElMessage.success('删除成功');
			getList();
		})
		.catch(() => {});
};

onMounted(() => {
	getList();
});
</script>
