<template>
    <div>
        <Loading :active.sync="isLoading" :opacity="0.8">
            <template slot="default">
                <img src="../assets/ajax-loader.gif">
            </template>
        </Loading>
        <div class="container">
            <h3 class="usernews__table__title mt-3">本日熱門關鍵字排行</h3>
            <div class="row mb-3">
                <div class="col-6 mb-3" v-for="top in tops" :key="top[0]">
                    <a href="" class="popular__card">
                        <div class="card">
                            <div class="card-content d-flex align-items-center">
                                <span class="d-inline-block">{{ top[3] }}</span>
                                <p class="d-inline-block pb-0 mb-0 popular__word">{{ top[1] }}</p>
                                <i class="fas fa-chart-line"></i>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="my-3 mb-5">
                <button class="btn__showmore" @click.prevent="showMore" v-if="topAmount < 20">
                    顯示更多
                </button>
                <button class="btn__showmore" @click.prevent="topAmount = 5;getTops()" v-if="topAmount>=20">
                    收起
                </button>
            </div>
            <h3 class="usernews__table__title">關鍵字觀測</h3>
            <form id="searchform" class="d-flex search__form mx-auto">
                <input type="search" class="search__bar" placeholder="輸入您感興趣的字詞或主題" v-model='query'>
                <button class="search__btn" type="button" id="search__btn" @click.prevent="search(query)">
                    <i class="fas fa-search"></i>搜尋
                </button>
                <span class="warnmsg" v-if="warnmsg">{{ warnmsg }}</span>
            </form>
            <div class="mt-1 history__block" v-if="history.length > 0">
                <p class="mb-1">最近搜尋字詞</p>
                <span class="btn btn__searchedWord" v-for="(item, i) in searchedWords" :key="i" @click.prevent="search(item)">{{ item }}
                    <span class="btn__delete" @click.prevent.stop="deleteWord(item)">X</span>
                </span>
            </div>
            <div class="mb-3 d-flex align-items-center justify-content-between">
                <div>
                    <h2 class="text-muted kw__title">關鍵字</h2>
                    <span class="kw__query">{{ query.trim() }}</span>
                    <i class="fas fa-long-arrow-alt-up kw__icon kw__icon__up"></i>
                    <!-- <i class="fas fa-long-arrow-alt-down kw__icon kw__icon__down"></i> -->
                    <div class="">
                        <span>正在熱搜關鍵字：</span>
                        <b-badge href="#" variant="info" v-for="(rec, i) in recommends" :key="i">{{ rec[2] }}</b-badge>
                    </div>
                </div>
                <!-- <div class="btn-group group__btn mb-4" role="group" aria-label="date-buttons">
                    <button type="button" class="btn__date">單週</button>
                    <button type="button" class="btn__date">雙週</button>
                    <button type="button" class="btn__date">月</button>
                </div> -->
            </div>
            <h3 class="usernews__table__title">相關主題</h3>
            <div class="row mb-5 reltopic">
                <div class="col-2" v-for="(topic, i) in reltopics" :key="`rel-${i}`">
                    <b-card>
                        <h4 class="reltopic__title mb-0">{{ topic[8] }}</h4>
                        <!-- <i class="fas fa-long-arrow-alt-up kw__icon kw__icon__up"></i> -->
                    </b-card>
                </div>
            </div>
            <div class="row mb-5">
                <div class='col-12'>
                    <b-card shadow>
                        <div>
                            <h4>searches / month</h4>
                            <strong></strong>
                        </div>
                        <ve-line :data="chartDatat" :settings="chartSettings" :colors="color"></ve-line>
                    </b-card>
                </div>
            </div>
        </div> 
    </div>
</template>

<script>
export default {
    name: 'Usernews',
    data() {
        return {
            query: '',
            groupChar: [],
            sortDesc: true,
            color: ['#dd6565'],
            fields: [
                { key: '商品標題', sortable: true },
                { key: '銷售量', sortable: true },
                { key: '價格', sortable: true },
            ],
            recommends: [
            ],
            reltopics: [

            ],
            chartSettings: {
                area: true,
            },
            chartDatat: {
                columns: ['月份', '次數'],
                rows: [
                    { 月份: '2021-01', 次數: 1000 },
                    { 月份: '2021-02', 次數: 400 },
                    { 月份: '2021-03', 次數: 200 },
                    { 月份: '2021-04', 次數: 600 },
                    { 月份: '2021-05', 次數: 800 },
                ]
            },
            warnmsg: '',
            isLoading: false,
            history: [],
            tops: [],
            topAmount: 5,
        }
    },
    methods: {
        search(words) {
            const vm = this;
            vm.warnmsg = '';
            let word = words.trim();
            if(word) {
               // vm.isLoading = true;
                if(!vm.history.includes(word)){
                    vm.history.unshift(word);
                }
                localStorage.setItem('searchedWords', JSON.stringify(vm.history));
                vm.$http.get(`http://api.ptt.cx:8000/related_queries/${word}?fd=2020-01-01&td=2021-02-30`).then(res => {
                    vm.recommends = res.data;
                    console.log(res.data);
                    vm.isLoading = false;
                });
                vm.$http.get(`http://api.ptt.cx:8000/related_topics/${word}?fd=2020-01-01&td=2021-02-01`).then(res => {
                    console.log(res.data);
                    vm.reltopics = res.data;
                    vm.isLoading = false;
                })
            } else {
                vm.warnmsg = '請輸入字詞';
                vm.query = '';
            }
        },
        deleteWord(word) {
            let index = this.history.indexOf(word);
            this.history.splice(index, 1);
            localStorage.setItem('searchedWords', JSON.stringify(this.history));
        },
        closeModal() {
            this.$refs['my-modal'].hide();
        },
        getTops() {
            const vm = this;
            vm.$http.get(`http://api.ptt.cx:8000/ts_top?tc=${vm.topAmount}`).then(res => {
                console.log(res.data);
                vm.tops = res.data;
            });
        },
        showMore() {
            const vm = this;
            vm.topAmount += 5;
            if(vm.topAmount >20) {
                return 
            } else {
                vm.getTops();
            }
        }
    },
    computed: {
        searchedWords() {
            if(this.history.length > 3){
                this.history.pop();
                localStorage.setItem('searchedWords', JSON.stringify(this.history));
                return this.history;
            } else {
                return this.history;
            }
        }
    },
    created() {
        // this.getCharData();
        this.getTops();
        this.history = JSON.parse(localStorage.getItem('searchedWords')) || [];
    }
}
</script>
