<style>
    div.col-md-4 {
        margin-bottom: 10px;
        height: 28px;
    }
    input[type=radio] {
        margin: 0 4px 0 0;
    }
</style>
<div class="wrap">
    <h2>合同列表</h2>
    <form method="GET" class="form-inline" id="scores-filter">
        <div class="row" style="margin-top: 10px">
            <div class="col-md-8">
                <label>查询类型:</label>
                <input type="radio" name="search_type" value="0" checked>不限
                <input type="radio" name="search_type" value="search_contractId">合同编号
                <input type="radio" name="search_type" value="search_signedDate">签约日期
                <input type="radio" name="search_type" value="search_OCname">业主/客户姓名
                <input type="radio" name="search_type" value="search_OCbroker">买/卖方经纪人
            </div>
        </div>
        <div class="row" style="margin-top: 10px">
            <div id="search_type_0" style="display: none;" class="col-md-8">
                <label for="contractId">合同编号:</label>
                <input type="text" name="search_contractId"  class="form-control">
            </div>
            <div id="search_type_1" style="display: none;" class="col-md-8">
                <label for="signedDate">签约日期:</label>
                <input type="date" name="beginDate" class="form-control"> -
                <input type="date" name="endDate" class="form-control">
            </div>
            <div id="search_type_2" style="display: none;" class="col-md-8">
                <label for="signedDate">业主/客户姓名:</label>
                <input type="text" name="search_OCname" class="form-control">
            </div>
            <div id="search_type_3" style="display: none;" class="col-md-8">
                <label for="signedDate">买/卖方经纪人:</label>
                <input type="text" name="search_OCbroker" class="form-control">
            </div>
        </div>
        <div class="row" style="margin-top: 10px;margin-left: 0px">
            <input type="submit" id="submit" class="button action" value="搜索">
            <input type="button" id="reset"class="button action" value="重置">
        </div>
        <input type="hidden" name="page" value="contractList"/>
    </form>
    {{function("Contract_List::displayTable")}}
</div>
<script>
    $(document).ready(function(){
        var search_type_0 = $('#search_type_0');
        var search_type_1 = $('#search_type_1');
        var search_type_2 = $('#search_type_2');
        var search_type_3 = $('#search_type_3');

        $('input[name=search_type]').change(function () {
            var value = $(this).val();
            switch (value) {
                case 'search_contractId':
                    search_type_0.show();
                    search_type_1.hide();
                    search_type_2.hide();
                    search_type_3.hide();
                    break;
                case 'search_signedDate':
                    search_type_0.hide();
                    search_type_1.show();
                    search_type_2.hide();
                    search_type_3.hide();
                    break;
                case 'search_OCname':
                    search_type_0.hide();
                    search_type_1.hide();
                    search_type_2.show();
                    search_type_3.hide();
                    break;
                case 'search_OCbroker':
                    search_type_0.hide();
                    search_type_1.hide();
                    search_type_2.hide();
                    search_type_3.show();
                    break;
                default:
                    search_type_0.hide();
                    search_type_1.hide();
                    search_type_2.hide();
                    search_type_3.hide();
                    break;
            }
        });

        $("#reset").click(function(){
            window.location.href="?page=contractList";
        });
    });
</script>