'use strict';

Vue.component('c-header', {
  template: `
      <header class="header">
      <div class="header_inr l-flx">
        <h1 class="logo"><a href="/" class="hvr-opc_img"><span><img src="/common/images/logo.png" alt="K-pla Inc. RECRUITING SITE"></span></a></h1>
        <div class="menu">
          <span class="menu_line">
            <span></span>
          </span>
          <span class="menu_txt"><img src="../common/images/txt_menu.svg" class="menu_txt" alt="MENU"></span>
        </div>
      </div>
      <nav class="nav">
        <ul class="nav_list">
          <li v-for='( item, index ) in this.list.headerList' :key='index'>
            <a :href='onStateCreateProperties("href",item.name)' class="hvr-scl_img">
              <div class="nav_img"><img :src='onStateCreateProperties( "svg1", index )' alt=""></div>
              <div class="nav_txt">
                <div class="nav_txt">
                  <span class="nav_txt_en"><img :src='onStateCreateProperties( "svg2", item.name )' :alt='item.name'></span>
                  <span class="nav_txt_jp">{{ item.label }}</span>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </nav>
    </header>
  `,
    data:function(){
      return {
        list:formList
      }
    },
    methods:{
      onStateCreateProperties( type, inh ) {
        let ret;
        switch( type ){
          case 'href':
            ret = '../' + inh + '/';
            break;
          case 'svg1':
            ret = '../common/images/nav_img_0' + ( inh + 1 ) + '.jpg';
            break;
          case 'svg2':
            ret = '../common/images/txt_' + inh + '.svg';
            break;
        }
        return ret;
      }
    }
});

Vue.component('c-aside', {
  template: `
    <aside class="l-flx">
      <div class="aside_news l-flx">
        <h2 class="news_ttl"><img src="../common/images/txt_news.svg" alt="NEWS"></h2>
        <div class="slider-container">
          <ul class="news_list swiper-wrapper">
            <li v-for='( item, index ) in news' :key='index' class="news_item l-flx swiper-slide">
              <span class="date">{{ item.date }}</span>
              <span class="txt">{{ item.line }}</span>
            </li>
          </ul>
        </div>
      </div>
      <a href="../entry/" class="btn-entry l-flx hvr-opc"><img src="../common/images/txt_entry_white.svg" alt="ENTRY"></a>
    </aside>
  `,
    data:function(){
      return {
        news:formList.news
      }
    }
});

Vue.component('c-footer', {
  template: `
    <footer class="footer">
      <div class="btn-pagetop l-flx hvr-opc"><img src="../common/images/txt_pagetop.svg" alt="PAGE TOP"></div>
      <div class="footer_inr">
        <nav class="footer_nav">
          <ul class="footer_nav_list">
            <li><a href="#" class="hvr-opc">コーポレートサイト</a></li>
            <li><a href="../privacy/" class="hvr-opc">個人情報保護方針</a></li>
          </ul>
        </nav>
        <p class="copyright">&copy; 2018 K-pla Inc. All rights reserved.</p>
      </div>
    </footer>
  `
});