<template>
  <div class="cs"
      :class="{ on:isOpenCS }">
    <button type="button" class="btn js-openCs"
            @click="isOpenCS = !isOpenCS">
      <span v-if="!isOpenCS"><img alt="Open CS" src="https://assets-store.itam.games/cs/floating-cs.png" /></span>
      <span v-else><img alt="Open CS" src="https://assets-store.itam.games/cs/floating-cs-on.png" /></span>
    </button>

    <transition name="bounce">
      <div class="cs-pop" v-if="isOpenCS">
        <div class="cs-pop__wrap">
          <div class="cs-pop__tab">
            <button type="button" class="btn js-tab"
                    :class="{ on: isTab }"
                    @click="isTab = true">
                    <!-- header.titleService -->
              <span>{{$t('header.titleService')}}</span>
            </button>
            <button type="button" class="btn js-tab"
                    :class="{ on: !isTab }"
                    @click="isTab = false">
                    <!-- header.titleGame -->
              <span>{{$t('header.titleGame')}}</span>
            </button>
          </div>

          <transition name="fade">
            <!-- 서비스 문의 -->
            <service  v-if="isTab" :locale="locale"/>
            <!--// 서비스 문의 -->

            <!-- 게임 문의 -->
            <game v-else :gameList="gameListProp" :locale="locale"/>
            <!--// 게임 문의 -->
          </transition>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import service from './sub-components/itam-service.component.vue';
import game from './sub-components/game-service.component.vue';
import { CsAxiosService } from '../service/cs-axios.service';
import i18n from '../common/i18n/i18n.json';


@Component({
    components: {
      service,
      game,
    },
})
export default class Cs extends Vue {
  @Prop({default: 'en'}) readonly locale !: any;
  isTab: boolean = true;
  isOpenCS: boolean = false;
  gameListProp: any = {};

  // created() {
  //   this.$i18n.locale = this.processLocale(this.locale);
  // }

  $t(path: string) {
    const keys: string[] = path.split('.');
    let value: any = i18n[this.locale];

    for (let i = 0; i < keys.length; ++i) {
        value = value[keys[i]];
    }

    return value;
  }

  async mounted() {
    this.gameListProp = await this.getGameList();
  }

  async getGameList() {
    const list: any = await CsAxiosService.Instance.get('get-game-list');
    const gameList: any = {};
    list.forEach((item: any) => gameList[item._id] = item);
    return gameList;
  }

  processLocale(locale: string) {
    switch (locale) {
      case 'hans':
      case 'hant':
      case 'cn':
        return 'cn';
      case 'ko':
      case 'en':
        return locale;
      default:
        return 'en';
    }
  }

}
</script>

<style lang="scss">
  @import "../assets/scss/app";
  @import "../assets/scss/icons/style.css";
</style>