<template>
    <div>
        <Table :columns="columns" :data="allData" :show-header="showHeader" class="all-data" v-if="allData"></Table>
    </div>
</template>
<script>
import * as service from 'service.wap';
export default {
    name: 'all-data',
    data() {
        return {
            showHeader: false,
            columns: [
                {
                    key: 'name',
                    align: 'center'
                },
                {
                    align: 'center',
                    render(row) {
                        return `<span :class="{'main-value': ${row.isMain}}">${row.value}</span><br><span class="sub-value" :class="{green: ${row.isDown}, red: ${!row.isDown}}">${(row.compare || 0).toFixed(2)}%<i class="ivu-icon" :class="{'ivu-icon-ios-arrow-thin-down': ${row.isDown}, 'ivu-icon ivu-icon-ios-arrow-thin-up': ${!row.isDown}}"></i></span>`
                    }
                }
            ],
            allData: false
        };
    },
    created() {
        this.loadData();
    },
    mounted() {
        this.interval = setInterval(()=> {
           this.loadData();
        }, 1000 * 60 * 5);
    },
    beforeDestroy() {
        if (this.interval) {
            clearInterval(this.interval);
        }
    },
    methods: {
        formatData(a, b) {
            if (!b) {
                return 0;
            }

            return (a - b) / b * 100;
        },
        fmoney(s, n) {
            n = n > 0 && n <= 20 ? n : 2;
            s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + '';
            let l = s.split('.')[0].split('').reverse(),
                t = '';
            for (let i = 0; i < l.length; i++) {
                t += l[i] + ((i + 1) % 3 === 0 && (i + 1) !== l.length ? ',' : '');
            }
            return t.split('').reverse().join('');
        },
        loadData() {
            service.get('rs/queryMiniProgramRealTime').then(ret => {
                let t = ret.today;
                let y = ret.yesterday;
                let formatData = {
                    register: t.register,
                    pa: t.payAmount,
                    pr: t.payRate,
                    ou: t.oldUser,
                    oa: t.orderAmount,
                    uv: t.uv,
                    cr: t.orderCount / t.uv,
                    cu: t.cartUv,
                    oc: t.orderCount,
                    nu: t.newUser,
                    du: t.detailUv,
                    sp: t.singlePrice,
                    nusp: t.newUserSinglePrice,
                    registerCompare: this.formatData(t.register, y.register),
                    paCompare: this.formatData(t.payAmount, y.payAmount),
                    prCompare: this.formatData(t.payRate, y.payRate),
                    ouCompare: this.formatData(t.oldUser, y.oldUser),
                    oaCompare: this.formatData(t.orderAmount, y.orderAmount),
                    uvCompare: this.formatData(t.uv, y.uv),
                    crCompare: this.formatData(t.orderCount / t.uv, y.orderCount / y.uv),
                    cuCompare: this.formatData(t.cartUv, y.cartUv),
                    ocCompare: this.formatData(t.orderCount, y.orderCount),
                    nuCompare: this.formatData(t.newUser, y.newUser),
                    duCompare: this.formatData(t.detailUv, y.detailUv),
                    spCompare: this.formatData(t.singlePrice, y.singlePrice),
                    nuspCompare: this.formatData(t.newUserSinglePrice, y.newUserSinglePrice)
                };

                this.allData = [
                    {
                        name: '收订金额',
                        value: this.fmoney(formatData.oa),
                        compare: Math.abs(formatData.oaCompare),
                        isDown: formatData.oaCompare < 0,
                        isMain: true
                    },
                    {
                        name: '订单数',
                        value: this.fmoney(formatData.oc),
                        compare: Math.abs(formatData.ocCompare),
                        isDown: formatData.ocCompare < 0
                    },
                    {
                        name: 'UV',
                        value: formatData.uv,
                        compare: Math.abs(formatData.uvCompare),
                        isDown: formatData.uvCompare < 0
                    },
                    {
                        name: '转化率',
                        value: (formatData.cr * 100).toFixed(2) + '%',
                        compare: Math.abs(formatData.crCompare),
                        isDown: formatData.crCompare < 0
                    },
                    {
                        name: '注册人数',
                        value: this.fmoney(formatData.register),
                        compare: Math.abs(formatData.registerCompare),
                        isDown: formatData.registerCompare < 0
                    },
                    {
                        name: '支付金额',
                        value: this.fmoney(formatData.pa),
                        compare: Math.abs(formatData.paCompare),
                        isDown: formatData.paCompare < 0
                    },
                    {
                        name: '支付率',
                        value: (formatData.pr * 100).toFixed(2) + '%',
                        compare: Math.abs(formatData.prCompare),
                        isDown: formatData.prCompare < 0
                    },
                    {
                        name: '老客数',
                        value: formatData.ou,
                        compare: Math.abs(formatData.ouCompare),
                        isDown: formatData.ouCompare < 0
                    },
                    {
                        name: '新客数',
                        value: this.fmoney(formatData.nu),
                        compare: Math.abs(formatData.nuCompare),
                        isDown: formatData.nuCompare < 0
                    },
                    {
                        name: '单均',
                        value: this.fmoney(formatData.sp),
                        compare: Math.abs(formatData.spCompare),
                        isDown: formatData.spCompare < 0
                    },
                    {
                        name: '新客单均',
                        value: this.fmoney(formatData.nusp),
                        compare: Math.abs(formatData.nuspCompare),
                        isDown: formatData.nuspCompare < 0
                    }
                ];
            });
        }
    }
};
</script>
<style lang="scss">
.all-data {
    font-family: 'Microsoft YaHei';
    margin: 0 auto 20px;
    border: none;
    width: 360px !important;

    .ivu-table {
        background-color: rgba(0,0,0,0);

        .ivu-table-tip {
            border: 1px dashed #676767;

            td {
                text-align: center !important;
                padding: 0 !important;
                font-size: 14px !important;
                color: #fff !important;
                position: relative !important;
                top: 0 !important;
            }
        }

        &:before,
        &:after {
            background-color: rgba(0,0,0,0);
        }

        td,
        th {
            background-color: rgba(0,0,0,0);
            border: none;
        }

        tr td:first-child {
            font-size: 16px;
            color: #fff;
            text-align: right;
            width: 160px;
            position: relative;
            top: -17px;
        }

        tr td:last-child {
            font-size: 22px;
            color: #ccc;
            text-align: right;
            padding-right: 20px;
            font-weight: bold;            
        }

        .main-value {
            font-size: 28px;
            color: #FF6600;
        }

        .sub-value {
            font-size: 12px;
            font-weight: normal;
            position: relative;
            top: -15px;

            i {
                margin-left: 5px;
            }
        }

        .green {
            color: #00CC33;
        }

        .red {
            color: #F00;
        }
    }    
};
</style>