<template>
	<a-list :data-source="securityList" item-layout="horizontal">
		<template #renderItem="{ item }">
			<a-list-item>
				<a-list-item-meta>
					<template #title>
						{{ item.title }}
					</template>
					<template #description>
						{{ item.description }}
					</template>
				</a-list-item-meta>
				<template #actions>
					<a-button
						type="primary"
						size="small"
						@click="handleAction(item.action)"
					>
						{{ item.buttonText }}
					</a-button>
				</template>
			</a-list-item>
		</template>
	</a-list>
</template>

<script setup>
import { ref } from "vue";
import { message } from "ant-design-vue";

const emit = defineEmits(["change-password"]);

const securityList = ref([
	{
		title: "登录密码",
		description: "用于登录系统的密码，建议定期更换",
		buttonText: "修改",
		action: "password",
	},
	{
		title: "手机验证",
		description: "用于接收重要通知和安全验证",
		buttonText: "已绑定",
		action: "phone",
	},
	{
		title: "邮箱验证",
		description: "用于接收重要通知和账号找回",
		buttonText: "已绑定",
		action: "email",
	},
	{
		title: "登录设备",
		description: "查看和管理已登录的设备",
		buttonText: "查看",
		action: "device",
	},
]);

const handleAction = (action) => {
	switch (action) {
		case "password":
			emit("change-password");
			break;
		case "phone":
			message.info("手机绑定功能开发中");
			break;
		case "email":
			message.info("邮箱绑定功能开发中");
			break;
		case "device":
			message.info("登录设备管理功能开发中");
			break;
		default:
			break;
	}
};
</script>

<style scoped lang="scss">
:deep(.ant-list-item) {
	padding: 20px 0;
	border-bottom: 1px solid #f0f0f0;
}

:deep(.ant-list-item:last-child) {
	border-bottom: none;
}
</style>
