<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, i) in tops" :key="top[0]">
                    <a href="" class="popular__card" @click.prevent="search(top[1])">
                        <div class="card">
                            <div class="card-content d-flex align-items-center">
                                <span class="d-inline-block">{{ i + 1 }}</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" v-if="topAmount>=20" @click.prevent="topAmount=5; getTops()" >
                    收起
                </button>
                <button class="btn__showmore" @click.prevent="showMore" v-else>
                    顯示更多
                </button>
            </div>
            <Linebutton @login='login'></Linebutton>
           
            </div>
    </div>
</template>

<script>
import Linebutton from '../components/Linebutton.vue';

export default {
    name: 'Login',
    components: { Linebutton },
    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,
            daterng: [],
            initialdate: [],
            singledate: '',
            HisTops: [],
            yseterday: '',
            page: 0,
            totalPages: 0
        }
    },
    methods: {
        closeModal() {
            this.$refs['my-modal'].hide();
        },
        getTops() {
            const vm = this;
            // vm.isLoading = true;
            vm.$http.get(`http://api.ptt.cx:8000/ts_top?td=${vm.initialdate[1]}&tc=${vm.topAmount}`, {headers: {'Access-Control-Allow-Origin': '*'}}).then(res => {
                console.log(res.data);

                vm.tops = res.data;
                vm.isLoading = false;
            });
        },
        showMore() {
            const vm = this;
            console.log(vm.topAmount);
            vm.topAmount += 5;
            if(vm.topAmount >20) {
                return 
            } else {
                vm.getTops();
            }
        },
        initialDate() {
            let today = new Date().toISOString().slice(0, 10);
            let newdate = new Date();
            let monthbefore = new Date(newdate.getTime() - 30*60*60*24*1000);
            let dd = monthbefore.getDate().toString();
            let mm = (monthbefore.getMonth() + 1).toString();
            dd = dd.length < 2 ? '0'+ dd : dd;
            mm = mm.length < 2 ? '0'+ mm : mm;
            let y = monthbefore.getFullYear().toString();
            let someFormattedDate = y + '-'+ mm + '-'+ dd;
            this.initialdate = [someFormattedDate, today];
            let yesterday = new Date(newdate.getTime() - 60*60*24*1000);
            yesterday = yesterday.toISOString().slice(0, 10);
            this.singledate = yesterday;
            this.yesterday = yesterday;
            // this.daterng = [someFormattedDate, today];
        },
        disabledAfterToday(date) {
            const today = new Date();
            today.setHours(0, 0, 0, 0);

            return date > today;
        },
        randomString(length){
            var result = '';
            var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            var charactersLength = characters.length;
            for ( var i = 0; i < length; i++ ) {
                result += characters.charAt(Math.floor(Math.random() * charactersLength));
            }
            return result;
        },
        login() {
            let randomState = this.randomString(8);
            console.log(randomState);
            let URL = 'https://access.line.me/oauth2/v2.1/authorize?';
            URL += '&response_type=code';
            URL += '&client_id=1656094964';
            URL += '&redirect_uri=http://localhost:8081/#/';
            URL += `&state=${randomState}`;
            URL += '&scope=profile%20openid%20email';
            URL += 'nonce=09876xyz';
            console.log(URL);
            window.open('https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=1656094964&redirect_uri=http://localhost:8081/#/&state=paa099&scope=profile%20openid%20email&nonce=09876xyz');
            
        }
    },
    computed: {
    },
    created() {
        // this.getCharData();
        this.getTops();
        this.history = JSON.parse(localStorage.getItem('searchedWords')) || [];
    }
}
</script>
