<template>
	<view class="earn-footer-body">
		<view class="my-link">
			<view class="my-link-label">{{ $t('earn.footer.myLink') }}:</view>
			<view class="my-link-content" :style="{ 'background': themeStore.theme.input.bgColor }">{{ props.url }}</view>
			<view class="coby-btn" :style="{ 'background': themeStore.theme.earn.gradientBtn }" @click.stop="copyText({ text: props.url })">{{$t('earn.footer.copy') }}</view>
		</view>
		<view class="share-btn" :style="{ 'background': themeStore.theme.button.normal, 'color': themeStore.theme.button.textNormal }" @click.stop="shareClick">
			<theme-image src="@/static/earn/share-icon.png" class="share-icon"></theme-image>
			<text :style="{ 'color': themeStore.theme.button.textNormal }">{{ $t('earn.footer.share') }}</text>
		</view>
	</view>
</template>

<script setup>
import { requestAppEventUpload } from '@/api/app.js';
import { useThemeStore } from '@/store/useThemeStore'
import { copyText, shareWithSystem } from '@/module/utils/system.js'

const themeStore = useThemeStore()

const props = defineProps({
	url: String
});

/**
 * 埋点按钮点击
 */
const shareClick = () => {
	requestAppEventUpload({
		logParam: '',
		logType: 1023
	})

	shareWithSystem({url: props.url});
};
</script>

<style lang="scss" scoped>
.earn-footer-body {
	width: 100%;
	height: 276rpx;
	box-sizing: border-box;
	padding-top: 20rpx;
	
	.my-link {
		width: 100%;
		display: flex;
		height: 76rpx;
		justify-content: space-between;
		box-sizing: border-box;
		align-items: center;
		padding: 0 32rpx;
		.my-link-label {
			font-size: 28rpx;
			line-height: 76rpx;
			flex-shrink: 0;
		}
		.my-link-content {
			flex: 1;
			margin: 0rpx 20rpx;
			height: 76rpx;
			border-radius: 20rpx;
			line-height: 76rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			box-sizing: border-box;
			padding: 0 16rpx;
			font-size: 20rpx;
		}
		.coby-btn {
			width: 130rpx;
			height: 70rpx;
			background: linear-gradient(0deg, #32b12f 0%, #10740b 100%);
			border-radius: 35rpx;
			line-height: 70rpx;
			color: #fff;
			font-size: 30rpx;
			text-align: center;
			line-height: 70rpx;
			flex-shrink: 0;
		}
	}
	.share-btn {
		width: 690rpx;
		height: 90rpx;
		background: linear-gradient(90deg, #f78b22, #e34e04);
		border-radius: 45rpx;
		margin: 0 auto;
		margin-top: 26rpx;
		text-align: center;
		font-size: 36rpx;
		color: #fff;
		line-height: 90rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		padding-left: 228rpx;
		.share-icon {
			margin-right: 40rpx;
			width: 53rpx;
			height: 54rpx;
		}
	}
}
</style>
