<template>
    <Card class="overview">
        <div slot="title">
            浏览总览
            <Radio-group class="version-type" v-model="appEdition_origin" :change="change">
                <Radio label="A">
                    <span>A版本</span>
                </Radio>
                <Radio label="B">
                    <span>B版本</span>
                </Radio>
            </Radio-group>
            <Date-picker type="daterange" :value="dateRange" format="yyyy-MM-dd" placeholder="选择开始结束日期" style="width: 200px;margin-left:80px;" :options="timeOptions" placement="bottom-end" @on-change="datePickChange"></Date-picker>
            <Button type="primary" size="large" @click="exportData"><Icon type="ios-download-outline"></Icon> 导出数据</Button>
        </div>
        <div class="overview-type" slot="extra">
            <client-type v-model="type" ></client-type>
        </div>
        <Table :columns="overviewCol" :data="overviewData" ref="table"></Table>
    </Card>
</template>

<script>
import clientType from 'common/client-type';
import * as service from 'service.pc';
import moment from 'moment';

export default {
    name: 'uv-overview',
    props: ['date','value'],
    created() {
        this.loadData();
    },
    watch: {
        date: function() {
            this.loadData();
        },
        type: function() {
            this.loadData();
        },
        appEdition_origin(val){
            this.loadData();
            this.$emit("input", val);
        }
    },
    methods: {
        loadData: function() {
            this.spinShow = true;
            service.get('data-analysis-web/flowsurvey/overview', {
                type: this.type,
                date: this.date,
                appEdition: this.appEdition_origin,
                begin_date:Array.isArray(this.dateRange)?this.dateRange[0]:this.dateRange,
                end_date:Array.isArray(this.dateRange)?this.dateRange[1]:this.dateRange
            }).then(result => {
                this.overviewData=result.data;
                this.spinShow = false;
            });
        },
        change(val) {
            this.appEdition_origin = val;
        },
        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.exportCsv({
                filename: '浏览总览'
            });
        },
        error () {
            this.$Message.error('开始日期与结束日期的跨度为一个月');
        }
    },
    data() {
        return {
            type: 'all',
            ovData: {},
            spinShow: true,
            appEdition_origin: this.value,
            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];
                        }
                    }
                ]
            },
            overviewCol: [
                {
                    title: '日期',
                    width: 120,
                    align: 'center',
                    key: 'date',
                    render(row) {
                        return `<span>${row.dayDate}</span>`;
                    }
                },
                {
                    title: '平台',
                    width: 100,
                    align: 'center',
                    key: 'appType',
                    render(row) {
                        return `<span>${row.appType}</span>`;
                    }
                },
                {
                    title: '浏览量(PV)',
                    width: 120,
                    align: 'center',
                    key: 'pv',
                    render(row) {
                        return `<span>${row.pv}</span>`;
                    }
                },
                {
                    title: '访客数(UV)',
                    width: 120,
                    align: 'center',
                    key: 'uv',
                    render(row) {
                        return `<span>${row.uv}</span>`;
                    }
                },
                {
                    title: '跳失率',
                    width: 100,
                    align: 'center',
                    key: 'loss_rate',
                    align: 'loss_rate',
                    render(row) {
                        return `<span>${row.loss_rate}%</span>`;
                    }
                },
                {
                    title: '人均浏览量',
                    width: 120,
                    align: 'center',
                    key: 'avg_pv',
                    render(row) {
                        return `<span>${row.avg_pv}</span>`;
                    }
                },
                {
                    title: '平均停留时长',
                    width: 140,
                    align: 'center',
                    key: 'avg_stay',
                    render(row) {
                        return `<span>${row.avg_stay}</span>`;
                    }
                },
                {
                    title: '详情页PV',
                    width: 100,
                    align: 'center',
                    key: 'clickPv',
                    render(row) {
                        return `<span>${row.clickPv}</span>`;
                    }
                },
                {
                    title: '详情页UV',
                    width: 100,
                    align: 'center',
                    key: 'clickUv',
                    render(row) {
                        return `<span>${row.clickUv}</span>`;
                    }
                },
                {
                    title: '入蓝UV数',
                    width: 100,
                    align: 'center',
                    key: 'shopcart',
                    render(row) {
                        return `<span>${row.shopcart}</span>`;
                    }
                },
                {
                    title: '入篮次数',
                    width: 100,
                    align: 'center',
                    key: 'shopcartPv',
                    render(row) {
                        return `<span>${row.shopcartPv}</span>`;
                    }
                },
                {
                    title: '收订订单数',
                    width: 120,
                    align: 'center',
                    key: 'orderNum',
                    render(row) {
                        return `<span>${row.orderNum}</span>`;
                    }
                },
                {
                    title: '收订订单金额',
                    width: 140,
                    align: 'center',
                    key: 'amount',
                    render(row) {
                        return `<span>${row.amount}</span>`;
                    }
                },
                {
                    title: '支付订单金额',
                    width: 140,
                    align: 'center',
                    key: 'successAmount',
                    render(row) {
                        return `<span>${row.successAmount}</span>`;
                    }
                },
                {
                    title: '详情页入篮率',
                    width: 140,
                    align: 'center',
                    key: 'shopcartRate',
                    render(row) {
                        return `<span>${row.shopcartRate}</span>`;
                    }
                },
                {
                    title: '详情页进店率',
                    width: 150,
                    align: 'center',
                    key: 'clickToShopRate',
                    render(row) {
                        return `<span>${row.clickToShopRate}</span>`;
                    }
                }
            ],
            overviewData: []
        };
    },
    components: {clientType}
};
</script>

<style lang="scss">
.overview {
    .version-type {
        margin-left: 20px;
    }
    .overview-content {
        position: relative;
        width: 100%;
        height: 100px;
        padding-left: 100px;
        padding-right: 100px;
        display: flex;
        .oc-item {
            text-align: center;
            flex: 1;
            .tit {
                font-size: 18px;
            }
            .val {
                height: 80px;
                line-height: 80px;
                font-size: 28px;
            }
        }
    }
    .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>