<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sptg="http://www.thymeleaf.org">
    <head>
        <script th:replace="common/head"></script>
    </head>
    <body style="margin: 10px">
        <div class="layui-card layui-fluid">
            <div class="layui-card-header layuiadmin-card-header-auto">
                <div style="width: 100%;height: 50px;display: flex;flex-direction: row">
<!--                    <div  style="width: 33%;height: 100%;display: flex;flex-direction: row">-->
<!--                        <div class="item right" >所属社区 :</div>-->
<!--                        <div class="item left" th:text="${bills.agencyName}"></div>-->
<!--                    </div>-->
                    <div  style="width: 33%;height: 100%;display: flex;flex-direction: row">
                        <div class="item right" >所属小区 :</div>
                        <div class="item left" th:text="${bills.residentialName}"></div>
                    </div>
                    <div  style="width: 33%;height: 100%;display: flex;flex-direction: row">
                        <div class="item right" >所属楼栋 :</div>
                        <div class="item left" th:text="${bills.buildingName}"></div>
                    </div>
                </div>
                <div style="width: 100%;height: 50px;display: flex;flex-direction: row">
<!--                    <div  style="width: 33%;height: 100%;display: flex;flex-direction: row">-->
<!--                        <div class="item right" >所属楼层 :</div>-->
<!--                        <div class="item left" th:text="${bills.floorName}"></div>-->
<!--                    </div>-->
                    <div  style="width: 33%;height: 100%;display: flex;flex-direction: row">
                        <div class="item right" >所属单元 :</div>
                        <div class="item left" th:text="${bills.unitName}"></div>
                    </div>
                    <div  style="width: 33%;height: 100%;display: flex;flex-direction: row">
                        <div class="item right" >所属房间 :</div>
                        <div class="item left" th:text="${bills.roomName}"></div>
                    </div>
                </div>
                <div style="width: 100%;height: 50px;display: flex;flex-direction: row">
                    <div  style="width: 33%;height: 100%;display: flex;flex-direction: row">
                        <div class="item right" >账单日期 :</div>
                        <div class="item left" th:text="${bills.billsDate}"></div>
                    </div>
                    <div  style="width: 33%;height: 100%;display: flex;flex-direction: row">
                        <div class="item right" >支付状态 :</div>
                        <div class="item left" th:class="${bills.status==1? 'red':'green'}" th:text="${bills.status==1? '未支付':'已支付'}"></div>
                    </div>
                    <div  style="width: 33%;height: 100%;display: flex;flex-direction: row">
                        <div class="item right" >合计费用 :</div>
                        <div class="item left" style="color: red" th:text="${bills.totalFee == null? 0 : bills.totalFee}+'￥'"></div>
                    </div>
                </div>
            </div>
            <div class="layui-card-body">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>缴费项名称</th>
                        <th>缴费金额</th>
                        <th>备注</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr  th:each="item : ${bills.itemList}">
                        <td th:text="${item.itemName}"></td>
                        <td th:text="${item.itemFee}+'￥'"></td>
                        <td th:text="${item.itemDesc==null? '无':item.itemDesc}"></td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>

    </body>
    <style>
        .item{
            font-size: 16px;
            height: 100%;
            line-height: 50px;
        }
        .right{
            width: 30%;
            text-align: right;
            color: gray;
        }
        .left{
            text-indent: 0.5em;
            width: 70%;
            text-align: left;
            font-style: italic;
        }
        .red{
            font-size: 16px;
            height: 100%;
            line-height: 50px;
            text-indent: 0.5em;
            width: 70%;
            text-align: left;
            font-style: italic;
            color: red;
        }
        .green{
            font-size: 16px;
            height: 100%;
            line-height: 50px;
            text-indent: 0.5em;
            width: 70%;
            text-align: left;
            font-style: italic;
            color: green;
        }
    </style>

</html>