<template>
  <NormalPopup
    ref="popupRef"
  >
    <view class="ft18 ptb30">
      {{ $t('earn.home.commissionTable') }}
    </view>
    <view class="activity-award-content-item">
      <view class="depoist-amoout">
        {{ $t('earn.home.tableTitle1') }}
      </view>
      <view class="depoist-amoout">
        {{ $t('earn.home.tableTitle2') }}
      </view>
      <view class="reward-amoout">
        {{ $t('earn.home.tableTitle3') }}
      </view>
    </view>
    <view class="list-view">
      <view
        class="activity-award-content-item"
        v-for="(item, index) in pageData.rulesList"
        :style="{ 'background': themeStore.theme.list.listBgColor }"
      >
        <view class="depoist-amoout">
          {{ item.level }}
        </view>
        <view class="depoist-amoout">
          <{{ $formatThousandDot(item.betAmount, 0) }}
        </view>
        <view class="reward-amoout">
          {{ $formatFloat(item.rebateRatio * 100, 2) }}%
        </view>
      </view>
    </view>
  </NormalPopup>
</template>

<script setup>
  import { usePromoStore } from '@/store/usePromoStore'
	import { useAppStore } from '@/store/useAppStore'
	import { useThemeStore } from '@/store/useThemeStore'
	import { onMounted, reactive, ref } from 'vue'
	import NormalPopup from '@/components/popup/NormalPopup.vue'
  import { getAgentV2LevelConfig } from '@/api/earn.js'

  const promoStore = usePromoStore()
	const appStore = useAppStore()
	const themeStore = useThemeStore()

  const popupRef = ref(null)
  const pageData = reactive({
		rulesList: []
	})

	onMounted(() => {
		loadData()
	})

	const loadData = async () => {
		const { code, data } = await getAgentV2LevelConfig()
		if (code == 200) {
			pageData.rulesList = data
		}
	}

  const show = () => {
    popupRef.value.show()
	}
	
  defineExpose({
		show
	})
</script>

<style lang="scss" scoped>
  .list-view {
    width: 100%;
    height: 1000rpx;
    overflow-y: scroll;
  }

  .activity-award-content-item {
    width: 100%;
    margin-bottom: 10rpx;
    border-radius: 20rpx;
    display: flex;
    height: 62rpx;
    justify-content: flex-start;
    text-align: center;
    line-height: 62rpx;

    .depoist-amoout {
      width: 32%;
      font-size: 24rpx;
      color: #ffffff;
    }
    .reward-amoout {
      width: 32%;
      font-size: 24rpx;
      color: #f8eb59;
    }
  }
</style>