<template>
  <div id="app">
     <nav class="navbar navbar-dark navbar-expand-lg sticky-top p-2">
        <a class="navbar-brand" href="#">Marketing Cloud</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" @click.prevent="navtoggler = !navtoggler">
          <span class="navbar-toggler-icon" v-if="!navtoggler"></span>
          <span class="navbar-close-icon" v-if="navtoggler"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item" :class="{'active': $route.name === 'Trends' }">
              <a class="nav-link" @click="$router.push({ name: 'Trends' })">趨勢觀測<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item" :class="{'active': $route.name === 'Usernews' }">
              <a class="nav-link" @click="$router.push({ name: 'Usernews' })">商品熱度分析<span class="sr-only">(current)</span></a>
            </li>
            <!-- <li class="nav-item" :class="{'active': $route.name === 'Calendarview' }">
              <a class="nav-link" @click="$router.push({ name: 'Calendarview' })">Calendar</a>
            </li> -->
            <li class="nav-item" :class="{'active': $route.name === 'Aivideo' }">
              <a class="nav-link" @click="$router.push({ name: 'Aivideo' })">AI代言人</a>
            </li>
            <li class="nav-item" :class="{'active': $route.name === 'Calendarview' }"> 
              <a class="nav-link" @click="$router.push({ name: 'Calendarview' })">AMP</a>
            </li>
          </ul>
          <div class="">
            <button class="btn btn-outline-light btn__genCal" @click.prevent="addToGcal">加入Google Calendar</button>
          </div>
        </div>
      </nav>
      <div class="container">
          <!-- <nav class="col-md-2 d-none d-md-block bg-light sidebar">
                <div class="sidebar-sticky">
                  <ul class="nav flex-column">
                    <li class="nav-item">
                      <a class="nav-link" @click="$router.push({ name: 'Home' })">
                        <i class="fas fa-comment-dots"></i>
                        近一季行銷建議
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" @click="$router.push({ name: 'Groupbrowse' })">
                        <i class="fas fa-users"></i>
                        客群瀏覽
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" @click="$router.push({ name: 'Usernews' })">
                        <i class="fas fa-users"></i>
                        商品熱度分析
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" @click="$router.push({ name: 'Calendarview' })">
                        <i class="fas fa-users"></i>
                        Calendar
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="footer__txt">ChoozMo 行銷雲</div>
          </nav> -->
        <main role="main" class="pt-3">
          <router-view :userId="userId" :logselected="logselected" />
        </main>
      </div>
      <div class="modal fade" id="addToGcalModal" tabindex="-1" role="dialog" aria-labelledby="addToGcalModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="addToGcalModal">將您訂閱的客群同步至您的Google Calendar</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="mb-3 text-left">
                <span class="step">Step 1</span><p>前往您的Google Calendar的設定，並選擇自URL加入Calendar</p>
              </div>
              <div class="img_fr mb-3"><img src="./assets/addurl.png" alt=""></div>
              <div class="mb-3 text-left">
                <span class="step">Step 2</span><p>將下方URL輸入欄位，就可成功加入Calendar</p>
              </div>
              <div class="url_fr">
                URL: {{ calUrl }}
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn__close" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import $ from 'jquery';

export default {
  data() {
    return {
      userId: 20,
      username: 'Ana Huang',
      logselected: false,
      calUrl: '',
      cookie: '',
      navtoggler: false,
    }
  },
  methods: {
    examineType() {
      this.$http.get('http://www.googo.org:8050/api/user_groups_data/20').then(res => {
        if(res.data.length == 0) {
          this.logselected = false;
        } else{
          this.logselected = true;
        }
      });
    },
    addToGcal() {
      this.$http.get('http://www.googo.org:8050/api/calendar/gen_ics/20').then(res => {
        //console.log(res.data);
        if(res.data.status === 'success') {
          this.calUrl = res.data.url;
        }
        $('#addToGcalModal').modal('show');
      });
    },
    getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) { return parts.pop().split(';').shift() };
    },
    examineUser() {
      this.cookie = this.getCookie('token');
      this.$http.get('http://www.googo.org:8050/api/auth/user_status', { 
        headers: {
          'Authorization' : this.cookie
        }
      }).then(res => {
        this.userId = res.data.data.user_id;
        this.username = res.data.data.username;
      });
    }
  },
  created() {
    //this.examineType();
    /* this.$http.get('http://www.googo.org:8050/api/auth/user_status', { 
      headers: {
        'Authorization' : "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoyMCwiZXhwIjoxNjIwNzg5Mzc4LCJzdWIiOjIwfQ.C-S2gPHkZ0RnejcfCFVoYKiwsNuMVH5QZdNqSKvZPZs"
      }
    }).then(res => {
        
      }); */
  }
  
}
</script>
<style lang="scss">
@import '@/assets/scss/all.scss';
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

</style>
