<template>
    <div>
        <div class="container">
            <div class="row">
                <div class='col-12'>
                    <div class="card card__grback mb-5">
                        <div class="card-body card__left">
                        <!-- 根據搜尋內容顯示網站標題及網站內容簡介 -->
                        <h5 class="card-title card__url" id="sitetitle"><i class="fas fa-book-open card__url__icon"></i>如何使用</h5>
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="mr-4 animate_in">
                            <div>
                                <i class="fas fa-exclamation"></i>
                                連結Telegram 帳號
                            </div>
                            <a class="btn download" href="https://telegram.org/">下載Telegram</a>
                            </div>
                            <div class="card-text card__intro animate_in" id="descriptions">
                            <div class="intro_text pl-4"><span class="intro_num">1</span> 選擇人物 </div>
                            <div class="intro_text pl-3"><span class="intro_num">2</span> 選擇背景</div>
                            <div class="intro_text pl-2"><span class="intro_num">3</span> 輸入腳本文字 </div>
                            <div class="intro_text"><span class="intro_num intro_num_last">4</span> 完成</div>
                            </div>
                            <div class="d-flex align-items-center animate_in">
                            <div style="width:7rem;height:12rem;">
                                <img src="../assets/Labinaagu.png" alt="" style="width:100%;height:100%;">
                            </div>
                            <div class="intro__last"><i class="fas fa-check-circle" style="font-size:1.4rem;color: green;display: block;margin-bottom: 1rem;"></i>等待影片連結傳送至手機</div>
                            </div>
                            <!-- <div><i class="fab fa-youtube youtube__icon"></i></div> -->
                        </div>
                    <!--  <a href="#" class="btn btn-primary" id="globalrank2"></a> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="text_input animate_fade">
        <div class="step d-flex align-items-center">
          <h3 class='step__text'>Step 1</h3>
          <hr style="width:8rem;border-top:1.5px dotted grey;margin-right:.5rem;">
          <span>選擇人物</span>
        </div>
        <div class='characs d-flex w-100'>
          <div class="row justify-content-around">
            <div class="col-sm-12 col-md-4">
              <input type="radio" id="num1" name="characs" value="num1" checked>
              <label for="num1"><div class="card characs_fr"><img src="../assets/girl1.png" alt=""></div></label>
            </div>
            <div class="col-sm-12 col-md-4">
              <input type="radio" id="num2" name="characs" value="num2">
              <label for="num2"><div class="card characs_fr"><img src="../assets/girl2.png" alt=""></div></label>
            </div>
            <div class="col-sm-12 col-md-4">
              <input type="radio" id="num3" name="characs" value="num3">
              <label for="num3"><div class="card characs_fr"><img src="../assets/girl3.png" alt=""></div></label>
            </div>
          </div>
        </div>
      </div>
      <div class="text_input animate_fade">
        <div class="step d-flex align-items-center">
          <h3 class='step__text'>Step 2</h3>
          <hr style="width:8rem;border-top:1.5px dotted grey;margin-right:.5rem;">
          <span>選擇背景</span>
        </div>
        <div class='characs d-flex w-100'>
          <div class="row justify-content-around">
            <div class="col-sm-12 col-md-3">
              <input type="radio" id="back1" name="back" value="back1" checked>
              <label for="back1"><div class="card back_fr"><img src="../assets/patrick-perkins-3wylDrjxH-E-unsplash.jpg" alt=""></div></label>
            </div>
            <div class="col-sm-12 col-md-3">
              <input type="radio" id="back2" name="back" value="back2">
              <label for="back2"><div class="card back_fr"><img src="../assets/alberto-castillo-q-mx4mSkK9zeo-unsplash.jpg" alt=""></div></label>
            </div>
            <div class="col-sm-12 col-md-3">
              <input type="radio" id="back3" name="back" value="back3">
              <label for="back3"><div class="card back_fr"><img src="../assets/jarek-ceborski-jn7uVeCdf6U-unsplash.jpg" alt=""></div></label>
            </div>
            <div class="col-sm-12 col-md-3">
              <input type="radio" id="back4" name="back" value="back4">
              <label for="back4"><div class="card back_fr"><img src="../assets/kelsey-dody-mt2QzllH814-unsplash.jpg" alt=""></div></label>
            </div>
          </div>
        </div>
      </div>
      <div class="text_input animate_fade">
        <div class="step d-flex align-items-center">
          <h3 class='step__text'>Step 3</h3>
          <hr style="width:8rem;border-top:1.5px dotted grey;margin-right:.5rem;">
          <span>輸入您的專屬影片的腳本文字</span>
        </div>
        <form id="searchform" class="d-flex input-group search__form">
          <textarea form="searchform" class="text__bar" placeholder="輸入腳本文字" aria-label="Domain Name" id="search_query"></textarea>
          <!-- <button class="btn btn-primary search__btn" type="button" data-mdb-ripple-color="dark" id="search__btn">
              完成
          </button> -->
        </form>
      </div>
      <div class="text_input text-center">
        <button type="submit" class="submit disabled">送出</button>
      </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Aivideo',
    data() {
        return {
            submit: true,
        }
    },
    methods: {
        onloadFadein() {
            const animate_in = document.querySelectorAll('.animate_in');
            window.onload = function() {
                for(let i = 0;i < animate_in.length;i++) {
                    animate_in[i].classList.add('fade_in');
                }
            }
        },
        scrolling() {
            const text_input = document.querySelectorAll('.text_input');
            for(let i = 0;i < text_input.length;i++){
                const scrollPos = window.innerHeight + window.scrollY;
                if(scrollPos >= text_input[i].offsetTop){
                    text_input[i].classList.add('fade_up');
                }
            }
        }
    },
    mounted() {
        this.onloadFadein();
        window.addEventListener('scroll', this.scrolling);
    },
    destroyed() {
        window.removeEventListener('scroll', this.scrolling);
    },
    created() {

    }
}
/* const input = document.getElementById("search_query");
const search__btn = document.getElementById("search__btn");
const submit__btn = document.querySelector('.submit');
const search__bar = document.querySelector('.search__bar');


search__bar.addEventListener('mouseenter', function() {
  if(search__bar.value) {
    submit__btn.classList.remove('disabled');
  }
});
search__bar.addEventListener('mouseleave', function() {
  if(search__bar.value) {
    submit__btn.classList.remove('disabled');
  }
});
 */

</script>