<template>
    <Card class="uv-top">
        <div slot="title">
            访客特征
        </div>
        <Row :gutter="20">
            <Col span="12">
                <Card :bordered="false" dis-hover :padding="0">
                    <div slot="title">
                        <h3>时段</h3>
                    </div>
                    <div class="uv-chart2" style="width:90%;height:300px;"></div>
                </Card>
            </Col>
            <Col span="12">
                <Card :bordered="false" dis-hover :padding="0">
                    <div slot="title">
                        <h3>城市TOP10</h3>
                    </div>
                    <Table class="overview-table" :columns="overviewCol_city" :data="overviewData_city" height="330"></Table>
                </Card>
            </Col>
        </Row>
        <Row :gutter="20">
            <Col span="12">
                <Card :bordered="false" dis-hover :padding="0">
                    <div slot="title">
                        <h3>新老用户比例</h3>
                    </div>
                    <Row>
                        <Col span="12">
                            <div class="uv-chart3" style="width:100%;height:200px;"></div>
                        </Col>
                        <Col span="12">
                            <div class="uv-chart4" style="width:100%;height:200px;"></div>
                        </Col>
                    </Row>
                </Card>
                
            </Col>
            <Col span="12">
                <Card :bordered="false" dis-hover :padding="0">
                    <div slot="title">
                        <h3>访客性别</h3>
                    </div>
                    <Table class="overview-table" :columns="overviewCol_gender" :data="overviewData_gender"></Table>
                </Card>
            </Col>
        </Row>
    </Card>
</template>

<script>
import * as service from 'service.pc';
import echart from 'common/echart';

let myChart,myChart2,myChart3;

export default {
    name: 'uv-feature',
    props: ['date','appEdition'],
    mounted() {
        let opt3 = {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['老客', '新客']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: '直接访问'},
                        {value: 310, name: '邮件营销'},
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        echart.then(chart => {
            this.ECharts = chart;
            myChart = this.ECharts.init(document.querySelector('.uv-chart2'));
            myChart2 = this.ECharts.init(document.querySelector('.uv-chart3'));
            myChart3 = this.ECharts.init(document.querySelector('.uv-chart4'));
            this.loadData();
        });
        
    },
    data() {
        return {
            phone: 'apple',
            overviewCol_city: [
                {
                    title: '城市',
                    key: 'url',
                    render(row) {
                        return `<span>${row.name}</span>`;
                    }
                },
                {
                    title: '访客数(人)',
                    key: 'num',
                    render(row) {
                        return `<p>${row.uv}</p><i-progress :percent="${row.percent}" hide-info status="normal"></i-progress>`; //eslint-disable-line
                    }
                },
                {
                    title: '引导下单转化率',
                    key: 'lv',
                    align: 'center',
                    render(row) {
                        return `<span>${row.order_rate}%</span>`;
                    }
                }
            ],
            overviewCol_gender: [
                {
                    title: '性别',
                    key: 'url',
                    render(row) {
                        return `<span>${row.name}</span>`;
                    }
                },
                {
                    title: '访客数',
                    key: 'num',
                    render(row) {
                        return `<p>${row.uv}</p><i-progress :percent="${row.percent}" hide-info status="normal"></i-progress>`; //eslint-disable-line
                    }
                },
                {
                    title: '下单转化率',
                    key: 'lv',
                    align: 'center',
                    render(row) {
                        return `<span>${row.order_rate}%</span>`;
                    }
                }
            ],
            overviewData_city: [],
            overviewData_gender: []
        };
    },
    components: {},
    created(){        
    },
    methods: {
        loadData: function() {
            //城市
            service.get('data-analysis-web/flowsurvey/user_rank', {
                type: 'city',
                date: this.date,
                appEdition: this.appEdition
            }).then(result => {
                result = result.data.content;
                let uvs=_.map(result,'uv');
                let maxUa=_.max(uvs);
                result=result.map((item,index)=>{
                    item.percent=100*uvs[index]/maxUa-1;
                    item.order_rate = (item.order_rate * 100).toFixed(2);
                    return item;
                });
                this.overviewData_city=result;
            });

            //性别
            service.get('data-analysis-web/flowsurvey/user_rank', {
                type: 'gender',
                date: this.date,
                appEdition: this.appEdition
            }).then(result => {
                result = result.data.content;
                let uvs=_.map(result,'uv');
                let maxUa=_.max(uvs);
                result=result.map((item,index)=>{
                    item.percent=100*uvs[index]/maxUa-1;
                    return item;
                });
                this.overviewData_gender=result;
            });

            //时段
            service.get('data-analysis-web/flowsurvey/user_rank', {
                type: 'terminal',
                date: this.date,
                appEdition: this.appEdition
            }).then(result => {
                result = result.data.content;
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['ios', 'android']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: _.map(result.android,'time')
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: 'android',
                            type: 'line',
                            smooth: true,
                            data: _.map(result.android,'uv')
                        },
                        {
                            name: 'ios',
                            type: 'line',
                            smooth: true,
                            data: _.map(result.ios,'uv')
                        }
                    ]
                });
            });

            //新老用户比例
            service.get('data-analysis-web/flowsurvey/user_rank', {
                type: 'comp',
                date: this.date,
                appEdition: this.appEdition
            }).then(result => {
                result = result.data.content;
                // 绘制图表
                myChart2.setOption({
                    title: {
                        text: '某站点用户访问来源',
                        subtext: '纯属虚构',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: _.map(result.user,'name')
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: result.user.map(item=>{item.value=item.uv;return item;}),
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
                myChart3.setOption({
                    title: {
                        text: '某站点用户访问来源',
                        subtext: '纯属虚构',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: _.map(result.terminal,'name')
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: result.terminal.map(item=>{item.value=item.uv;return item;}),
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            });
        }
    },
    watch: {
        date() {
            this.loadData();
        },
        appEdition() {
            this.loadData();
        }
    }
};
</script>

<style lang="scss">
.uv-top {
    .ivu-progress-inner {
        background-color: transparent !important;
    }
    .num-green {
        color: #00cc66;
    }
    .num-red {
        color: #ff3300;
    }
    .op {
        float: right;
    }
    .ivu-card-body {
        padding-top: 0px;
    }
}
</style>