{$layout}
{$template "menu"}

<div class="right-box">
    <div class="config-section">
        <div class="section-title">{{t('finance_accounts_update@账户余额')}}</div>
        <div class="config-item">
            <div class="item-label">{{t('finance_accounts_index@余额')}}</div>
            <div class="item-content">{{account.total}}{{t('finance_accounts_index@元')}}</div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('finance_accounts_account_index@冻结')}}</div>
            <div class="item-content">{{account.totalFrozen}}{{t('finance_accounts_index@元')}} &nbsp; <tip-icon :content="t('finance_accounts_account_index@冻结后不能使用的余额')"></tip-icon></div>
        </div>
    </div>

    <div class="config-section">
        <div class="section-title">{{t('finance_accounts_account_index@最近收支明细')}}</div>
        <div style="padding: 10px;">
            <b-empty v-if="logs.length == 0">{{t('finance_accounts_account_index@暂时还没有操作日志')}}</b-empty>
            <b-table v-if="logs.length > 0" 
                :columns="[
                        { title: t('finance_accounts_account_index@操作类型'), key: 'event', scopedSlots: { customRender: 'eventSlot' } },
                        { title: t('finance_accounts_account_index@操作金额'), dataIndex: 'delta', key: 'delta', scopedSlots: { customRender: 'deltaSlot' } },
                        { title: t('finance_accounts_account_index@冻结金额'), dataIndex: 'deltaFrozen', key: 'deltaFrozen', scopedSlots: { customRender: 'deltaFrozenSlot' } },
                        { title: t('finance_accounts_account_index@剩余余额'), dataIndex: 'total', key: 'total', scopedSlots: { customRender: 'totalSlot' } },
                        { title: t('finance_accounts_account_index@剩余冻结余额'), dataIndex: 'totalFrozen', key: 'totalFrozen', scopedSlots: { customRender: 'totalFrozenSlot' } },
                        { title: t('finance_accounts_account_index@时间'), dataIndex: 'createdTime', key: 'time', scopedSlots: { customRender: 'timeSlot' } },
                        { title: t('finance_accounts_account_index@描述'), key: 'description', scopedSlots: { customRender: 'descriptionSlot' } }
                    ]" 
                    :data-source="logs" 
                    :row-key="'id'" 
                    :pagination="false" 
                    size="middle"
                    :loading="loading"
                    :loading-delay="1000"
                >
                <template slot="eventSlot" slot-scope="{ text, record }">
                    <span v-if="record.event != null">{{record.event.name}}</span>
                    <span v-else class="disabled">{{t('finance_accounts_account_index@其他')}}</span>
                </template>
                <template slot="deltaSlot" slot-scope="{ text, record }">
                    <span v-if="record.delta != 0"
                        :class="{red: record.delta < 0, green: record.delta > 0}">{{record.delta}}{{t('finance_accounts_index@元')}}</span>
                    <span v-else class="disabled">0</span>
                </template>
                <template slot="deltaFrozenSlot" slot-scope="{ text, record }">
                    <span v-if="record.deltaFrozen != 0">{{record.deltaFrozen}}{{t('finance_accounts_index@元')}}</span>
                    <span v-else class="disabled">0</span>
                </template>
                <template slot="totalSlot" slot-scope="{ text, record }">
                    {{record.total}}{{t('finance_accounts_index@元')}}
                </template>
                <template slot="totalFrozenSlot" slot-scope="{ text, record }">
                    <span :class="{disabled: record.totalFrozen == 0}">{{record.totalFrozen}}{{t('finance_accounts_index@元')}}</span>
                </template>
                <template slot="timeSlot" slot-scope="{ text, record }">
                    {{record.createdTime}}
                </template>
                <template slot="descriptionSlot" slot-scope="{ text, record }">
                    <span class="grey" v-if="record.description.length > 0">
                        <keyword :v-word="keyword">{{record.description}}</keyword>
                    </span>
                    <span v-else class="disabled">-</span>
                </template>
            </b-table>
        </div>
    </div>
</div>