{$layout}

<form class="ui form" action="/finance/logs">
    <div class="ui fields inline">
        <div class="ui field">
            <input type="text" placeholder="用户名、姓名、描述" name="keyword" v-model="keyword"/>
        </div>
        <div class="ui field">
            <b-select
                name="eventType"
                v-model="eventType"
                :options="[
                    {label: '[类型]', 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">搜索</button>
            &nbsp;
            <a href="/finance/logs" v-if="keyword.length > 0 || eventType.length > 0">[清除条件]</a>
        </div>
    </div>
</form>

<b-empty v-if="logs.length == 0">暂时还没有操作日志。</b-empty>

<table class="ui table selectable celled" v-if="logs.length > 0">
    <thead>
        <tr>
            <th class="two wide">用户</th>
            <th class="two wide">操作类型</th>
            <th class="two wide">操作金额</th>
            <th class="two wide">冻结金额</th>
            <th class="two wide">剩余余额</th>
            <th class="two wide">剩余冻结余额</th>
            <th class="three wide">时间</th>
        </tr>
    </thead>
    <tbody v-for="log in logs">
        <tr>
            <td>
                <a :href="'/finance/accounts/account?accountId=' + log.accountId"><user-link :v-user="log.user" :v-keyword="keyword"></user-link></a>
            </td>
            <td>
                <span v-if="log.event != null">{{log.event.name}}</span>
                <span v-else class="disabled">其他</span>
            </td>
            <td>
                <span v-if="log.delta != 0" :class="{red: log.delta < 0, green: log.delta > 0}">{{log.deltaFormatted}}元</span>
                <span v-else class="disabled">0</span>
            </td>
            <td>
                <span v-if="log.deltaFrozen != 0">{{log.deltaFrozen}}元</span>
                <span v-else class="disabled">0</span>
            </td>
            <td>{{log.totalFormatted}}元</td>
            <td><span :class="{disabled: log.totalFrozen == 0}">{{log.totalFrozen}}元</span></td>
            <td>{{log.createdTime}}</td>
        </tr>
        <tr v-if="log.description.length > 0">
            <td colspan="10">
                <span class="grey">描述：<keyword :v-word="keyword">{{log.description}}</keyword></span>
            </td>
        </tr>
    </tbody>
</table>

<div class="page" v-html="filterPageContent(page)"></div>