<template>
    <div>
        <Table :columns="columns" :data="realTime" :show-header="showHeader" class="real-time" v-if="realTime"></Table>
    </div>
</template>
<script>
import * as service from 'service.wap';
export default {
    name: 'real-time',
    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>`
                    }
                }
            ],
            realTime: false,
            extendData: false
        };
    },
    mounted() {
        this.loadData();
        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) {
            if (!s) return 0;
            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/lineShop/queryLineShopRealTime', {
                type: 0
            }).then(ret => {
                let t = ret.today;
                let y = ret.yesterday;
                let formatData = {
                    pa: t.payAmount,
                    pc: t.payCount,
                    dp: t.dayPeople,
                    ru: t.registerUser,
                    sic: t.signInCount,
                    paCompare: this.formatData(t.payAmount, y.payAmount),
                    pcCompare: this.formatData(t.payCount, y.payCount),
                    dpCompare: this.formatData(t.dayPeople, y.dayPeople),
                    ruCompare: this.formatData(t.registerUser, y.registerUser),
                    sicCompare: this.formatData(t.signInCount, y.signInCount)
                };

                this.realTime = [
                    {
                        name: '支付总金额',
                        value: this.fmoney(formatData.pa),
                        compare: Math.abs(formatData.paCompare),
                        isDown: formatData.paCompare < 0,
                        isMain: true
                    },
                    {
                        name: '支付总订单',
                        value: formatData.pc || 0,
                        compare: Math.abs(formatData.pcCompare),
                        isDown: formatData.pcCompare < 0
                    },
                    {
                        name: '累计入场数',
                        value: formatData.dp || 0,
                        compare: Math.abs(formatData.dpCompare),
                        isDown: formatData.dpCompare < 0
                    },
                    {
                        name: '新注册数',
                        value: formatData.ru || 0,
                        compare: Math.abs(formatData.ruCompare),
                        isDown: formatData.ruCompare < 0
                    },
                    {
                        name: '签到数',
                        value: formatData.sic || 0,
                        compare: Math.abs(formatData.sicCompare),
                        isDown: formatData.sicCompare < 0
                    }
                ];
            });
        }
    }
};
</script>
<style lang="scss">
.real-time {
    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>