<template>
  <p class="retailRateTop">
    <a :class="{'on': selectType === 'casino'}" @click="selectType = 'casino'">{{$t('front.gnb.livecasino')}}</a>
    <a :class="{'on': selectType === 'slot'}" @click="selectType = 'slot'">{{$t('front.gnb.slot')}}</a>
  </p>
  <div class="retailRateList" v-if="selectType === 'casino'">
    <ul>
      <li v-for="item in rate.casino" v-bind:key="item.gameType">
        <img src="@/assets_mobile/img/icon_rate_on.svg" alt="">{{item.codeName}}
      </li>
    </ul>
    <ul>
      <li v-for="item in rate.casino" v-bind:key="item.gameType">
        {{item.pointRate}}%<img src="@/assets_mobile/img/ratem.svg" alt=""><!-- ratet ratem rateb -->
      </li>
    </ul>
  </div><!-- 라이브카지노 -->

  <div class="retailRateList" v-if="selectType === 'slot'">
    <ul>
      <li v-for="item in rate.slot" v-bind:key="item.gameType">
        <img src="@/assets_mobile/img/icon_rate_on.svg" alt="">{{item.codeName}}
      </li>
    </ul>
    <ul>
      <li v-for="item in rate.slot" v-bind:key="item.gameType">
        {{item.pointRate}}%<img src="@/assets_mobile/img/ratet.svg" alt=""><!-- ratet ratem rateb -->
      </li>
    </ul>
  </div><!-- 슬롯 -->

  <!--div class="board">
    <ul class="boardstr">
      <li>미니게임</li>
      <li v-for="item in rate.casino" v-bind:key="item.gameType">
        {{item.codeName}}
      </li>
      <li v-for="item in rate.slot" v-bind:key="item.gameType">
        {{item.codeName}}
      </li>
      <li v-for="item in rate.fishing" v-bind:key="item.gameType">
        {{item.codeName}}
      </li>
      <li v-for="item in rate.kiron" v-bind:key="item.gameType">
        {{item.codeName}}
      </li>
    </ul>
    <ul class="boardstr">
      <li>{{rate.minigame[0].pointRate}}%</li>
      <li v-for="item in rate.casino" v-bind:key="item.gameType">
        {{item.pointRate}}%
      </li>
      <li v-for="item in rate.slot" v-bind:key="item.gameType">
        {{item.pointRate}}%
      </li>
      <li v-for="item in rate.fishing" v-bind:key="item.gameType">
        {{item.pointRate}}%
      </li>
      <li v-for="item in rate.kiron" v-bind:key="item.gameType">
        {{item.pointRate}}%
      </li>
    </ul>
  </div-->
</template>

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

<style scoped>
.retailRateTop {display: flex;}
.retailRateTop a {width: 100%;background: #fafafa;font-size: 15px;color: #bebebe;height: 44px;display: flex;align-items: center;justify-content: center;}
.retailRateTop a:first-child {border-right: 1px solid;border-image: linear-gradient(to bottom, #707070, #fafafa);border-image-slice: 1;}
.retailRateTop a.on {background: #fff;color: #000;}
.retailRateList {margin: 25px;font-size: 13px;display: flex;justify-content: space-between;align-items: center;}
.retailRateList ul li {margin-bottom: 20px;}
.retailRateList ul:first-child img {margin: 0 13px 0 0;}
.retailRateList ul img {margin-left: 17px;}
.retailRateList img {vertical-align: middle;}
</style>
<style scoped src="@/styles_mobile/subcommon.css"></style>
<style scoped src="@/styles_mobile/common.css"></style>
