<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

    <head>
        <meta charset="UTF-8">
        <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
              integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" rel="stylesheet">
        <script crossorigin="anonymous" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
                src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
        <title>账单信息</title>
    </head>

    <body>
        <form action="/thymeleaf/bill/1/30" class="row g-3" method="get">
            <div class="col">
                <input aria-label="收入/支出 输入 1或-1" class="form-control" name="type" placeholder="收入/支出 输入 1或-1" type="text">
            </div>
            <div class="col">
                <input aria-label="记录详情" class="form-control" name="description" placeholder="记录详情" type="text">
            </div>
            <!-- <div class="col"> -->
            <!--     <input aria-label="Last name" class="form-control" placeholder="Last name" type="text"> -->
            <!-- </div> -->
            <div class="col">
                <button class="btn btn-primary" type="submit">查询</button>
            </div>
        </form>

        <table class="table table-striped">
            <!-- 表头 -->
            <thead>
                <tr>
                    <th scope="col">序号</th>
                    <th scope="col">支出类型</th>
                    <th scope="col">交易金额</th>
                    <th scope="col">交易详情</th>
                    <th scope="col">交易时间</th>
                </tr>
            </thead>
            <tbody>
                <!-- 当数据为空 -->
                <tr th:if="${#lists.isEmpty(billList)}">
                    <td colspan="4">数据为空</td>
                </tr>

                <!-- 渲染数据 -->
                <tr th:each="bill,state : ${billList}" th:unless="${#lists.isEmpty(billList)}">
                    <th scope="row" th:text="${state.index + 1}">1</th>
                    <td th:class="${bill.type==-1 ? 'text-danger' : 'text-success'}" th:text="${bill.type==-1?'支出':'收入'}"></td>
                    <td th:text="'￥' + ${bill.amount}"></td>
                    <td th:text="${bill.description}"></td>
                    <td class="text-success" th:text="${#temporals.format(bill.transactionDate,'yyyy-MM-dd HH:mm:ss')}"></td>
                </tr>
            </tbody>
        </table>
    </body>
    <script>

    </script>
</html>