<template>
  <template v-if="rate.casino">
    <h4 class="rollname">{{$t('front.gnb.casino')}}</h4>
    <div class="board mb60">
      <ul class="boardstr">
        <li v-for="item in rate.casino" v-bind:key="item.gameType">
          <template v-if="$i18n.locale === 'ko'">{{item.codeName}}</template>
          <template v-if="$i18n.locale === 'en'">{{item.codeNameEN}}</template>
        </li>
      </ul>
      <ul class="boardstr">
        <li v-for="item in rate.casino" v-bind:key="item.gameType">
          {{item.pointRate}}%
        </li>
      </ul>
    </div>
  </template>

  <template v-if="rate.slot">
    <h4 class="rollname">{{$t('front.gnb.slot')}}</h4>
    <div class="board mb60">
      <ul class="boardstr">
        <li v-for="item in rate.slot" v-bind:key="item.gameType">
          <template v-if="$i18n.locale === 'ko'">{{item.codeName}}</template>
          <template v-if="$i18n.locale === 'en'">{{item.codeNameEN}}</template>
        </li>
      </ul>
      <ul class="boardstr">
        <li v-for="item in rate.slot" v-bind:key="item.gameType">
          {{item.pointRate}}%
        </li>
      </ul>
    </div>
  </template>

  <template v-if="rate.sport">
    <h4 class="rollname">{{$t('front.gnb.sport')}}</h4>
    <div class="board mb60">
      <ul class="boardstr">
        <li v-for="item in rate.sport" v-bind:key="item.gameType">
          <template v-if="$i18n.locale === 'ko'">{{item.codeName}}</template>
          <template v-if="$i18n.locale === 'en'">{{item.codeNameEN}}</template>
        </li>
      </ul>
      <ul class="boardstr">
        <li v-for="item in rate.sport" v-bind:key="item.gameType">
          {{item.pointRate}}%
        </li>
      </ul>
    </div>
  </template>

  <template v-if="rate.minigame">
    <h4 class="rollname">{{$t('front.gnb.minigame')}}</h4>
    <div class="board mb60">
      <ul class="boardstr">
        <li v-for="item in rate.minigame" v-bind:key="item.gameType">
          <template v-if="$i18n.locale === 'ko'">{{item.codeName}}</template>
          <template v-if="$i18n.locale === 'en'">{{item.codeNameEN}}</template>
        </li>
      </ul>
      <ul class="boardstr">
        <li v-for="item in rate.minigame" v-bind:key="item.gameType">
          {{item.pointRate}}%
        </li>
      </ul>
    </div>
  </template>

</template>

<script>
export default {
  name: 'retailRate',
  props: {
    rate: {
      type: Object,
      default: null,
      required: true
    }
  },
  created () {
    console.log(this.rate)
  }
}
</script>

<style scoped>
.nonebtn {background: none !important;border: 0 !important;width: auto !important;}
.rollname {font-size: 16px;color: #000;margin-bottom: 18px;}
.close {position: absolute;right: 15px;top: 15px;}
.board {box-shadow: 0 6px 6px 0 rgb(0 0 0 / 20%);border-radius: 10px;}
.boardstrin .rollname {margin-top: 30px;}
.board.even .boardstr {background: #f8f9fb;}
</style>
<style scoped src="@/styles/common.css"></style>
<style scoped src="@/styles/subcommon.css"></style>
