const app = new Vue({
    el:'#app',
    data:{
        group_datas: [],
        user_groups: [],
        ex: [],
        month: [['Jan', 'Feb', 'Mar'], ['Apr', 'May', 'Jun'], ['Jul', 'Aug', 'Sep'], ['Oct', 'Nov', 'Dec']],
        trends: [
            {
                group: '婚禮', 
                data:[
                    [{month: 'Jan', times: 782}, {month: "Feb", times: 752} , {month: 'Mar', times: 909}],
                    [{month: 'Apr', times: 880}, {month: 'May', times: 929}, {month: "Jun", times: 883} ],
                    [{month: 'Jul', times: 855}, {month: 'Aug', times: 776}, {month: 'Sep', times: 1020}],
                    [{month: "Oct", times: 1206} , {month: 'Nov', times: 1042}, {month: 'Dec', times: 1051}]
                ]
            },
        ],
        keywords: [
            { group: "婚禮", words: ['婚禮穿搭', '婚禮穿搭男', '婚禮穿搭dcard', '婚禮穿搭禁忌', ' 婚禮穿搭褲裝', '婚禮穿搭牛仔褲', '婚禮穿搭女', '婚禮穿搭ptt', '婚禮穿搭夏天', '婚禮穿搭 冬天'] },
            { group: "蔬食", words: ['健康蔬食', '蔬食食譜','素食蔬食']},
            { group: "室內設計", words: ['室內設計風格', '室內設計圖','室內設計網站']}
        ],
        tempkeywords: [],
        selected: 0,
        json: [],
    },
    methods:{
        checkback(num) {
            if(num > 700) {
                return 'dark-2'
            } else if (num > 500) {
                return 'dark-1'
            } else if (num > 300) {
                return 'lighten-1'
            } else {
                return 'lighten-2'
            }
        },
        showModal(keywords) {
            $('#exampleModalCenter').modal('show');
            this.tempkeywords = keywords;
        },
        check(num, grpdata) {
            let total = 0;
            grpdata.trends.forEach(item => {
                item.forEach(single => {
                    total += single.times;
                })
            });
            let threshold = total / 12;
            if(num > threshold) {
                return true;
            } else {
                return false;
            }
        },
        getData() {
            axios.get('http://www.googo.org:8050/api/group_datas/').then(res => {
                this.group_datas = res.data;
                //console.log(this.group_datas);
               // this.trends = this.json.filter(item => item['data_type'] === 'trends');
                //this.keywords = this.json.filter(item => item['data_type'] === 'suggests');
                
            });
            axios.get('http://www.googo.org:8050/api/user_groups/').then(res => {
                //console.log(res.data);
                this.user_groups = res.data;
                this.user_groups.forEach(item => {
                    this.group_datas.forEach(d => {
                        if(d.group_id === item.id) {
                            d.group_chinese_name = item.group_chinese_name;
                        }
                    })
                });
                //console.log(this.group_datas);
                this.trends = this.group_datas.filter(item => item['data_type'] === 'trends');
                this.keywords = this.group_datas.filter(item => item['data_type'] === 'suggests');
                this.trends.forEach(item => { 
                    item.times = this.GetObjVal(item.data.data);
                    let newD = [];
                    item.times.forEach((k, i) => {
                        if(i%3===0){
                            newD.push([]);
                        }
                        const page = parseInt(i/3);
                        newD[page].push({times:k});
                        console.log(newD);
                        item.final = newD;
                    });
                });
                console.log(this.trends);
                console.log(this.keywords);
                this.user_groups.forEach(item => {
                    this.group_datas.forEach(d => {
                        if(d.group_id == item.id) {
                            if(d['data_type'] == 'suggests') {
                                item.suggests = d.data.data;
                                console.log(item.suggests);
                            };
                            if(d['data_type'] == 'trends') {
                                item.trends = d.data.data;
                            }
                        }
                    })
                });
                this.user_groups.forEach(item => {
                    if(item.trends) {
                        const temp = this.GetObjVal(item.trends);
                        let newD = [];
                        temp.forEach((k, i) => {
                            if(i%3===0){
                                newD.push([]);
                            }
                        const page = parseInt(i/3);
                        newD[page].push({times:k});
                        item.trends = newD;
                    });
                    } else {
                        item.trends = [
                            [{times: 0}, {times: 0}, {times: 0}],
                            [{times: 0}, {times: 0}, {times: 0}],
                            [{times: 0}, {times: 0}, {times: 0}],
                            [{times: 0}, {times: 0}, {times: 0}]
                        ]
                    }
                });
                console.log(this.user_groups);
            })
        },
        mergeData() {
            this.user_groups.forEach(item => {
                this.group_datas.forEach(d => {
                    if(d['data_type'] == 'suggests') {
                        item.suggests = d.data.data;
                    };
                    if(d['data_type'] == 'trends') {
                        item.trends = d.data.data;
                    }
                })
            });
        },
        getPack() {
            for(let i = 1;i < 5;i++) {
                axios.get(`http://www.googo.org:8050/api/group_datas/group/${i}/`).then(res => {
                console.log(res.data);
                const add = [...res.data];
                this.ex.push(add);
                //this.trends = this.json.filter(item => item['data_type'] === 'trends');
                //this.keywords = this.json.filter(item => item['data_type'] === 'suggests');
                console.log(this.ex);
            });
            }
        },
        filter() {
            this.user_groups .forEach(item => {
                this.group_datas.forEach(d => {
                    if(d.group_id === item.id) {
                        d.group_chinese_name = item.group_chinese_name;
                    }
                })
            });
        },
        GetObjVal(val) {
            return Object.values(val);
        }
    },
    computed: {
    },
    created() {
       const d = new Date();
       const m = d.getMonth();
       if(m >= 0 && m < 3) {
            this.selected = 0;
       } else if(m >=3 && m < 6) {
            this.selected = 1;
       } else if(m >=6 && m < 9) {
            this.selected = 2;
       } else {
            this.selected = 3;
       };
        this.getData();
       //this.getPack();
    },
    mounted() {
       
    },
    destroyed() {
    },
});