<template>
	<div class="invite">
		<div class="invite-title">
			{{ $t('common.moneyTips', {rate}) }}
		</div>
		<div
			class="invite-qrcode"
			ref="qrRef">
			<qrcode-vue
				:value="inviteLink"
				:size="$base.isMobile() ? 200 : 250"
				level="H" />
		</div>
		<div class="invite-link">
			{{ $t('common.inviteLink') }}:
			{{ inviteLink }}
		</div>
		<div class="invite-btns">
			<mf-button
				type="primary"
				size="large"
				@click="copyLink">
				{{ $t('common.copyLink') }}
			</mf-button>
			<mf-button
				type="primary"
				size="large"
				@click="saveQRCode">
				{{ $t('common.saveQRCode') }}
			</mf-button>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import QrcodeVue from 'qrcode.vue'

export default {
	data() {
		return {
			inviteLink: '',
			rate: ""
		}
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	components: {
		QrcodeVue
	},
	mounted() {
		this.inviteLink = `${location.origin}/index?inviteCode=${this.userInfo?.invitationCode}`
		this.getData();
	},
	methods: {
		getData() {
				this.$axios({
					url: 'api/user/getRebateConfig',
					method: "GET"
				}).then(res=> {
					this.rate = res.result
				})
		},
		copyLink() {
			this.$clipboard(this.inviteLink)
				.then((_) => {
					this.$message.success(this.$t('common.copySuccessfully'))
				})
				.catch((_) => {})
		},
		saveQRCode() {
			const canvas = this.$refs.qrRef.querySelector('canvas')
			if (!canvas) {
				console.error('canvas not found')
				return
			}
			const url = canvas.toDataURL('image/png')
			const a = document.createElement('a')
			a.href = url
			a.download = 'qrcode.png'
			a.click()
		}
	}
}
</script>

<style lang="less" scoped>
.invite {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
	padding: 0 20px;

	&-title {
		color: #fff;
		font-size: 24px;
		text-align: center;
	}

	&-link {
		font-size: 20px;
		color: #fff;
		margin-top: 40px;
		text-align: center;
	}

	&-qrcode {
		margin-top: 40px;
	}

	&-btns {
		margin-top: 40px;
		.mf-button {
			width: 200px;
			margin: 0 10px;
			border-radius: 10px;
		}
	}
}

@media (max-width: 576px) {
	.invite {
		&-title {
			font-size: 18px;
		}

		&-link {
			font-size: 16px;
		}

		&-btns {
			display: flex;
			align-items: center;
			flex-direction: column;

			.mf-button {
				margin-bottom: 20px;
			}
		}
	}
}
</style>
