<template>
	<NavBar />
	<view class="container">
		<view class="swiper">
			<HomeSwiper :position="1" />
		</view>
		<view class="title">
			<PageTitle :title="$t('menu.partner')" />
		</view>
		<view class="sizeList">
			<view class="sizeCard" v-for="(imgUrl, index) in materialImgs" :key="imgUrl">
				<view class="sizeName">{{ $t('partner.promotionLink.size') }}{{ index + 1 }}</view>
				<image :src="imgUrl" mode="aspectFit" class="sizeImg"></image>
				<view class="btnWrapper">
					<button class="primaryButton download" @click="() => downLoadImage(imgUrl)">
						<image src="/static/partner/download.png" mode="aspectFit" style="width: 16px; height: 16px"></image>
						{{ $t('common.download') }}
					</button>
				</view>
			</view>
		</view>
		<view v-if="!materialImgs.length" style="display: flex; justify-content: center; align-items: center; width: 100%">
			<image src="/static/empty.png" mode="aspectFit" style="width: 200px; height: 200px"></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			materialImgs: []
		};
	},
	methods: {
		downLoadImage(imgUrl) {
			uni.saveImageToPhotosAlbum({
				filePath: imgUrl,
				success: () => {
					uni.showToast({
						icon: 'success',
						title: this.$t('common.success.saveDone'),
					});
				},
				fail() {
					uni.showToast({
						icon: 'none',
						title: this.$t('common.success.saveFail')
					});
				}
			});
		}
	},
	onLoad(params) {
		if (params.imgUrl) {
			this.materialImgs = params.imgUrl?.split(',');
		}
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
