<template>
    <Card>
        <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="button_focus" type="button">
                    <Radio :label="item.value" v-for="item in button" :key="item.value"></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.text" v-for="item in button2" :key="item.text" key="item.text"></Radio>
                </Radio-group>
            </Col>
        </Row>
        <Table class="overview-table" :columns="overview" :data="overviewData" ref="table_home"></Table>
    </Card>
</template>

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

export default {
    name: 'product-detail',
    props: ['appEdition','type','date'],
    methods: {
        loadData: function() {
            service.get('data-analysis-web/resources_analysis/secondLevelEntryAnalysis', {
                appType:this.type=='all'?this.type:'yohobuy_'+this.type,
                date:this.date,
                appEdition:this.appEdition,
                channel:_.find(this.button,{value:this.button_focus})['index'],
                begin_date:Array.isArray(this.dateRange)?this.dateRange[0]:this.dateRange,
                end_date:Array.isArray(this.dateRange)?this.dateRange[1]:this.dateRange,
                eventCode:this.eventCode||''
            }).then(result => {
                result = result.data;
                let arr=_.map(result,'iconName').map(item=>{return{text:item,eventCode:_.result(_.find(result, { 'iconName':item}), 'eventCode')}});
                if(getSecondLevels)this.button2=_.uniqBy(arr, 'text');
                this.overviewData=result.map((item,index)=>{
                    item.channel=this.button_focus;
                    item.date=this.date;
                    return item;
                });
                getSecondLevels=false;
            });
        },
        error () {
            this.$Message.error('开始日期与结束日期的跨度为一个月');
        },
        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();
        },
        exportData(){
            this.$refs.table_home.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/resources_analysis/secondLevelEntryAnalysisExportAll?${link.join('&')}`;
        }
    },
    created(){
        this.loadData();
    },
    watch:{
        date() {
            this.loadData();
        },
        appEdition() {
            this.loadData();
        },
        type() {
            this.loadData();
        },
        button_focus(){
            this.eventCode='';
            this.button2_focus='';
            getSecondLevels=true;
            this.loadData();
        },
        button2_focus(val){
            this.eventCode=_.result(_.find(this.button2, { 'text':val}), 'eventCode');
            this.loadData();
        }
    },
    data(){
        return {
            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];
                        }
                    }
                ]
            },
            button:[{value:'男生',index:1},{value:'女生',index:2},{value:'潮童',index:3},{value:'创意生活',index:4}],
            button_focus:'男生',
            button2:[],
            button2_focus:'',
            eventCode:'',
            overview: [
                {
                    title: '日期',
                    key: 'dayDate',
                    render(row) {
                        return `<span>${row.dayDate}</span>`;
                    }
                },
                {
                    title: '平台',
                    key: 'appType',
                    render(row) {
                        return `<span>${row.appType}</span>`;
                    }
                },
                {
                    title: '频道',
                    key: 'channel',
                    render(row) {
                        return `<span>${row.channel}</span>`;
                    }
                },
                {
                    title: '页面类型',
                    key: 'iconName',
                    render(row) {
                        return `<span>${row.iconName}</span>`;
                    }
                },
                {
                    title: '点击PV',
                    key: 'pv',
                    render(row) {
                        return `<span>${row.pv}</span>`;
                    }
                },
                {
                    title: '点击UV',
                    key: 'uv',
                    render(row) {
                        return `<span>${row.uv}</span>`;
                    }
                },
                {
                    title: '跳出率',
                    key: 'outRate',
                    render(row) {
                        return `<span>${row.outRate}</span>`;
                    }
                },
                {
                    title: '跳出次数',
                    key: 'outCount',
                    render(row) {
                        return `<span>${row.outCount}</span>`;
                    }
                },
                {
                    title: '平均停留时长',
                    key: 'avgTime',
                    render(row) {
                        return `<span>${row.avgTime}</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>