<template>
	<div class="pic-captcha" @click="refresh">
		<div v-if="svg" class="svg" v-html="svg" />
		<img v-else-if="base64" class="base64" :src="base64" alt="" />

		<template v-else>
			<el-icon class="is-loading" :size="18">
				<loading />
			</el-icon>
		</template>
	</div>
</template>

<script lang="ts" setup>
defineOptions({
	name: 'pic-captcha'
});

import { onMounted, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import { Loading } from '@element-plus/icons-vue';
import { useCool } from '/@/cool';
import { useI18n } from 'vue-i18n';

const emit = defineEmits(['update:modelValue', 'change']);

const { service } = useCool();
const { t } = useI18n();

// base64
const base64 = ref('');

// svg
const svg = ref('');

// 刷新
async function refresh() {
	svg.value = '';
	base64.value = '';

	await service.base.open
		.captcha({
			height: 45,
			width: 150,
			color: '#c8d4f0'
		})
		.then(({ captchaId, data }) => {
			if (data) {
				if (data.includes(';base64,')) {
					base64.value = data;
				} else {
					svg.value = data;
				}

				emit('update:modelValue', captchaId);
				emit('change', {
					base64,
					svg,
					captchaId
				});
			} else {
				ElMessageBox.alert(t('验证码获取失败'), {
					title: t('提示'),
					type: 'error'
				});
			}
		})
		.catch(err => {
			ElMessageBox.alert(err.message, {
				title: t('提示'),
				type: 'error'
			});
		});
}

onMounted(() => {
	refresh();
});

defineExpose({
	refresh
});
</script>

<style lang="scss" scoped>
.pic-captcha {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	height: 45px;
	width: 150px;
	position: relative;
	user-select: none;

	.svg {
		height: 100%;
		position: relative;
	}

	.base64 {
		height: 100%;
	}

	.is-loading {
		position: absolute;
		right: 15px;
	}
}
</style>
