<template>
    <Card>
        <div slot="title">
            流量趋势
        </div>
        <div class="overview-type" slot="extra">
            <client-type v-model="type"></client-type>
        </div>
        <div class="uv-chart" style="width:100%;height:400px;"></div>
    </Card>
</template>

<script>

import echart from 'common/echart';
import clientType from 'common/client-type';
import * as service from 'service.pc';
import * as _ from 'lodash';

let myChart;

export default {
    name: 'uv-trend',
    props: ['appEdition'],
    data() {
        return {
            type: 'all'
        };
    },
    watch: {
        type: function() {
            this.loadData();
        },
        appEdition: function() {
            this.loadData();
        }
    },
    mounted() {
        echart.then(chart => {
            this.ECharts = chart;
            myChart = this.ECharts.init(document.querySelector('.uv-chart'));

            this.loadData();
        });
        
    },
    components: {clientType},
    methods: {
        loadData: function() {
            service.get('data-analysis-web/flowsurvey/trend', {
                type: this.type,
                appEdition: this.appEdition
            }).then(result => {
                result = result.data.content;
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['访客数', '浏览量', '跳失率', '人均浏览量', '平均停留时长']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: _.map(result,'date')
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '访客数',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            data: _.map(result,'uv')
                        },
                        {
                            name: '浏览量',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            data: _.map(result,'pv')
                        },
                        {
                            name: '跳失率',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            data: _.map(result,'loss_rate')
                        },
                        {
                            name: '人均浏览量',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            data: _.map(result,'avg_pv')
                        },
                        {
                            name: '平均停留时长',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            data: _.map(result,'avg_stay')
                        }
                    ]
                });
            });
        }
    }
};
</script>

<style lang="scss">
</style>