<template>
	<div class="password-tip">
		<div>
			<el-icon>
				<CloseBold v-if="validateLength(value)" />
				<Select v-else />
			</el-icon>
			<span>{{ $t('Login.passwordLengthError', { min: 6, max: 20 }) }}</span>
		</div>
		<div>
			<el-icon>
				<CloseBold v-if="validateSpecial(value)" />
				<Select v-else />
			</el-icon>
			<span>{{ $t('Login.passwordSpecial') }}</span>
		</div>
		<div>
			<el-icon>
				<CloseBold v-if="validateCase(value)" />
				<Select v-else />
			</el-icon>
			<span>{{ $t('Login.passwordCase') }}</span>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, reactive, ref } from 'vue'
	import { Select, CloseBold } from '@element-plus/icons-vue'
	import { validateLength, validateSpecial, validateCase } from './tools'
	const props = defineProps({
		value: {
			type: String,
			default: ''
		}
	})
</script>

<style lang="less" scoped>
	.password-tip {
		background: #404040;
		color: #fff;
		font-size: 1.4rem;
		padding: 2rem;
		border-radius: 2rem;
		line-height: normal;

		> div {
			display: flex;
			align-items: center;
			margin-bottom: 0.5rem;
			&:last-child {
				margin-bottom: 0;
			}
			> .el-icon {
				margin-right: 1rem;
			}
		}
	}
</style>
