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

    <div class="cs-pop__link">
      <a href="" class="btn js-guideHelp">
        <!-- common.guide -->
        <span>{{$t('common.guide')}}</span>
        <span><i class="icon icon-arrow-up-right2"></i></span>
      </a>
    </div>

    <div class="cs-pop__menu">
      <h3 class="cs-title">
        <span class="ico">?</span>
        <!-- service.selectHeader -->
        <span>{{$t('service.selectHeader')}}</span>
      </h3>
      <div class="select">
        <h4>
          <!-- service.selectServiceList<number> -->
          <span>{{$t(`service.selectServiceList${selectNowNum}`)}}</span>
        </h4>
        <div class="select-list">
          <ul>
            <li>
              <button type="button" class="btn js-selectBtn"
                      @click="selectMenu(0)">
                <span>{{$t('service.selectServiceList0')}}</span>
              </button>
            </li>
            <li>
              <button type="button" class="btn js-selectBtn"
                      @click="selectMenu(1)">
                <span>{{$t('service.selectServiceList1')}}</span>
              </button>
            </li>
            <li>
              <button type="button" class="btn js-selectBtn"
                      @click="selectMenu(2)">
                <span>{{$t('service.selectServiceList2')}}</span>
              </button>
            </li>
            <li>
              <button type="button" class="btn js-selectBtn"
                      @click="selectMenu(3)">
                <span>{{$t('service.selectServiceList3')}}</span>
              </button>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div :id="0" class="cs-pop__default" v-show="isService1">
      <div class="cs-block">
        <img alt="ITAM Store beta" src="https://assets-store.itam.games/cs/cs-store.png" />
      </div>
    </div>

    <!-- 서비스 이용 문의 -->
    <div :id="1" class="cs-pop__ask" v-show="isService2">
      <form>
        <div class="form-group">
          <!-- service.serviceQuestionEmail -->
          <input type="text" ref="emailAsk" v-model="sendAskArray.email" :placeholder="$t('service.serviceQuestionEmail')" />
        </div>
        <div class="form-group">
          <!-- service.serviceQuestionSubject -->
          <input type="text" ref="subjectAsk" v-model="sendAskArray.subject" :placeholder="$t('service.serviceQuestionSubject')" />
        </div>
        <div class="form-group">
          <!-- service.serviceQuestionContent -->
          <textarea  ref="contentsAsk" v-model="sendAskArray.contents" :placeholder="$t('service.serviceQuestionContents')"></textarea>
        </div>

          <!-- service.serviceQuestionAgreement -->
        <p class="agreement">{{$t('service.serviceQuestionAgreement')}}</p>

        <button type="button" class="btn js-send"
                @click="sendAsk">
          <!-- service.serviceQuestionSend -->
          <span>{{$t('service.serviceQuestionSend')}}</span>
        </button>
      </form>
    </div><!--// 서비스 이용 문의 -->

    <!-- 자주 묻는 질문 -->
    <div class="cs-pop__faq" v-show="isService3">
      <div class="accordion">
        <ul>
          <li v-for="(item, key) in faqList.faq.list"
              :class="{ on: faqOpenNum === key }"
              :key="key">
            <h4 class="q"
                @click="faqOpen(key)">
              <span class="ico">Q.</span>
              <span class="script" v-html="item.q"></span>
              <div class="plus">
                <span></span>
                <span></span>
              </div>
            </h4>
            <div class="answer">
              <p>
                <span class="ico">A</span>
                <span v-html="item.a"></span>
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div><!--// 자주 묻는 질문 -->

    <!-- 버그 신고 제보 -->
    <div class="cs-pop__bug" v-show="isService4">
      <form>
        <div class="form-group">
          <!-- service.bugReportEmail -->
          <input type="text" ref="emailBug" v-model="sendBugArray.email" :placeholder="$t('service.bugReportEmail')" />
        </div>
        <div class="form-group">
          <!-- service.bugReportAccount -->
          <input type="text" ref="accountBug" v-model="sendBugArray.account" :placeholder="$t('service.bugReportAccount')" />
        </div>
        <div class="form-group">
          <!-- service.bugReportNationality -->
          <input type="text" ref="countryBug" v-model="sendBugArray.country" :placeholder="$t('service.bugReportNationality')" />
        </div>
        <div class="form-group">
          <!-- service.bugReportMachine -->
          <input type="text" ref="machineBug" v-model="sendBugArray.machine" :placeholder="$t('service.bugReportMachine')" />
        </div>
        <div class="form-group">
          <!-- service.bugReportSubject -->
          <input type="text" ref="subjectBug" v-model="sendBugArray.subject" :placeholder="$t('service.bugReportSubject')" />
        </div>
        <div class="form-group">
          <!-- service.bugReportContents -->
          <textarea ref="contentsBug" v-model="sendBugArray.contents" :placeholder="$t('service.bugReportContents')"></textarea>
        </div>

          <!-- service.bugReportAgreement -->
        <p class="agreement">{{$t('service.bugReportAgreement')}}</p>

          <!-- service.bugReportSend -->
        <button type="button" class="btn js-send"
                @click="sendBug">
          <span>{{$t('service.bugReportSend')}}</span>
        </button>
      </form>
    </div><!--// 버그 신고 제보 -->

    <!-- 발송중 -->
    <div :key="3" class="cs-pop__send" v-if="selectNowNum === 4">
      <!-- 전송중 -->
      <div class="transfer">
        <div class="v-box">
          <div class="photo"><img alt="ing" src="https://assets-store.itam.games/cs/transfer-ing.png" /></div>
          <!-- common.sendingMessage -->
          <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>
          <!-- common.sendingComplete -->
          <h4>{{$t('common.sendingComplete')}}</h4>
        </div>

        <div class="btns">
          <button type="button" class="btn js-sendOk">
          <!-- common.confirm -->
            <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>
          <!-- common.sendingFail -->
          <h4>{{$t('common.sendingFail')}}</h4>
          <!-- common.sendingFailMesssage -->
          <p>{{$t('common.sendingFailMessage')}}</p>
        </div>

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

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

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

@Component
export default class Service extends Vue {
  @Prop() readonly locale!: string;
  faqOpenNum: any = null;
  selectNowNum: number = 0;
  selectServiceList: any = [];
  sendMsgArray: any = {};
  sendAskArray: any = {
    type: 'ask',
    email: '',
    subject: '',
    contents: '',
  };
  sendBugArray: any = {
    type: 'bug',
    email: '',
    account: '',
    country: '',
    machine: '',
    subject: '',
    contents: '',
  };
  isService1: boolean = true;
  isService2: boolean = false;
  isService3: boolean = false;
  isService4: boolean = false;
  faqList: any = [];
  $refs!: {
    emailBug: HTMLInputElement,
    accountBug: HTMLInputElement,
    countryBug: HTMLInputElement,
    machineBug: HTMLInputElement,
    subjectBug: HTMLInputElement,
    contentsBug: HTMLInputElement,
    emailAsk: HTMLElement,
    subjectAsk: HTMLElement,
    contentsAsk: HTMLElement,
  };

  $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;
  }

  created() {
    this.getFaq(FAQ);
  }

  /** 초기화 */
  clearArray(object: any) {
    let i = 0;
    const props = Object.getOwnPropertyNames(object);
    const len = props.length;
    for (i; i < len; i++) {
      object[props[i]] = '';
    }
  }

  /** FAQ 리스트 가져오기 */
  getFaq(faqJson: any) {
    this.faqList = getObjectLocale(faqJson);
  }
  /** 서비스 문의 : 이용문의 탭
   * @param num
   */
  async selectMenu(index: number) {
    // 서비스 이용문의 초기화
    this.sendMsgArray = {};
    this.clearArray(this.sendAskArray);
    this.clearArray(this.sendBugArray);
    this.selectNowNum = index;
  }

  @Watch('selectNowNum')
  toggleServiceContent() {
    this.isService1 = this.selectNowNum === 0;
    this.isService2 = this.selectNowNum === 1;
    this.isService3 = this.selectNowNum === 2;
    this.isService4 = this.selectNowNum === 3;
  }
  /** 전송하기 */
  sendMsg(Obj: any) {
    this.sendMsgArray = Obj;
    this.selectNowNum = 4;
  }
  /** 서비스 이용 문의 */
  sendAsk() {
    // 무결성 검사
    if (this.sendAskArray.email.length === 0) {
      // '이메일 주소를 입력하세요'
      this.$refs.emailAsk.focus();
      return false;
    } else if (!(this.sendAskArray.email !== ''
      && this.sendAskArray.email !== 'undefined'
      && new RegExp(/^[a-zA-Z0-9\.\_\-]+@[a-zA-Z0-9]/).test(this.sendAskArray.email))) {
      // '이메일 주소 형식이 잘못 되었습니다.'
      this.$refs.emailAsk.focus();
      return false;
    } else if (this.sendAskArray.subject.length === 0) {
      // '제목을 입력하세요'
      this.$refs.subjectAsk.focus();
      return false;
    } else if (this.sendAskArray.contents.length === 0) {
      // '내용을 입력하세요'
      this.$refs.contentsAsk.focus();
      return false;
    }

    this.sendAskArray.type = 'ask'; // 초기화되어버린 타입 재설정
    this.sendMsg(this.sendAskArray);
  }
  /** 버그 문의 */
  sendBug() {
    const msg = '';

    // 무결성 검사
    if (this.sendBugArray.email.length === 0) {
      // '이메일 주소를 입력하세요'
      this.$refs.emailBug.focus();
      return false;
    } else if (!(this.sendBugArray.email !== ''
      && this.sendBugArray.email !== 'undefined'
      && new RegExp(/^[a-zA-Z0-9\.\_\-]+@[a-zA-Z0-9]/).test(this.sendBugArray.email))) {
      // msg = '이메일 주소 형식이 잘못 되었습니다.';
      // this.$toast.error(msg, { icon: 'warning'});
      this.$refs.emailBug.focus();

      return false;
    } else if (this.sendBugArray.account.length === 0) {
      // '계정을 입력하세요.'
      this.$refs.accountBug.focus();
      return false;
    } else if (this.sendBugArray.country.length === 0) {
      // '국적을 입력하세요.'
      this.$refs.countryBug.focus();
      return false;
    } else if (this.sendBugArray.machine.length === 0) {
      // '기기를 입력하세요.'
      this.$refs.machineBug.focus();
      return false;
    } else if (this.sendBugArray.subject.length === 0) {
      // '제목을 입력하세요.'
      this.$refs.subjectBug.focus();
      return false;
    } else if (this.sendBugArray.contents.length === 0) {
      // '내용을 입력하세요.'
      this.$refs.contentsBug.focus();
      return false;
    }

    this.sendBugArray.type = 'bug'; // 초기화되어버린 타입 재설정
    this.sendMsg(this.sendBugArray);
  }
  /** faq */
  faqOpen(key: any) {
    this.faqOpenNum = (this.faqOpenNum === key) ? null : key;
  }

}
</script>
