<template>
<div class="port-chart">
    <div class="subTitle">{{subTitle_oa}}</div>
    <div class="chart oa-chart"></div>
    <div class="subTitle">{{subTitle_uv}}</div>
    <div class="chart uv-chart"></div>
    <div class="subTitle">{{subTitle_new_uv}}</div>
    <div class="chart new-uv-chart"></div>
    <div class="subTitle">{{subTitle_register}}</div>
    <div class="chart register-chart"></div>
    <div class="subTitle">{{subTitle_oc}}</div>
    <div class="chart oc-chart"></div>
    <div class="subTitle">{{subTitle_sp}}</div>
    <div class="chart sp-chart"></div>
    <div class="subTitle">{{subTitle_conversion_rate}}</div>
    <div class="chart conversion-rate-chart"></div>
</div>
</template>
<script>
import echart from 'common/echart';
import * as service from 'service.wap';
let uvChart, registerChart, ocChart, oaChart, newUvChart, spChart, conversionRateChart;

export default {
    name: 'port-chart',
    data() {
        return {
            subTitle_uv: '',
            subTitle_register: '',
            subTitle_oc: '',
            subTitle_oa: '',
            subTitle_new_uv: '',
            subTitle_sp: '',
            subTitle_conversion_rate: ''
        };
    },
    mounted() {
        echart.then(chart => {
            this.ECharts = chart;

            this.$nextTick(() => {
                this.initMyChart();
                this.getData();
                this.queryPlatformDaySinglePrice();
            });

            this.interval = setInterval(()=> {
                this.initMyChart();
                this.getData();
                this.queryPlatformDaySinglePrice();
            }, 1000 * 60 * 5);
        });
    },
    beforeDestroy() {
        if (this.interval) {
            clearInterval(this.interval);
        }
    },
    methods: {
        initMyChart() {
            let $uv = document.querySelector('.uv-chart'),
                $register = document.querySelector('.register-chart'),
                $oc = document.querySelector('.oc-chart'),
                $oa = document.querySelector('.oa-chart'),
                $newUv = document.querySelector('.new-uv-chart'),
                $sp = document.querySelector('.sp-chart'),
                $cr = document.querySelector('.conversion-rate-chart');

            if ($uv) {
                uvChart = this.ECharts.init($uv);
            }

            if ($register) {
                registerChart = this.ECharts.init($register);
            }

            if ($oc) {
                ocChart = this.ECharts.init($oc);
            }

            if ($oa) {
                oaChart = this.ECharts.init($oa);
            }

            if ($newUv) {
                newUvChart = this.ECharts.init($newUv);
            }

            if ($sp) {
                spChart = this.ECharts.init($sp);
            }

            if ($cr) {
                conversionRateChart = this.ECharts.init($cr);
            }
        },
        setChartMonth(opt) {
            opt.chartName.setOption({
                title: {
                    text: opt.title,
                    x: 'center',
                    textStyle: {
                        color: opt.color
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    borderColor: '#fff',
                    feature: {
                        saveAsImage: {}
                    }
                },
                legend: {
                    data: ['30天'],
                    x: 'right',
                    textStyle: {
                        color: '#fff'
                    }
                },
                xAxis: [{
                    type: 'category',
                    data: opt.timeLine,
                    boundaryGap: false,
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        },
                        rotate: 45
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#ccc',
                            width: 1,
                            type: 'solid'
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    min: opt.min,
                    max: opt.max,
                    axisLabel: {
                        formatter: function (p) {
                            var new_v = opt.max > 10000 ? p / 1000 : p;
                            var per = opt.max > 10000 ? 'k' : '';

                            per = opt.per ? opt.per : per;
                            return opt.isRound ? Math.round(new_v.toFixed(opt.v)) + per : new_v.toFixed(opt.v) + per;
                        },
                        textStyle: {
                            color: '#fff'
                        },
                        rotate: 45
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#ccc',
                            width: 1,
                            type: 'solid'
                        }
                    }
                }],
                grid: {
                    left: '3%',
                    right: '6%',
                    bottom: '3%',
                    containLabel: true
                },
                color: [opt.color],
                series: [{
                    name: '30天',
                    type: 'line',
                    data: opt.t,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',
                                formatter: function(p) {
                                    var new_v = opt.max > 10000 ? p.value / 1000 : p.value;

                                    return new_v.toFixed(opt.v)
                                },
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            lineStyle: {
                                width: 1
                            }
                        }
                    }
                }]
            });
        },
        getData() {
            service.get('rs/queryMiniProgramTrend').then(ret => {
                ret = ret.today;

                let oc = _.map(ret, 'orderCount'),
                    oa = _.map(ret, 'orderAmount'),
                    register = _.map(ret, 'register'),
                    uv = _.map(ret, 'uv'),
                    times = _.map(ret, 'date'),
                    newUv = _.map(ret, 'newUv'),
                    crData = [];

                _.each(ret, item => {
                    crData.push(+((item.orderCount / item.uv) * 100).toFixed(2));
                });

                this.subTitle_uv = 'UV-30天';
                this.subTitle_new_uv = '新访问UV-30天';
                this.subTitle_register = '注册数-30天';
                this.subTitle_oc = '订单数-30天';
                this.subTitle_oa = '收订金额-30天';
                this.subTitle_conversion_rate = '转化率-30天';

                this.setChartMonth({
                    title: '',
                    chartName: uvChart,
                    t: uv,
                    timeLine: times,
                    min: _.min(uv),
                    max: _.max(uv),
                    color: '#03A9F4',
                    v: 0,
                    isRound: true
                });
                this.setChartMonth({
                    title: '',
                    chartName: registerChart,
                    t: register,
                    timeLine: times,
                    min: 0,
                    max: _.max(register),
                    color: '#FFC107',
                    v: 0,
                    isRound: true
                });
                this.setChartMonth({
                    title: '',
                    chartName: ocChart,
                    t: oc,
                    timeLine: times,
                    min: _.min(oc),
                    max: _.max(oc),
                    color: '#FF5722',
                    v: 0,
                    isRound: true
                });
                this.setChartMonth({
                    title: '',
                    chartName: oaChart,
                    t: oa,
                    timeLine: times,
                    min: _.min(oa),
                    max: _.max(oa),
                    color: '#5c71e2',
                    v: 0,
                    isRound: true
                });
                this.setChartMonth({
                    title: '',
                    chartName: newUvChart,
                    t: newUv,
                    timeLine: times,
                    min: _.min(newUv),
                    max: _.max(newUv),
                    color: '#8BC34A',
                    v: 0,
                    isRound: true
                });

                this.setChartMonth({
                    title: '',
                    chartName: conversionRateChart,
                    t: crData,
                    timeLine: times,
                    min: _.min(crData),
                    max: _.max(crData),
                    color: '#8BC34A',
                    v: 2,
                    isRound: true,
                    per: '%'
                });
            });
        },
        queryPlatformDaySinglePrice() {
            service.get('rs/trend/queryPlatformDaySinglePrice', {platform: 7}).then(ret => {
                let singlePrice = _.map(ret, 'singlePrice'),
                    times = _.map(ret, 'date');

                this.subTitle_sp = '单均-30天';

                this.setChartMonth({
                    title: '',
                    chartName: spChart,
                    t: singlePrice,
                    timeLine: times,
                    min: _.min(singlePrice),
                    max: _.max(singlePrice),
                    color: '#03A9F4',
                    v: 0,
                    isRound: true
                });
            });
        }
    }
}
</script>
<style lang="scss">
.port-chart {
    .buttons{
        text-align:center;
        button{
            margin:20px 10px;
            a{
                width: 120px;
                display: block;
                padding: 0.750rem 8px;
                color: #fff;
                background: #0c2e5d;
                border-radius: 0.400rem;
            }
        }

        .ivu-btn {
            border: none;
        }
    }
    .chart {
        width: 100%;
        height: 300px;
        margin: 20px 0;
    }
    .subTitle{
        text-align: center;
        font-size: 16px;
        color: #fff;
        margin: 30px auto -20px;
    }

    .expression-title {
        margin: 0 auto 15px;
    }
}
</style>