<template>
    <Card class="flow-click">
        <div slot="title">
            流量入口点击分析
            <Date-picker type="daterange" :value="dateRange" format="yyyy-MM-dd" placeholder="选择开始结束日期" style="width: 200px;margin-left:80px;" :options="timeOptions" placement="bottom-start" @on-change="datePickChange"></Date-picker>
            <Button type="primary" size="large" @click="exportData"><Icon type="ios-download-outline"></Icon> 导出数据</Button>
            <Button type="primary" size="large" @click="exportAllData"><Icon type="ios-download-outline"></Icon> 导出全部数据</Button>
        </div>
        <Row class="title-time code-row-bg" justify="center" align="middle">
            <Col span="2">
                一级标签：
            </Col>
            <Col span="8">
                <Radio-group v-model="button1_focus" type="button">
                    <Radio :label="item" v-for="item in button1" :key="item"></Radio>
                </Radio-group>
            </Col>
        </Row>
        <Row class="title-time code-row-bg" justify="center" align="middle">
            <Col span="2">
                二级标签：
            </Col>
            <Col span="14">
                <Radio-group v-model="button2_focus" type="button">
                    <Radio :label="item" v-for="item in button2[button1_focus]" :key="item"></Radio>
                </Radio-group>
            </Col>
        </Row>
        <Table class="overview-table" :columns="overview" :data="overviewData" v-if="showTable1" ref="table_flow1"></Table>
        <Table class="overview-table" :columns="overview2" :data="overviewData" v-if="!showTable1" ref="table_flow2"></Table>
    </Card>
</template>

<script>
import * as service from 'service.pc';
import * as _ from 'lodash';
import config from 'config';
import moment from 'moment';

export default {
    name: 'product-detail',
    props: ['appEdition','type','date'],
    methods: {
        loadData: function() {
            let topLabel,secondLabels=[];
            this.button1.forEach((item,index)=>{
                if(item==this.button1_focus)topLabel=index+1;
            });
            this.button2[this.button1_focus].forEach((item,index)=>{
                if(this.button2_focus){
                    if(item==this.button2_focus)secondLabels=index+1;
                }else{
                    secondLabels.push(index+1);
                }
            });
            if(!this.button2_focus)secondLabels=secondLabels.join(',');

            this.config = _.assign({
                appType:this.type,
                date:this.date,
                appEdition:this.appEdition,
                topLabel:topLabel,
                secondLabels:secondLabels,
                begin_date:Array.isArray(this.dateRange)?this.dateRange[0]:this.dateRange,
                end_date:Array.isArray(this.dateRange)?this.dateRange[1]:this.dateRange
            }, this.config);

            service.get('data-analysis-web/click_analysis/input_click', {
                appType:this.type,
                date:this.date,
                appEdition:this.appEdition,
                topLabel:topLabel,
                secondLabels:secondLabels,
                begin_date:Array.isArray(this.dateRange)?this.dateRange[0]:this.dateRange,
                end_date:Array.isArray(this.dateRange)?this.dateRange[1]:this.dateRange
            }).then(result => {
                result = result.data;
                this.overviewData=result.map((item,index)=>{
                    item.webType=this.button1_focus;
                    item.channelType=this.button2[this.button1_focus][item.secondLabel-1]
                    return item;
                });
            });
        },
        datePickChange(val){
            this.dateRange=val;
            let mean=new Date(val[1]).getTime()-new Date(val[0]).getTime();
            if(Math.floor(mean/(24*3600*1000))>30){
                this.error();
                return;
            }
            this.loadData();
        },
        error () {
            this.$Message.error('开始日期与结束日期的跨度为一个月');
        },
        exportData(){
            if(this.showTable1){
                this.$refs.table_flow1.exportCsv({
                    filename: '流量入口点击分析'
                });
            }else{
                this.$refs.table_flow2.exportCsv({
                    filename: '流量入口点击分析'
                });

            }   
        },
        exportAllData() {
            let link = [];
            let params = {
                appType: this.type,
                date: this.date,
                begin_date: Array.isArray(this.dateRange)?this.dateRange[0]:this.dateRange,
                end_date: Array.isArray(this.dateRange)?this.dateRange[1]:this.dateRange,
                appEdition: this.appEdition
            };

            _.forEach(params, function(item, key){
                link.push(key + '=' + item);                
            });

            location.href = `${config.apiURL}/data-analysis-web/click_analysis/input_click_exportAll?${link.join('&')}`;
        }
    },
    created(){
        this.loadData();
    },
    watch:{
        date() {
            this.loadData();
        },
        appEdition() {
            this.loadData();
        },
        type() {
            this.loadData();
        },
        button1_focus(val){
            this.button2_focus='';
            if(val=='功能'){
                this.showTable1=false;
            }else{
                this.showTable1=true;
            }
            this.loadData();
        },
        button2_focus(){
            this.loadData();
        }
    },
    data(){
        return {
            config: {
                isExportAll: 1
            },
            allCount: false,
            exportParam: {
                urlType: '/data-analysis-web/click_analysis/input_click',
                export: false
            },
            dateRange:moment().format('YYYY-MM-DD'),
            timeOptions: {
                disabledDate:(date)=> {
                    return moment(date).isAfter(new Date(), 'day');
                },
                shortcuts: [
                    {
                        text: '最近一周',
                        value () {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            return [start, end];
                        }
                    },
                    {
                        text: '最近一个月',
                        value () {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            return [start, end];
                        }
                    },
                    {
                        text: '最近三个月',
                        value () {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            return [start, end];
                        }
                    }
                ]
            },
            showTable1:true,
            button1:['登录','侧栏','功能'],
            button1_focus:'登录',
            button2:{
                '登录':['男生','女生','潮童','创意生活'],
                '侧栏':['男生','女生','潮童','创意生活','奥莱','PLUS','STAR','全球购','逛'],
                '功能':['首页','分类','逛','购物车','我的','搜索','侧栏']
            },
            button2_focus:'',
            overview: [
                {
                    title: '日期',
                    key: 'date',
                    render(row) {
                        return `<span>${row.date}</span>`;
                    }
                },
                {
                    title: '平台',
                    key: 'appType',
                    render(row) {
                        return `<span>${row.appType}</span>`;
                    }
                },
                {
                    title: '页面类型',
                    key: 'webType',
                    render(row) {
                        return `<span>${row.webType}</span>`;
                    }
                },
                {
                    title: '频道类型',
                    key: 'channelType',
                    render(row) {
                        return `<span>${row.channelType}</span>`;
                    }
                },
                {
                    title: '入口PV',
                    key: 'pv',
                    render(row) {
                        return `<span>${row.pv}</span>`;
                    }
                },
                {
                    title: '入口UV',
                    key: 'uv',
                    render(row) {
                        return `<span>${row.uv}</span>`;
                    }
                },
                {
                    title: '入口UV占比',
                    key: 'uvRate',
                    render(row) {
                        return `<span>${row.uvRate}%</span>`;
                    }
                }
            ],
            overview2: [
                {
                    title: '日期',
                    key: 'date',
                    render(row) {
                        return `<span>${row.date}</span>`;
                    }
                },
                {
                    title: '平台',
                    key: 'appType',
                    render(row) {
                        return `<span>${row.appType}</span>`;
                    }
                },
                {
                    title: '页面类型',
                    key: 'webType',
                    render(row) {
                        return `<span>${row.webType}</span>`;
                    }
                },
                {
                    title: '频道类型',
                    key: 'channelType',
                    render(row) {
                        return `<span>${row.channelType}</span>`;
                    }
                },
                {
                    title: '入口PV',
                    key: 'pv',
                    render(row) {
                        return `<span>${row.pv}</span>`;
                    }
                },
                {
                    title: '入口UV',
                    key: 'uv',
                    render(row) {
                        return `<span>${row.uv}</span>`;
                    }
                },
                {
                    title: '入口UV占比',
                    key: 'uvRate',
                    render(row) {
                        return `<span>${row.uvRate}%</span>`;
                    }
                },
                {
                    title: '跳出率',
                    key: 'outRate',
                    render(row) {
                        return `<span>${row.outRate||0}</span>`;
                    }
                },
                {
                    title: '点击次数',
                    key: 'totalCount',
                    render(row) {
                        return `<span>${row.totalCount||0}</span>`;
                    }
                },
                {
                    title: '跳出次数',
                    key: 'outCount',
                    render(row) {
                        return `<span>${row.outCount||0}</span>`;
                    }
                },
                {
                    title: '平均停留时长',
                    key: 'avgTime',
                    render(row) {
                        return `<span>${row.avgTime||0}</span>`;
                    }
                }
            ],
            overviewData: []
        }
    }
};
</script>

<style lang="scss">
    .ivu-date-picker{
        display: inline-block;
    }
    .ivu-picker-panel-shortcut{
        font-size: 12px;
    }
    .ivu-btn.ivu-btn-primary.ivu-btn-large{
        margin-left: 20px;
    }
</style>