{$layout}

<div class="right-box">
    <first-menu>
        <menu-item href="/finance/income/monthly">{{t('finance_income_menu@按月统计')}}</menu-item>
        <menu-item :href="'/finance/income/daily?month=' + month" class="active">{{month}}</menu-item>
    </first-menu>
    <div class="margin"></div>

    <b-table
        v-if="stats.length > 0"
        :columns="[
            { title: t('finance_income_index@日期'), dataIndex: 'day', key: 'day', scopedSlots: { customRender: 'daySlot' } },
            { title: t('finance_income_index@收入'), dataIndex: 'income', key: 'income', scopedSlots: { customRender: 'incomeSlot' } },
            { title: t('finance_income_index@支出'), dataIndex: 'expense', key: 'expense', scopedSlots: { customRender: 'expenseSlot' } }
        ]"
        :data-source="stats"
        :row-key="'day'"
        :pagination="false"
        size="middle"
    >
        <template slot="daySlot" slot-scope="{ text, record }">
            {{record.day}}
        </template>
        <template slot="incomeSlot" slot-scope="{ text, record }">
            <span v-if="record.income > 0">{{record.income}}{{t('finance_income_index@元')}}</span>
            <span v-else class="disabled">-</span>
        </template>
         <template slot="expenseSlot" slot-scope="{ text, record }">
            <span v-if="record.expense > 0">-{{record.expense}}{{t('finance_income_index@元')}}</span>
            <span v-else class="disabled">-</span>
        </template>
    </b-table>
</div>