<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script th:replace="common/head"></script>
</head>
<body>
<!--<input type="hidden" name="selectTreeId" id="selectTreeId" th:value="${selectTreeId}" />-->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body" pad15>
                    <div class="layui-form" lay-filter="">
                        <div class="layui-form-item">
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <label class="layui-form-label">缴费日期</label>
                                <div class="layui-input-block">
                                    <input id="dateSelector" placeholder="请选择账单日期"  class="layui-input" name="billsDate">
                                    <input id="dateSelector1" type="hidden">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                                <label class="layui-form-label"><span class="must">*</span>支付状态</label>
                                <div class="layui-input-block">
                                    <select id="status" name="status">
                                        <option></option>
                                        <option value="1">未支付</option>
                                        <option value="2">已支付</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-form">
                                <label class="layui-form-label"><span class="must">*</span>总费用</label>
                                <div class="layui-input-inline">
                                    <input id="total_fee" name="totalFee" type="number" placeholder="请输入总费用"  class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-form" lay-filter="residential_filter">
                                <label class="layui-form-label"><span class="must">*</span>所属小区</label>
                                <div class="layui-input-inline">
                                    <div id="residential_id"></div>
                                </div>
                            </div>

                            <div class="layui-form" lay-filter="unit_filter">
                                <label class="layui-form-label"><span class="must">*</span>所属楼栋</label>
                                <div class="layui-input-inline">
                                    <div id="building_id"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-form" lay-filter="unit_filter">
                                <label class="layui-form-label"><span class="must">*</span>所属单元</label>
                                <div class="layui-input-inline">
                                    <div id="unit_id"></div>
                                </div>
                            </div>

                            <div class="layui-form" lay-filter="room_filter">
                                <label class="layui-form-label"><span class="must">*</span>所属房间</label>
                                <div class="layui-input-inline">
                                    <div id="room_id"></div>
                                </div>
                            </div>
                        </div>

                        <table style="width: 100%;margin-top: 40px;margin-bottom: 20px;border-radius: 1px" border="1" >
                            <tr style="background: rgb(135,226,225);height: 45px;font-size: 18px">
                                <th style="width: 20%">缴费项</th>
                                <th style="width: 20%">缴费金额</th>
                                <th style="width: 30%">备注</th>
<!--                                <th style="width: 10%">操作</th>-->
                            </tr>
                            <tr style="text-align: center;height: 50px;">
                                <td style="padding-left:20px"><input  class="full"  type="text" name="itemName" id="item_name"  placeholder="请输入缴费项名称"></td>
                                <td style="padding-left:20px"><input  class="full"  type="number" name="itemFee" id="item_fee"  placeholder="缴费金额" ></td>
                                <td style="padding-left:20px"><input  class="full" type="text" name="itemDesc" id="item_desc"  placeholder="缴费说明"></td>
<!--                                <td><div class="layui-btn  layui-btn-xs" >添加</div></td>-->
                            </tr>
                        </table>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" type="button" lay-submit lay-filter="submit_add">提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary" id="cancel_btn">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- javascript -->
<!--去掉input type="number"后面的箭头-->
<style type="text/css">
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"] {
        -moz-appearance: textfield;
    }
</style>

<script type="text/javascript" th:src="@{'/layui/layui.js'}"></script>
<script type="text/javascript">
    layui.config({
        base: '/' //静态资源所在路径
    });
</script>
<script type="text/javascript" th:src="@{'/js/estate/bills-add.js'}"></script>
</body>
</html>
