<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>
