<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>添加新房房源</title>
</head>
<body>
<br><br>
<div><b><font size="5">添加新房房源</font></b></div><br>
<form action="" method="POST" enctype="multipart/form-data">
    <div>
        楼盘名：<input type="text" name="name" id="housename"><br><br>
        均价：<input type="text" name=" average_price"><br><br>
        最新动态：<textarea rows="3" cols="20" name="event"></textarea><br><br>
        <div id="preview">
        <span>主力户型:</span>
        <input type="file" name="files[]" property="-1" class = "files"multiple class="browser button button-hero">
        <P></P>
        </div>
        <br><br>
        位置及周边：<br><br>
        <p>
        <select id="baseCity" name="baseCity">
            <option value=""> 城市</option>
            {% for item in city %}
                <option value="{{ item.cityId }}">{{ item.cityName }}</option>
            {% endfor %}
        </select>
        <select id="baseAreaId" name="baseAreaId">
            <option value = "">区域</option>
        </select>
        <select id="basePlateId" name="basePlateId">
            <option value = "">板块</option>
        </select>
        <select id="baseRoom" name="baseRoom">
            <option value = "">建筑类型</option>
            {% for item in room %}
            <option value="{{ item.value }}">{{ item.literal }}</option>
            {% endfor %}
        </select>
        </p>
        地址：<input type="text" name=" address" class="regular-text"><br><br>
        交通线路:<input type="text" name=" traffic" class="regular-text"><br><br>
        周边配套:<input type="text" name=" periphery" class="regular-text"><br><br>
        基本信息：<br><br>
        开发商:<input type="text" name=" developers" class="regular-text"><br><br>
        入住时间:<input type="text" name=" check_in_time" id="checkin" class="regular-text"><br><br>
        产权年限：<input type="text" name=" property_age" class="regular-text"><br><br>
        装修状况：<input type="text" name=" decoration" class="regular-text"><br><br>
        建筑面积:<input type="text" name=" acreage" class="regular-text"><br><br>
        容积率:<input type="text" name=" volume_rate" class="regular-text"><br><br>
        绿化率:<input type="text" name=" greening_rate" class="regular-text"><br><br>
        规划户数:<input type="text" name=" households" class="regular-text"><br><br>
        车位数:<input type="text" name=" parking_spaces" class="regular-text"><br><br>
        物业公司:<input type="text" name=" property_management" class="regular-text"><br><br>
        物业费：<input type="text" name=" property_money" class="regular-text"><br><br>
        楼盘概述:<textarea rows="3" cols="20" name="overview" class="regular-text"></textarea>

        <input type="text" name="type" value="1" hidden="hidden">
    </div>
    <input type="submit" id="submit" class="button action">
</form>
<!-- Button trigger modal -->
推荐房源：<button type="button" class="button action" data-toggle="modal" data-target="#myModal">
    添加房源
</button>
<div id="houseImg"></div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-body" style="height: 300px;overflow: auto;">
                <select id="cityId">
                    <option value=""> 城市</option>
                    {% for item in city %}
                    <option value="{{ item.cityId }}">{{ item.cityName }}</option>
                    {% endfor %}
                </select>
                <select id="areaId">
                    <option value = "">区域</option>
                </select>
                <select id="plateId">
                    <option value = "">板块</option>
                </select>
                <select id="price">
                    <option value = "">价格</option>
                </select>
                <select id="buildproperty">
                    <option value = "">房型</option>
                    {% for item in buildproperty %}
                    <option value="{{ item.value }}">{{ item.literal }}</option>
                    {% endfor %}
                </select>
                <select id="room">
                    <option value = "">类型</option>
                    {% for item in room %}
                    <option value="{{ item.value }}">{{ item.literal }}</option>
                    {% endfor %}
                </select>
                <select  id="roomarea">
                    <option value = "">面积</option>
                </select>
                <input type="text" placeholder="请出入楼盘名/地段名搜索" id="searchtext">
                <button type="button" class="button action" id="search">搜索</button>
               <ul id="houseList">
               </ul>
            </div>
        </div>
    </div>
</div>

<div>
    房源相册：
    <div id="picList"></div>
    <div>
        <input type="button" value="新增" id="housePicture" class="button action">
    </div>
</div>

<script>
    (function($){
        $(document).ready(function(){

            //主力房源中选择图片file的下标
            var i = 0;

            //入住时间选择
            $("#checkin").datepicker({
                dateFormat: "yy-mm-dd"
            });
            //主力房源选择文件
            $("form").on("change",".files",function(){
                readURL(this,1);
                $(this).hide();
            });

            //主力房源中图片的删除功能
            $("form").on("click",".cancel",function(){
                $buttonid = $(this).attr("property");
                $("[property = "+$buttonid+"]").remove();
                $("form  input[type='file']:last-child").show();

            });
            //基本信息的联动AJAX
            $("#baseCity").change(function(){
                var cityId = $("#baseCity").val();
                var baserArea = $("#baseAreaId");
                $('#baseAreaId').find('option:not(:first-child)').remove();
                $('#basePlateId').find('option:not(:first-child)').remove();

                //城市联动区域
                $.ajax({
                    type: "GET",
                    url: "/tospur/wp-admin/admin-ajax.php",
                    data: "action=serachCity&cityId="+cityId,
                    success:function(json){
                        addOption(json,baserArea);
                    }
                });
            });
            //区域联动板块
            $("#baseAreaId").change(function(){
                var basePlate = $("#basePlateId");
                var areaId = $("#baseAreaId").val();
                var cityId = $("#baseCity").val();
                $('#basePlateId').find('option:not(:first-child)').remove();
                $.ajax({
                    type: "GET",
                    url: "/tospur/wp-admin/admin-ajax.php",
                    data: "action=serachCity&cityId="+cityId+"&districtId="+areaId,
                    success:function(json){
                        addOption(json,basePlate);
                    }
                });
            });


            //推荐房源的联动AJAX
            $("#cityId").change(function(){
                var cityId = $(this).val();
                var area = $("#areaId");
                var roomarea =$("#roomarea");
                var price = $("#price");
                $('#areaId').find('option:not(:first-child)').remove();
                $('#plateId').find('option:not(:first-child)').remove();
                $('#price').find('option:not(:first-child)').remove();
                $('#roomarea').find('option:not(:first-child)').remove();
                $("#houseList").find("li").remove();

                //城市联动区域
                $.ajax({
                    type: "GET",
                    url: "/tospur/wp-admin/admin-ajax.php",
                    data: "action=serachCity&cityId="+cityId,
                    success:function(json){
                        addOption(json,area);
                    }
                });
                //城市联动房子面积
                $.ajax({
                    type: "GET",
                    url: "/tospur/wp-admin/admin-ajax.php",
                    data: "action=searchArea&cityId="+cityId,
                    success:function(json){
                        addOption(json,roomarea);
                    }
                });
                //城市联动房子价格
                $.ajax({
                    type: "GET",
                    url: "/tospur/wp-admin/admin-ajax.php",
                    data: "action=searchUnitPriceRange&cityId="+cityId,
                    success:function(json){
                        addOption(json,price);
                    }
                });
            });

            //区域联动板块
            $("#areaId").change(function(){
                var areaId = $("#areaId").val();
                var cityId = $("#cityId").val();
                var plate = $("#plateId");
                $("#houseList").find("li").remove();
                $('#plateId').find('option:not(:first-child)').remove();
                $.ajax({
                    type: "GET",
                    url: "/tospur/wp-admin/admin-ajax.php",
                    data: "action=serachCity&cityId="+cityId+"&districtId="+areaId,
                    success:function(json){
                        addOption(json,plate);
                    }
                });
            });

            //推荐房源下显示图片信息以及房名
            $("#cityId,#areaId,#plateId,#buildproperty,#room,#roomarea,#price").change(function(){
                $("#houseList").find("li").remove();
                var buildpropertyId = $("#buildproperty").val();
                var room = $("#room").val();
                var areaId = $("#areaId").val();
                var cityId = $("#cityId").val();
                var plateId = $("#plateId").val();
                var area = $("#roomarea").find("option:selected").text();
                var price = $("#price").find("option:selected").text();
                $.ajax({
                        type: "GET",
                        url: "/tospur/wp-admin/admin-ajax.php",
                        data: "action=searchHouse&cityId="+cityId+"&districtId="+areaId+"&plateId="+plateId+"&buildpropertyId="+buildpropertyId+"&roomId="+room+"&acreage="+area+"&totalPrice="+price,
                        success:function(json){
                        for(
                            var i = 0; i <=json.length-1; i++){
                            var name = json[i]["name"];
                            var imgUrl = json[i]["path"];
                            var img = $("<img>").attr({"src":imgUrl,"height":100,"width":100});
                            var li = $("<li>").addClass("addImg").append(img).append(name);
                            $("#houseList").append(li);
                        }
                    }
                });
            });
            //添加房源中搜索框的搜索
            $("#search").click(function(){
                $searchtext = $("#searchtext").val();
                $("#houseList").find("li").remove();
                $.ajax({
                    type: "GET",
                    url: "/tospur/wp-admin/admin-ajax.php",
                    data: "action=searchHouse&searchtext="+$searchtext,
                    success:function(json){
                        for(var i = 0; i <=json.length-1; i++){
                            var name = json[i]["name"];
                            var imgUrl = json[i]["path"];
                            var img = $("<img>").attr({"src":imgUrl,"height":100,"width":100});
                            var li = $("<li>").addClass("addImg").append(img).append(name);
                            $("#houseList").append(li);
                        }
                    }
                });
            })

            //删除添加房源下的房源
            $("#houseList").on("click",".addImg",function(){
                var url = $(this).find("img").attr("src");
                var img = $("<img>").attr({"src":url,"height":100,"width":100});
                var cancel = $("<input>").attr({"type":"button","value":"删除"}).addClass("imgCancel");
                var p = $("<p>").addClass("imgClass").append(img).append(cancel);
                $("#houseImg").append(p);
                controlCommand();
            });

            $("#houseImg").on("click",".imgCancel",function(){
               $(this).parent("p").remove();
            });

            $("#housePicture").click(function(){
                var fileId = i;
                var picDelet = $("<font>").append("删除").addClass("picDelet");
                var file = $("<input>").attr({"type":"file","id":fileId}).addClass("picFiles");
                var select = $("<select>");
                var p = $("<p>").append(select).append(file).append(picDelet);
                $("#picList").append(p);
                i++;
            });

            $("#picList").on("change",".picFiles",function(){
                readURL(this,2);
                $(this).hide();
            });


            $("#submit").click(function(){
                if($("#housename").val()==""){
                    alert("请输入楼盘名");
                    return false;
                }
            });

            //file上传之前，显示图片的方法
            function readURL(input,type) {
                if(type == 1){
                    var index = i;
                    if (input.files && input.files[0]){
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            var img = $("<img>").attr({"id":"target","src":e.target.result,"heghit":100,"width":100});
                            var button = $("<input>").attr({"type":"button","value":"取消","property":+index-1,"id":+index}).addClass("cancel");
                            var option = $("<option>").attr({"value":""}).append("户型");
                            var file = $("<input>").attr({"type":"file","name":"files[]","property":+index}).addClass("files");
                            var select = $("<select>").attr({"id":"buildproperty","name":"data["+index+"][buildproperty]"}).append(option).addClass("regular-text");
                            var areatext = $("<input>").attr({"type":"text","placeholder":"面积","name":"data["+index+"][housearea]"}).addClass("regular-text");
                            var div = $("<div>").append(select).append(areatext).append(button);
                            var span = $("<span>").attr({"property":+index-1}).append(img).append(div);
                            $.ajax({
                                type: "GET",
                                url: "/tospur/wp-admin/admin-ajax.php",
                                data: "action=searchBuildProperty",
                                success:function(json){
                                    addOption(json,select)
                                }
                            });
                            $("form").find("#preview > p").before(file);
                            $("#preview > p").append(span);
                            i++;
                        }
                    }
                }else{
                    var picId = i;
                    if (input.files && input.files[0]){
                        var reader = new FileReader();
                        reader.onload = function (e){
                            var img = $("<img>").attr({"src":e.target.result,"heghit":100,"width":100,"id":picId});
                            $("#picList > p").find("input").before(img);
                        }
                    }
                }
                reader.readAsDataURL(input.files[0]);
            }


            function addOption(json,select){
                for(var i = 0; i <=json.length-1; i++){
                    var id = json[i]["id"];
                    var value = json[i]["value"];
                    var Option = $("<option>").attr({"value": id}).append(value);
                    select.append(Option);
                }
            }

            function controlCommand(){
                var num  = $("#houseImg > p").length;
               if(num>3){
                   alert("最多只能推荐3个房源");
                   $("#houseImg").find("p:last-child").remove();
               }
            }
        });
    })(jQuery);

</script>

</body>
</html>