<template>
	<a-modal :title="titleMap[mode]" :open="visible" :width="500" :destroy-on-close="true" :footer="null"
		@cancel="handleCancel">
		<a-form :model="form" :rules="rules" :disabled="mode === 'show'" ref="dialogForm" :label-col="{ span: 5 }"
			:wrapper-col="{ span: 18 }">
			<a-form-item label="角色名称" name="name">
				<a-input v-model:value="form.name" placeholder="请输入角色名称" allow-clear></a-input>
			</a-form-item>
			<a-form-item label="角色编码" name="code">
				<a-input v-model:value="form.code" placeholder="请输入角色编码" allow-clear :disabled="mode === 'edit'"></a-input>
			</a-form-item>
			<a-form-item label="角色描述" name="description">
				<a-textarea v-model:value="form.description" placeholder="请输入角色描述" :rows="4" allow-clear></a-textarea>
			</a-form-item>
			<a-form-item label="排序" name="sort">
				<a-input-number v-model:value="form.sort" :min="0" :step="1" style="width: 100%" placeholder="请输入排序" />
			</a-form-item>
			<a-form-item label="状态" name="status">
				<a-switch v-model:checked="statusChecked" checked-children="启用" un-checked-children="禁用" />
			</a-form-item>
		</a-form>
		<template #footer>
			<a-button @click="handleCancel">取 消</a-button>
			<a-button v-if="mode !== 'show'" type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
		</template>
	</a-modal>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { message } from 'ant-design-vue'
import authApi from '@/api/auth'

const emit = defineEmits(['success', 'closed'])

const mode = ref('add')
const titleMap = {
	add: '新增角色',
	edit: '编辑角色',
	show: '查看角色'
}
const visible = ref(false)
const isSaveing = ref(false)

// 表单数据
const form = reactive({
	id: '',
	name: '',
	code: '',
	description: '',
	sort: 1,
	status: 1
})

// 状态开关计算属性
const statusChecked = computed({
	get: () => form.status === 1,
	set: (val) => {
		form.status = val ? 1 : 0
	}
})

// 表单引用
const dialogForm = ref()

// 验证规则
const rules = {
	name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
	code: [
		{ required: true, message: '请输入角色编码', trigger: 'blur' },
		{ pattern: /^[a-zA-Z0-9_]+$/, message: '角色编码只能包含字母、数字和下划线', trigger: 'blur' }
	],
	sort: [
		{ required: true, message: '请输入排序', trigger: 'change' },
		{ type: 'number', message: '排序必须为数字', trigger: 'change' }
	]
}

// 显示对话框
const open = (openMode = 'add') => {
	mode.value = openMode
	visible.value = true
	return {
		setData,
		open,
		close
	}
}

// 关闭对话框
const close = () => {
	visible.value = false
}

// 处理取消
const handleCancel = () => {
	emit('closed')
	visible.value = false
}

// 表单提交方法
const submit = async () => {
	try {
		await dialogForm.value.validate()
		isSaveing.value = true
		let res = {}
		if (mode.value === 'add') {
			res = await authApi.roles.add.post(form)
		} else {
			res = await authApi.roles.edit.put(form.id, form)
		}

		isSaveing.value = false
		if (res.code === 200) {
			emit('success', form, mode.value)
			visible.value = false
			message.success('操作成功')
		} else {
			message.error(res.message || '操作失败')
		}
	} catch (error) {
		console.error('表单验证失败', error)
		isSaveing.value = false
	}
}

// 表单注入数据
const setData = (data) => {
	form.id = data.id
	form.name = data.name
	form.code = data.code
	form.description = data.description || ''
	form.sort = data.sort
	form.status = data.status !== undefined ? data.status : 1
}

// 暴露方法给父组件
defineExpose({
	open,
	setData,
	close
})
</script>

<style></style>
