<template>
    <Card class="worth-grossprofit">
        <p slot="title">毛利额区间分布图</p>
        <div class="grossprofit-chart" style="width:100%;height:400px;"></div>
    </Card>
</template>
<script>
import echart from 'common/echart';
import * as service from 'service.pc';

let myChart;

export default {
    name: 'worth-grossprofit',
    props: ['config', 'searchFlag'],
    data() {
        return {
        }
    },
    mounted() {
        echart.then(chart => {
            this.ECharts = chart;
            myChart = this.ECharts.init(document.querySelector('.grossprofit-chart'), 'macarons');
            this.initChart();
            this.loadData();
        });             
    },
    watch: {
        searchFlag() {
            this.loadData();
        }
    },
    methods: {
        initChart() {            
            myChart.setOption({
                tooltip : {
                    trigger: 'axis',
                    showDelay : 0,
                    axisPointer:{
                        show: true,
                        type : 'cross',
                        lineStyle: {
                            type : 'dashed',
                            width : 1
                        }
                    },
                    zlevel: 1
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataZoom : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                xAxis: {
                    name: '毛利额',
                    type: 'value',
                    splitLine: {
                        show: true
                    }
                },
                yAxis: {
                    name: 'SKN数',
                    type: 'value',
                    splitLine: {
                        show: true
                    }
                }
            });
        },
        convert() {
            return [];
        },
        loadData() {
            service.get('worth/vp_distribution', this.config).then(ret => {
                let data = ret.data || [];
                let convert = this.convert();

                _.forEach(data, d => {
                    convert.push([d.vp, d.count]);
                });

                // 绘制图表
                myChart.setOption({
                    series: [{
                        type: 'scatter',
                        data: convert
                    }]
                });
            });
        }
    }
}
</script>
<style lang="scss">
.worth-grossprofit {

}
</style>