<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',
    props: ['cId'],
    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
        };
    },
    watch: {
        cId() {
            this.loadData();
        }
    },
    mounted() {
        this.cId = +this.cId;
        this.loadData();

        this.intervalOffline = setInterval(() => {
            this.loadData();
        }, 10000);
    },
    beforeDestroy() {
        if (this.intervalOffline) {
            clearInterval(this.intervalOffline);
        }
    },
    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: this.cId || 1
            }).then(ret => {
                let t = ret.today;
                let y = ret.yesterday;

                if (this.cId != 3) {
                    let formatData = {
                        pa: t.payAmount,
                        pc: t.payCount,
                        os: t.orderSingle,
                        ps: t.personSingle,
                        gs: t.goodsSingle,
                        gmr: t.grossMarginRate,
                        cr: t.conversionRate,
                        dp: t.dayPeople,
                        ru: t.registerUser,
                        nu: t.newUser,
                        ou: t.oldUser,
                        buyRate: t.buyRate,
                        paCompare: this.formatData(t.payAmount, y.payAmount),
                        pcCompare: this.formatData(t.payCount, y.payCount),
                        osCompare: this.formatData(t.orderSingle, y.orderSingle),
                        psCompare: this.formatData(t.personSingle, y.personSingle),
                        gsCompare: this.formatData(t.goodsSingle, y.goodsSingle),
                        gmrCompare: this.formatData(t.grossMarginRate, y.grossMarginRate),
                        crCompare: this.formatData(t.conversionRate, y.conversionRate),
                        dpCompare: this.formatData(t.dayPeople, y.dayPeople),
                        ruCompare: this.formatData(t.registerUser, y.registerUser),
                        nuCompare: this.formatData(t.newUser, y.newUser),
                        ouCompare: this.formatData(t.oldUser, y.oldUser),
                        buyRateCompare: this.formatData(t.buyRate, y.buyRate),
                    };

                    this.allData = [
                        {
                            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: this.fmoney(formatData.os),
                            compare: Math.abs(formatData.osCompare),
                            isDown: formatData.osCompare < 0
                        },
                        {
                            name: '客单价',
                            value: this.fmoney(formatData.ps),
                            compare: Math.abs(formatData.psCompare),
                            isDown: formatData.psCompare < 0
                        },
                        {
                            name: '货单价',
                            value: this.fmoney(formatData.gs),
                            compare: Math.abs(formatData.gsCompare),
                            isDown: formatData.gsCompare < 0
                        },
                        {
                            name: '毛利率',
                            value: (formatData.gmr * 100).toFixed(2) + '%' || '0%',
                            compare: Math.abs(formatData.gmrCompare),
                            isDown: formatData.gmrCompare < 0
                        },
                        {
                            name: '到店购买率',
                            value: (formatData.buyRate * 100).toFixed(2) + '%' || '0%',
                            compare: Math.abs(formatData.buyRateCompare),
                            isDown: formatData.buyRateCompare < 0
                        },
                        {
                            name: '转化率',
                            value: (formatData.cr * 100).toFixed(2) + '%' || '0%',
                            compare: Math.abs(formatData.crCompare),
                            isDown: formatData.crCompare < 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.nu || 0,
                            compare: Math.abs(formatData.nuCompare),
                            isDown: formatData.nuCompare < 0
                        },
                        {
                            name: '老客',
                            value: formatData.ou || 0,
                            compare: Math.abs(formatData.ouCompare),
                            isDown: formatData.ouCompare < 0
                        }
                    ];
                } else {
                    let formatData = {
                        pa: t.payAmount,
                        pc: t.payCount,
                        gc: t.greenCount,
                        ga: t.greenAmount,
                        cc: t.coffeeCount,
                        ca: t.coffeeAmount,
                        lc: t.littleCount,
                        la: t.littleAmount,
                        paCompare: this.formatData(t.payAmount, y.payAmount),
                        pcCompare: this.formatData(t.payCount, y.payCount),
                        gcCompare: this.formatData(t.greenCount, y.greenCount),
                        gaCompare: this.formatData(t.greenAmount, y.greenAmount),
                        ccCompare: this.formatData(t.coffeeCount, y.coffeeCount),
                        caCompare: this.formatData(t.coffeeAmount, y.coffeeAmount),
                        lcCompare: this.formatData(t.littleCount, y.littleCount),
                        laCompare: this.formatData(t.littleAmount, y.littleAmount)
                    };

                    this.allData = [
                        {
                            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: 'green订单',
                            value: formatData.gc || 0,
                            compare: Math.abs(formatData.gcCompare),
                            isDown: formatData.gcCompare < 0
                        },
                        {
                            name: 'green金额',
                            value: this.fmoney(formatData.ga),
                            compare: Math.abs(formatData.gaCompare),
                            isDown: formatData.gaCompare < 0
                        },
                        {
                            name: 'coffee订单',
                            value: formatData.cc || 0,
                            compare: Math.abs(formatData.ccCompare),
                            isDown: formatData.ccCompare < 0
                        },
                        {
                            name: 'coffee金额',
                            value: this.fmoney(formatData.ca),
                            compare: Math.abs(formatData.caCompare),
                            isDown: formatData.caCompare < 0
                        },
                        {
                            name: 'little订单',
                            value: formatData.lc || 0,
                            compare: Math.abs(formatData.lcCompare),
                            isDown: formatData.lcCompare < 0
                        },
                        {
                            name: 'little金额',
                            value: this.fmoney(formatData.la),
                            compare: Math.abs(formatData.laCompare),
                            isDown: formatData.laCompare < 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>