<template>
  <div class="cs-pop-game">
    <div class="cs-pop__titie">
      <h3>
        <img alt="" src="https://assets-store.itam.games/cs/icon-itam.svg" />
        <!-- game.introHead -->
        <span>{{$t('game.introHead')}}</span>
      </h3>
      <!-- game.introBody -->
      <p v-html="$t('game.introBody')"></p>
    </div>


    <div class="cs-pop__menu">
      <div class="select">
        <h4>
          <span>{{ selectGameName }}</span>
        </h4>
        <div class="select-list">
          <ul>
            <!-- game.selectGameList -->
            <li v-for="(item, key) in selectGameList" :key="key">
              <button type="button" class="btn js-selectBtn"
                      @click="selectGameMenu(item)">
                <span>{{ item['en'] }}</span>
              </button>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 자주 묻는 질문 -->
    <div class="cs-pop__faq" v-if="gameTabs === 'faq'">
      <h3 class="cs-title">
        <span class="ico">?</span>
        <!-- game.faq -->
        <span><b>{{$t('game.faq')}}</b></span>
      </h3>
      <div class="accordion">
        <ul>
          <!-- game.faqList -->
          <li v-for="(item, key) in faqList[selectGameId]"
              :class="{ on: faqOpenNum === key }"
              :key="key">
            <h4 class="q"
                @click="faqOpen(key)">
              <span class="ico">Q.</span>
              <span class="script" v-html="item.question"></span>
              <div class="plus">
                <span></span>
                <span></span>
              </div>
            </h4>
            <div class="answer">
              <p>
                <span class="ico">A</span>
                <span v-html="item.answer"></span>
              </p>
            </div>
          </li>
        </ul>
      </div>

      <br />

      <div class="btns">
        <button type="button" class="btn btn-warning js-qna"
                @click="tabGame('q')">
                <!-- game.oneOnOne -->
          <span>{{$t('game.oneOnOne')}}</span>
        </button>

        <div class="row">
          <div class="fL">
            <a href="" target="_blank" class="btn js-notice">
              <!-- game.notices -->
              <span>{{$t('game.notices')}}</span>
            </a>
          </div>
          <div class="fR">
            <a href="" target="_blank" class="btn js-event">
              <!-- game.events -->
              <span>{{$t('game.events')}}</span>
            </a>
          </div>
        </div>

      </div>

    </div><!--// 자주 묻는 질문 -->

    <!-- 1:1 문의하기 -->
    <div class="cs-pop__q" v-else-if="gameTabs === 'q'">
      <form>
        <div class="form-group">
          <!-- game.oneOnOneEmail -->
          <input type="text" ref="emailAsk" v-model="sendQuestionArray.email" :placeholder="$t('game.oneOnOneEmail')" />
        </div>
        <div class="form-group">
          <!-- game.oneOnOneContents -->
          <textarea  ref="contentsAsk" v-model="sendQuestionArray.contents" :placeholder="$t('game.oneOnOneContents')"></textarea>
        </div>

        <div class="file row">

          <div class="filebox">
          <!-- game.oneOnOneAttachFile -->
            <label for="ex_file">{{$t('game.oneOnOneAttachFile')}}</label>
            <input type="file" id="ex_file">
          </div>

          <!-- game.oneOnOneInstruction -->
          <div class="fR">
            {{$t('game.oneOnOneInstruction')}}
          </div>
        </div>


        <ul class="file-list">
          <li>
            <div>
          <!-- game.oneOnOneFileList<number> -->
              <span>{{$t('game.oneOnOneFileList1')}}</span>
              <button type="button" class="btn js-close">
                <span><i class="icon icon-close"></i></span>
              </button>
            </div>
          </li>
          <li>
            <div>
          <!-- game.oneOnOneFileList<number> -->
              <span>{{$t('game.oneOnOneFileList2')}}</span>
              <button type="button" class="btn js-close">
                <span><i class="icon icon-close"></i></span>
              </button>
            </div>
          </li>
        </ul>
          <!-- game.oneOnOneAgreement -->
        <p class="agreement">{{$t('game.oneOnOneAgreement')}}</p>

        <div class="btns">
          <div class="row">
            <div class="fL">
              <button type="button" class="btn js-send"
                      @click="send">
                      <!-- game.oneOnOneSend -->
                <span>{{$t('game.oneOnOneSend')}}</span>
              </button>
            </div>
            <div class="fR">
              <button type="button" class="btn js-back"
                      @click="tabGame('faq')">
          <!-- game.oneOnOneReturn -->
                <span>{{$t('game.oneOnOneReturn')}}</span>
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
    <!--// 1:1 문의하기 -->

    <!-- 발송중 -->
    <div class="cs-pop__send" v-else-if="gameTabs === 'send'">
      <!-- 전송중 -->
      <div class="transfer">
        <div class="v-box">
          <div class="photo"><img alt="ing" src="https://assets-store.itam.games/cs/transfer-ing.png" /></div>
          <h4>{{$t('common.sendingMessage')}}</h4>
        </div>
      </div>
      <!--// 전송중 -->

      <!-- 전송완료 -->
      <div class="transfer">
        <div class="v-box">
          <div class="photo"><img alt="ing" src="https://assets-store.itam.games/cs/transfer-ok.png" /></div>
          <h4>{{$t('common.sendingComplete')}}</h4>
        </div>

        <div class="btns">
          <button type="button" class="btn js-sendOk"
                  @click="tabGame('q')">
            <span>{{$t('common.confirm')}}</span>
          </button>
        </div>
      </div>
      <!--// 전송완료 -->

      <!-- 전송실패 -->
      <div class="transfer">
        <div class="v-box">
          <div class="photo"><img alt="ing" src="https://assets-store.itam.games/cs/transfer-error.png" /></div>
          <h4>{{$t('common.sendingFail')}}</h4>
          <p v-html="$t('common.sendingFailMessage')"></p>
        </div>

        <div class="btns double">
          <button type="button" class="btn js-sendOk">
            <span>{{$t('common.tryAgain')}}</span>
          </button>&nbsp;
          <button type="button" class="btn js-sendBack"
                  @click="tabGame('q')">
            <span>{{$t('common.goBack')}}</span>
          </button>
        </div>
      </div>
      <!--// 전송실패 -->

    </div><!--// 발송중 -->

  </div>
</template>

<script lang="ts">
import {Component, Vue, Prop} from 'vue-property-decorator';
import FAQ from '../../common/i18n/i18n.game-faq.json';
import { getObjectLocale } from '../../common/util/locale.util';
import i18n from '../../common/i18n/i18n.json';

@Component
export default class Game extends Vue {
  @Prop() readonly locale!: string;
  @Prop() readonly gameList!: any;
  faqOpenNum: any = null;
  gameTabs: string = 'faq';
  selectGameName: string = '';
  selectGameId: string = '';
  selectGameNowNum: number = 0;
  selectGameList: any = [];
  sendQuestionArray: any =  {
    type: 'q',
    email: '',
    contents: '',
  };
  faqList: any = [];


  $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 created() {
      this.setGameList();
      this.getFaqList(FAQ);
      this.selectGameId = this.selectGameList[0].id;
      this.selectGameName = this.selectGameList[this.selectGameNowNum]['en'];
    }
    /** faq */
      faqOpen(key: string) {
        this.faqOpenNum = (this.faqOpenNum === key) ? null : key;
      }
      /** 앱 아이디 게임 이름으로 변환 */
      setGameList() {
        const gameIds: any[] = Object.keys(this.gameList);

        for (let i = 0; i < gameIds.length; i++) {
          const eachGame = this.gameList[gameIds[i]];
          const gameInfoToSelectGameList = {
            num: i,
            ko: eachGame.appName,
            en: eachGame.appName,
            id: eachGame._id,
          };
          this.selectGameList.push(gameInfoToSelectGameList);
        }
      }
      /** faq 리스트 가져오기 */
      getFaqList(faqJson: any) {
        this.faqList = getObjectLocale(faqJson);
      }
      /** 게임 메뉴 선택 */
      selectGameMenu(item: any) {
        this.selectGameName = item['en'];
        this.selectGameNowNum = item.num;
        this.selectGameId = item.id;
      }
      /** 탭선택 */
      tabGame(tab: string) {
        this.gameTabs = tab;
      }
      /** 초기화 */
      clear() {
        this.sendQuestionArray.email = '';
        this.sendQuestionArray.contents = '';
      }
      /** 전송하기 */
      sendMsg() {
        this.gameTabs = 'send';

        this.clear();
      }

      /** 1:1 질문하기 */
      send() {
        const emailAsk = (this.$refs.emailAsk as HTMLElement);
        const contentsAsk = (this.$refs.contentsAsk as HTMLElement);
        // 무결성 검사
        if (this.sendQuestionArray.email.length === 0) {
          // '이메일 주소를 입력하세요'
          emailAsk.focus();
          return false;
        } else if (!(this.sendQuestionArray.email !== ''
          && this.sendQuestionArray.email !== 'undefined'
          && new RegExp(/^[a-zA-Z0-9\.\_\-]+@[a-zA-Z0-9]/).test(this.sendQuestionArray.email))) {
          // '이메일 주소 형식이 잘못 되었습니다.'
          emailAsk.focus();
          return false;
        } else if (this.sendQuestionArray.contents.length === 0) {
          // '내용을 입력하세요'
          contentsAsk.focus();
          return false;
        }

        this.sendMsg();
      }
}
</script>
