<template>
	<view class="award-list-container">
		<view class="activity-award-content-item" :style="{ 'background': themeStore.theme.list.headerBgColor }">
			<view class="depoist-amoout">
				{{ title1 }}
			</view>
			<view class="reward-amoout">
				{{ title2 }}
			</view>
		</view>
		<view
			class="activity-award-content-item"
			v-for="(item, index) in list"
			:style="{ 'background': themeStore.theme.list.listBgColor }"
		>
			<view class="depoist-amoout">
				{{ item[key1] }}
			</view>
			<view class="reward-amoout">
				{{ $formatThousandDot(item[key2], 0) }}
			</view>
		</view>
	</view>
</template>

<script setup>
	import { useThemeStore } from '@/store/useThemeStore'
	
	const themeStore = useThemeStore()
	
	const props = defineProps({
		title1: {
			type: String,
			default: ''
		},
		title2: {
			type: String,
			default: ''
		},
		key1: {
			type: String,
			default: ''
		},
		key2: {
			type: String,
			default: ''
		},
		list: {
			type: Array,  // [{ title }]
			default: () => []
		},
	})
</script>

<style lang="scss" scoped>
	.award-list-container {
	  width: 100%;
	  box-sizing: border-box;
	  padding: 0 0rpx;
		
	  .activity-award-content-item {
	    width: 100%;
	    margin-bottom: 10rpx;
	    background: #8d120e;
	    border-radius: 20rpx;
	    display: flex;
	    height: 62rpx;
	    justify-content: flex-start;
	    text-align: center;
	    line-height: 62rpx;
	    .depoist-amoout {
	      width: 50%;
	      font-size: 28rpx;
	      color: #ffffff;
	    }
	    .reward-amoout {
	      width: 50%;
	      font-size: 28rpx;
	      color: #f8eb59;
	    }
	  }
	}
</style>