<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>
        </div>
        <Table class="collect-table" :columns="collect" :data="collectData" ref="table_collect"></Table>
    </Card>
</template>

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

export default {
    name: 'resource-collect',
    props: ['appEdition','type','date'],
    methods: {
        loadData: function() {
            service.get('data-analysis-web/resources_analysis/collect_analysis', {
                appType:this.type=='all'?this.type:'yohobuy_'+this.type,
                date:this.date,
                appEdition:this.appEdition,
                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;
                // 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.collectData = result.map((item,index)=>{
                    item.date=this.date;
                    return item;
                });
            });
        },
        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_collect.exportCsv({
                filename: '资源位汇总分类点击分析'
            });
        }
    },
    created(){
        this.loadData();
    },
    watch:{
        date() {
            this.loadData();
        },
        appEdition() {
            this.loadData();
        },
        type() {
            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];
                        }
                    }
                ]
            },
            collect: [
                {
                    title: '日期',
                    key: 'dayDate',
                    width: 120,
                    align: 'center',
                    render(row) {
                        return `<span>${row.dayDate}</span>`;
                    }
                },
                {
                    title: '平台',
                    key: 'appType',
                    width: 150,
                    align: 'center',
                    render(row) {
                        return `<span>${row.appType}</span>`;
                    }
                },
                {
                    title: '频道',
                    key: 'channelName',
                    width: 130,
                    align: 'center',
                    render(row) {
                        return `<span>${row.channelName}</span>`;
                    }
                },
                {
                    title: '曝光PV',
                    key: 'pv',
                    align: 'center',
                    render(row) {
                        return `<span>${row.pv}</span>`;
                    }
                },
                {
                    title: '曝光UV',
                    key: 'uv',
                    align: 'center',
                    render(row) {
                        return `<span>${row.uv}</span>`;
                    }
                },
                {
                    title: '点击PV',
                    key: 'clickPv',
                    align: 'center',
                    render(row) {
                        return `<span>${row.clickPv}</span>`;
                    }
                },
                {
                    title: '点击UV',
                    key: 'clickUv',
                    align: 'center',
                    render(row) {
                        return `<span>${row.clickUv}</span>`;
                    }
                },
                {
                    title: '详情页PV',
                    key: 'detailPv',
                    align: 'center',
                    render(row) {
                        return `<span>${row.detailPv}</span>`;
                    }
                },
                {
                    title: '详情页UV',
                    key: 'detailUv',
                    align: 'center',
                    render(row) {
                        return `<span>${row.detailUv}</span>`;
                    }
                },
                {
                    title: '点击PV/曝光PV',
                    key: 'clickRate',
                    align: 'center',
                    width: 150,
                    render(row) {
                        return `<span>${row.clickRate}</span>`;
                    }
                },
                {
                    title: '入篮数',
                    key: 'shopCart',
                    align: 'center',
                    render(row) {
                        return `<span>${row.shopCart}</span>`;
                    }
                },
                {
                    title: '收订订单数',
                    key: 'orderNum',
                    align: 'center',
                    render(row) {
                        return `<span>${row.orderNum}</span>`;
                    }
                },
                {
                    title: '收订金额',
                    key: 'amount',
                    align: 'center',
                    render(row) {
                        return `<span>${row.amount}</span>`;
                    }
                }
            ],
            collectData: []
        }
    }
};
</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>