<template>
    <div id="praise" class="card">
        <date @change="onChangeDate"></date>
        <div class="info">
            <div class="item">
                <img :src="icon.praise" alt="" srcset="">
                <span class="item-praise">{{right}}</span>
            </div>
            <div class="item">
                <img :src="icon.stamp" alt="" srcset="">
                <span class="item-stamp">{{wrong}}</span>
            </div>
        </div>
        <div class="line"></div>
        <div class="btns">
            <div class="btn" :class="showType==1?'btn-active':'btn-normal'" @click="onShowType(1)">点赞top5</div>
            <div class="btn" :class="showType==2?'btn-active':'btn-normal'" @click="onShowType(2)">点踩top5</div>
        </div>
        <div id="praise-bar" class="card-mt15" :style="barStyle"></div>
    </div>
</template>

<script>
import Date from './Date.vue';
import { showPraise } from '../config/bar';
import { getEvaluationTotal, getEvaluationInfo } from '@/api/home';

export default {
    components: {
        Date,
    },
    data () {
        return {
            right: '0',
            wrong: '0',
            icon: {
                praise: require('@/assets/home/praise.png'),
                stamp: require('@/assets/home/stamp.png'),
            },
            showType: 1,
            dateRange: [],
            barHeight: 100,
        }
    },
    computed: {
        barStyle() {
            return {
                height: `${this.barHeight}px`,
                maxHeight: `${this.barHeight}px`,
            }
        }
    },
    methods: {
        onChangeDate(range) {
            this.dateRange = range;
            this.loadData();
            const vm = this;
            window.onresize = function() {
                vm.resize();
            };
            this.resize();
        },
        resize() {
            const e = document.querySelector('#praise');
            let h = 180;
            if (document.body.clientWidth < 1600) {
                h = 150;
            }
            if (document.body.clientWidth < 1400) {
                h = 130;
            }
            this.barHeight = e.clientHeight - h;
        },
        loadData() {
            let start = '', end = '';
            if (this.dateRange && this.dateRange.length > 1) {
                start = this.dateRange[0];
                end = this.dateRange[1];
            }
            getEvaluationTotal({
                start_date: start,
                end_date: end,
            }).then(res => {
                if (res && res.data) {
                    this.right = res.data.like;
                    this.wrong = res.data.dis_like;
                }
                this.loadBarData();
            });
        },
        loadBarData() {
            let start = '', end = '';
            if (this.dateRange && this.dateRange.length > 1) {
                start = this.dateRange[0];
                end = this.dateRange[1];
            }
            const type = this.showType == 1 ? 'like' : 'dis_like';
            getEvaluationInfo({
                start_date: start,
                end_date: end,
                stat_type: type,
            }).then(res => {
                if (res && res.data) {
                    let legend = [], list = [];
                    res.data.reverse().map(item => {
                        legend.push(item.template_name);
                        list.push(parseInt(item.count));
                    });
                    showPraise('praise-bar', {
                        legendData: legend,
                        seriesData: list,
                    });
                }
            });
        },
        onShowType(type) {
            if (this.showType != type) {
                this.showType = type;
                this.loadBarData();
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.card {
    background: #FFFFFF;
    border: 1px solid #E9EAF8;
    border-radius: 4px;
    padding: 10px;
}
.info {
    margin-top: 20px;
    display: flex;
    align-items: center;
    .item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        &>img {
            width: 24px;
        }
        &>span {
            font-size: 30px;
            font-weight: bold;
            margin-left: 8px;
        }
        &-praise {
            color: #3A8FEA;
        }
        &-stamp {
            color: #8F8F8F;
        }
    }
}
.line {
    width: 100%;
    height: 1px;
    background: #97C9FF;
    margin-top: 20px;
}
.btns {
    margin-top: 20px;
    display: flex;
    .btn {
        padding: 2px 4px;
        border-radius: 3px;
        font-size: 12px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        border: 1px solid #3B90EB;
        cursor: pointer;
    }
    .btn-normal {
        color: #3B90EB;
        background: #FFFFFF;
    }
    .btn-active {
        background: #3B90EB;
        color: #FFFFFF;
    }
    .btn:last-child {
        margin-left: 10px;
    }
}
@media screen and (min-width: 1608px) {
    .card {
        margin-left: 10px;
    }
    .info {
        margin-top: 15px;
        .item-icon {
            width: 66px;
        }
        .row-title {
            font-size: 28px;
        }
    }
    .line {
        margin-top: 20px;
    }
    .btns {
        margin-top: 20px;
    }
}
@media screen and (max-width: 1600px) {
    .card {
        margin-left: 7px;
    }
    .info {
        margin-top: 10px;
        .item-icon {
            width: 50px;
        }
        .row-title {
            font-size: 24px;
        }
    }
    .line {
        margin-top: 16px;
    }
    .btns {
        margin-top: 16px;
    }
}
@media screen and (max-width: 1300px) {
    .card {
        margin-left: 4px;
    }
    .info {
        margin-top: 5px;
        .item-icon {
            width: 44px;
        }
        .row-title {
            font-size: 20px;
        }
    }
    .line {
        margin-top: 14px;
    }
    .btns {
        margin-top: 14px;
    }
}
@import '@/styles/home.scss';
</style>