{$layout}

<div class="right-box">
    <form class="ui form" action="/finance/logs">
        <div class="ui fields inline">
            <div class="ui field">
                <input type="text" :placeholder="t('finance_logs_index@用户名姓名描述')" name="keyword" v-model="keyword"/>
            </div>
            <div class="ui field">
                <b-select
                    name="eventType"
                    v-model="eventType"
                    :options="[
                        {label: `[${t('finance_logs_index@类型')}]`, value: ''},
                        ...events.map(event => ({
                            label: event.name,
                            value: event.code,
                        }))
                    ]"
                ></b-select>

                <!-- <select class="ui dropdown" name="eventType" v-model="eventType">
                    <option value="">[类型]</option>
                    <option v-for="event in events" :value="event.code">{{event.name}}</option>
                </select> -->
            </div>
            <div class="ui field">
                <button class="ui button" type="submit">{{t('finance_logs_index@搜索')}}</button>
                &nbsp;
                <a href="/finance/logs" v-if="keyword.length > 0 || eventType.length > 0">[{{t('finance_logs_index@清除条件')}}]</a>
            </div>
        </div>
    </form>
    <div class="margin"></div>
    <b-empty v-if="logs.length == 0">{{t('finance_logs_index@暂时还没有操作日志')}}</b-empty>

    <b-table
        v-if="logs.length > 0"
        :columns="[
            { title: t('finance_logs_index@用户'), key: 'user', scopedSlots: { customRender: 'userSlot' } },
            { title: t('finance_logs_index@操作类型'), key: 'event', scopedSlots: { customRender: 'eventSlot' }, width: '120px' },
            { title: t('finance_logs_index@操作金额'), dataIndex: 'delta', key: 'delta', scopedSlots: { customRender: 'deltaSlot' }, width: '100px' },
            { title: t('finance_logs_index@冻结金额'), dataIndex: 'deltaFrozen', key: 'deltaFrozen', scopedSlots: { customRender: 'deltaFrozenSlot' }, width: '100px' },
            { title: t('finance_logs_index@剩余余额'), dataIndex: 'total', key: 'total', scopedSlots: { customRender: 'totalSlot' }, width: '100px' },
            { title: t('finance_logs_index@剩余冻结余额'), dataIndex: 'totalFrozen', key: 'totalFrozen', scopedSlots: { customRender: 'totalFrozenSlot' }, width: '120px' },
            { title: t('finance_logs_index@时间'), dataIndex: 'createdTime', key: 'time', scopedSlots: { customRender: 'timeSlot' }, width: '120px' },
            { title: t('finance_logs_index@描述'), key: 'description', scopedSlots: { customRender: 'descriptionSlot' }, width: '200px' }
        ]"
        :data-source="logs"
        :row-key="'id'" 
        :pagination="false"
        size="middle"
    >
        <template slot="userSlot" slot-scope="{ text, record }">
            <a :href="'/finance/accounts/account?accountId=' + record.accountId"><user-link :v-user="record.user" :v-keyword="keyword"></user-link></a>
        </template>

        <template slot="eventSlot" slot-scope="{ text, record }">
            <span v-if="record.event != null">{{record.event.name}}</span>
            <span v-else class="disabled">{{t('finance_logs_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.deltaFormatted}}{{t('finance_logs_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_logs_index@元')}}</span>
            <span v-else class="disabled">0</span>
        </template>

        <template slot="totalSlot" slot-scope="{ text, record }">
            {{record.totalFormatted}}{{t('finance_logs_index@元')}}
        </template>

        <template slot="totalFrozenSlot" slot-scope="{ text, record }">
            <span :class="{disabled: record.totalFrozen == 0}">{{record.totalFrozen}}{{t('finance_logs_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 class="page" v-html="filterPageContent(page)"></div>
</div>