<!DOCTYPE HTML>
<html>
<head>
    {% set title = houseId?"修改新房房源":"添加新房房源" %}
    <meta charset="utf-8">
    <title>{{title}}</title>
</head>
<body>
<h2 class="title">{{title}}</h2>
<form action="" method="POST" enctype="multipart/form-data" id="newHouse">
    <div class="row">
        <div class="col-md-11">
            <div class="row">
                <div class="col-md-4">
                    <label for="housename">楼盘名:</label>
                    <input name="housename" id="housename" type="text" value="{{result.name}}" class="form-control" >
                </div>
                <div class="col-md-4">
                    <label for="mark">标签：</label>
                    <input name="mark" id="mark" type="text" value="{{mark}}" class="form-control">
                </div>
                <div class="col-md-4">
                    <label for="community_name">小区名:</label>
                    <input name="community_name" id="community_name" type="text" value="{{result.community_name}}"  class="form-control" >
                </div>
            </div><br>
            <div class="row">
                <div class="col-md-8">
                    <label for="address">地址:</label>
                    <input name="address" type="text" value="{{result.address}}" class="form-control">
                </div>
                <div class="col-md-4">
                    <label for="average_price">均价:</label>
                    <p>
                        <input name="average_price" id="average_price" type="text" value="{{result.average_price}}" class="form-control" style="width:80%;display: inline-block">元
                    </p>
                </div>
            </div><br>
            <div class="row">
                <div class="col-md-8">
                    <label for="latest_news">最新动态:</label>
                    <textarea name="latest_news" rows="4" cols="40" class="form-control" >{{result.latest_news}}</textarea>
                </div>
            </div><br>
            <h2 class="title">位置及周边</h2>

            <div class="row">
                <div class="col-md-4">
                    <label for="from">所属地区:</label>
                    <div class="row">
                        <div class="col-md-3">
                            <select id="baseCity" name="baseCity" class="required">
                                <option value="-1"> 城市</option>
                                {% for item in city %}
                                <option {{ item.id == result.city_id?"selected":"" }} value="{{ item.id }}">{{ item.value }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select id="baseAreaId" name="baseAreaId">
                                <option value = "-1">区域</option>
                                {% if district %}
                                {% for item in district %}
                                <option {{ item.id == result.district_id?"selected":"" }} value="{{ item.id }}">{{ item.value }}</option>
                                {% endfor %}
                                {% endif %}
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select id="basePlateId" name="basePlateId">
                                <option value = "-1">板块</option>
                                {% if district %}
                                {% for item in plate %}
                                <option {{ item.id == result.plate_id?"selected":"" }} value="{{ item.id }}">{{ item.value }}</option>
                                {% endfor %}
                                {% endif %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <th><label for="location">地域坐标:</label>
                    <td> <input name="location" id="location" type="text" value="{{result.location}}" class="form-control">
                </div>
                <div class="col-md-4">
                    <label for="traffic">交通线路:</label>
                    <input name="traffic" type="text" value="{{result.traffic}}" class="form-control">
                </div>
            </div><br>
            <div class="row">
                <div class="col-md-4">
                    <label for="periphery">周边配套:</label>
                    <input name="periphery" type="text" value="{{result.periphery}}" class="form-control">
                </div>
            </div><br>
            <h2 class="title">基本信息</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md-4">
                            <label for="developers">建筑类型:</label>
                            <select id="baseRoom" name="baseRoom">
                                {% for item in room %}
                                <option {{ item.id == result.room_id?"selected":"" }} value="{{ item.id }}">{{ item.value }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <label for="developers">开发商:</label>
                    <input name="developers" type="text" value="{{result.developer}}" class="form-control" >
                </div>
                <div class="col-md-4">
                    <label for="check_in_time">入住时间:</label>
                    <input name="check_in_time" id="checkin" type="text" value="{{result.check_in_time}}" class="form-control" >
                </div>
            </div><br>

            <div class="row">
                <div class="col-md-4">
                    <label for="property_age">产权年限:</label>
                    <input name="property_age" type="text" value="{{result.property_age}}" class="form-control" >
                </div>
                <div class="col-md-4">
                    <label for="decoration">装修状况:</label></th>
                    <input name="decoration" type="text" value="{{result.decoration}}" class="form-control">
                </div>
                <div class="col-md-4">
                    <label for="covered_area">建筑面积:</label></th>
                    <div class="row">
                        <div class="col-md-9">
                            <input name="covered_area" type="text" value="{{result.covered_area}}" class="form-control" >
                        </div>
                        <div class="col-md-3">
                            <font>平方米</font>
                        </div>
                    </div>
                </div>
            </div><br>
            <div class="row">
                <div class="col-md-4">
                    <label for="volume_rate">容积率:</label>
                    <input name="volume_rate" type="text" value="{{result.volume_rate}}" class="form-control">
                </div>
                <div class="col-md-4">
                    <label for="greening_rate">绿化率:</label>
                    <input name="greening_rate" type="text" value="{{result.greening_rate}}" class="form-control" >
                </div>
                <div class="col-md-4">
                    <label for="households">规划户数:</label>
                    <input name="households" type="text" value="{{result.households}}" class="form-control" >
                </div>
            </div><br>

            <div class="row">
                <div class="col-md-4">
                    <label for="parking_spaces">车位数:</label>
                    <input name="parking_spaces" type="text" value="{{result.parking_spaces}}" class="form-control" >
                </div>
                <div class="col-md-4">
                    <label for="property_management">物业公司:</label></th>
                    <input name="property_management" type="text" value="{{result.property_management}}" class="form-control" >
                </div>
                <div class="col-md-4">

                    <label for="property_money">物业费:</label>
                    <input name="property_money" type="text" value="{{result.property_money}}" class="form-control">
                </div>
            </div><br>
            <div class="row">
                <div class="col-md-6">
                    <label for="overview">楼盘概述:</label>
                    <textarea name="overview" rows="4" cols="40" class="form-control">{{result.overview}}</textarea>
                </div>
            </div><br>
            <h2 class="title">关联信息</h2>
                    <table class="form-table">
                        <tbody>
                        <tr>
                            <th><label for="mainHouse">主力户型</label></th>
                            <td>
                                <div id="preview">
                                    {% set exists_ids = "" %}
                                    {% for item in mainImage %}
                                    {% if exists_ids != "" %}
                                    {% set exists_ids = exists_ids~"," %}
                                    {% endif %}
                                    {% set exists_ids = exists_ids~item.id %}
                                        <div>
                                            <img src="{{siteUrl}}{{item.path}}" height="90" width="140" style="margin-right: 50px;margin-top:10px">
                                            <select name="exists[{{item.id}}][buildProperty]" style="margin-right: 50px">
                                                {% for i in buildProperty %}
                                                <option {{ i.id == item.buildproperty_id?"selected":"" }} value="{{i.id}}">{{i.value}}</option>
                                                {% endfor %}
                                            </select>
                                            <input type="text" placeholder="面积" name="exists[{{item.id}}][housearea]" class="form-control" value="{{item.area}}" style="width: 100px;display:inline-block; margin-right: 50px">
                                            <input type="button" value="取消" class="button action cancel existsCancel" style="margin-top: 30px">
                                        </div>
                                    {% endfor %}
                                    <p></p>
                                    <input type="hidden" name="exists_ids" value="{{exists_ids}}" >
                                    <input type="file" name="files[0]" property="0" class = "files"multiple class="browser button button-hero">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th><label>房源相册</label></th>
                            <td>
                                {% if houseId %}
                                <div class="row">
                                    <div class="col-md-3">
                                        <font>类型</font>
                                    </div>
                                    <div class="col-md-3">
                                        <font>相册</font>
                                    </div>
                                    <div class="col-md-3">
                                        <font>设为封面</font>
                                    </div>
                                </div>
                                {% endif %}
                                <div id="picList">
                                    {% set exists_photo_ids = "" %}
                                    {% for item in images %}
                                    {% if exists_photo_ids != "" %}
                                    {% set exists_photo_ids = exists_photo_ids~"," %}
                                    {% endif %}
                                    {% set exists_photo_ids = exists_photo_ids~item.image_id %}
                                        <div class="row">
                                            <div class="col-md-3">
                                                <select name="exists_photo[{{ item.image_id }}][type]" style="margin-right: 50px">
                                                    {% for i in photoType %}
                                                    <option {{ i.id == item.image_type?"selected":"" }} value="{{ i.id }}">{{ i.value }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <img src="{{siteUrl}}{{item.path}}" height="90" width="140"  style="margin-right: 50px">
                                            </div>
                                            <div class="col-md-3">
                                                <input type="radio" name="frontCover" style="margin-right: 50px" value="{{item.image_id}}" {{ result.frontCover_id == item.image_id?"checked":"" }} />
                                            </div>
                                            <div class="col-md-2">
                                                <input type="button" value="删除" class="button action cancel existsCancel">
                                            </div>
                                        </div>
                                    {% endfor %}
                                    <input type="hidden" name="exists_photo_ids" value="{{exists_photo_ids}}" >
                                </div>
                                <button type="button" id="housePicture" class="button action" data-toggle="modal" style="margin-top: 10px">
                                    新增
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <th><label for="traffic">推荐房源</label></th>
                            <td>
                                <div id="houseImg">
                                    {% for item in recommends %}
                                    <p>
                                        <img src="{{siteUrl}}{{item.path}}" height="90" width="140" style="margin-right: 50px">
                                        <input type="button" value="删除" class="button action imgCancel existsCancel">
                                        <input type="hidden" name="data[recommend][]" value="{{item.id}}">
                                    </p>
                                    {% endfor %}
                                </div><br />
                                <button type="button" class="button action" data-toggle="modal" data-target="#myModal" id="recHouseBt">
                                    添加房源
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <th><label for="periphery">置业顾问</label></th>
                            <td>
                                <div id="consultantImg">
                                    {% for item in consultant %}
                                    <p>
                                        <img src="{{item.imageUrl}}" height="90" width="140" style="margin-right: 50px">
                                        <span style="margin-right: 50px">{{item.name}}</span>
                                        <input type="button" value="删除" class="button action consultantCancel existsCancel">
                                        <input type="hidden" name="data[recConsultant][]" value="{{item.id}}">
                                    </p>
                                    {% endfor %}
                                </div><br />
                                <button type="button" class="button action" data-toggle="modal" data-target="#myConsultant" id="recConsultantBt">
                                    选择置业顾问
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
            <input type="text" name="type" value="1" hidden="hidden">
            {% if houseId %}
                <input type="text" name="houseId" value="{{houseId}}" hidden="hidden">
            {% endif %}
        </div>
        <div class = "col-md-1">
            <input type="submit" id="submit" class="button action"  style="position: fixed;">
            {% if role == 'administrator' %}
            <div  class="row" style="position: fixed;top:60px;">
                <select id="status" name="status">
                    {% for item in status %}
                    <option {{ item.id == searchStatus.id?"selected":"" }} value={{item.id}}>{{item.value}}</option>
                    {% endfor %}
                </select>
            </div>
            {% endif %}
        </div>
    </div>
</form>


<!-- 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">
                </select>
                <select id="areaId">
                    <option value = "-1">区域</option>
                </select>
                <select id="plateId">
                    <option value = "-1">板块</option>
                </select>
                <select id="price">
                    <option value = "-1">价格</option>
                </select>
                <select id="buildProperty">
                    <option value = "-1">房型</option>
                    {% for item in buildProperty %}
                    <option value="{{ item.id }}">{{ item.value }}</option>
                    {% endfor %}
                </select>
                <select id="room">
                    <option value = "-1">类型</option>
                    {% for item in room %}
                    <option value="{{ item.id }}">{{ item.value }}</option>
                    {% endfor %}
                </select>
                <select  id="acreage">
                    <option value = "-1">面积</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 class="modal fade" id="myConsultant" 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="consultCity">
                </select>
                <input type="text" placeholder="请出入置业顾问姓名搜索" id="consultantName" class="form-control">
                <button type="button" class="button action" id="searchConsult">搜索</button>
                <ul id="consultantList">
                </ul>
            </div>
        </div>
    </div>
</div>


<script>
    (function($){
        $(document).ready(function(){
            var titleFlag = 0;
            //主力房源中选择图片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);
                    }
                });
            });

            //根据上方选择的城市,选择推荐房源的默认城市
            $("#recHouseBt").click(function(){
                $('#cityId').find('option').remove();
                $('#areaId').find('option:not(:first-child)').remove();
                $('#plateId').find('option:not(:first-child)').remove();
                $('#price').find('option:not(:first-child)').remove();
                $('#acreage').find('option:not(:first-child)').remove();
                $("#houseList").find("li").remove();
                var acreage =$("#acreage");
                var price = $("#price");
                var cityId = $("#baseCity").val();
                var cityName = $("#baseCity").find("option:selected").text();
                var option = $("<option>").attr("value",cityId).append(cityName);
                $("#cityId").append(option);
                if(cityId != -1){
                    var area = $("#areaId");
                    $.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,acreage);
                        }
                    });
                    //城市联动房子价格
                    $.ajax({
                        type: "GET",
                        url: "/tospur/wp-admin/admin-ajax.php",
                        data: "action=searchUnitPriceRange&cityId="+cityId,
                        success:function(json){
                            addOption(json,price);
                        }
                    });
                    addList(0);
                }
            });

            //区域联动板块
            $("#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);
                    }
                });
            });

            //推荐房源下显示图片信息以及房名
            $("#areaId,#plateId,#buildProperty,#room,#acreage,#price").change(function(){
                addList(0);
            });

            //添加房源中搜索框的搜索
            $("#search").click(function(){
                $searchtext = $("#searchtext").val();
                $("#houseList").find("li").remove();
                $.ajax({
                    type: "post",
                    url: "/tospur/wp-admin/admin-ajax.php",
                    data: "action=searchHouse&searchText="+$searchtext,
                    success:function(json){
                        var result = json.result;
                        for(var i = 0; i < result.length; i++){
                            var name = result[i]["name"];
                            var id = result[i]['id'];
                            var imgUrl = json.images[id];
                            var img = $("<img>").attr({"src":imgUrl,"height":90,"width":140});
                            var li = $("<li>").addClass("addImg").append(img).append(name);
                            $("#houseList").append(li);
                        }
                    }
                });
            })

            //根据上方选择的城市,选择推荐置业顾问的默认城市
            $("#recConsultantBt").click(function(){
                $('#consultCity').find('option').remove();
                $("#consultantList").find("li").remove();
                var consulCityId = $("#baseCity").val();
                var consultantName =$("#consultantName").val();
                var cityName = $("#baseCity").find("option:selected").text();
                var option = $("<option>").attr("value",consulCityId).append(cityName);
                $("#consultCity").append(option);
                $.ajax({
                    type: "GET",
                    url: "/tospur/wp-admin/admin-ajax.php",
                    data: "action=searchConsultant&consulCityId="+consulCityId+"&consultantName="+consultantName,
                    success:function(json){
                        for(var i = 0; i <=json.length-1; i++){
                            var name = json[i]["consultantName"];
                            var imgUrl = json[i]["imageUrl"];
                            var img = $("<img>").attr({"src":imgUrl,"height":90,"width":140,"style":"margin-right:50px"});
                            var li = $("<li>").attr("id",json[i]["id"]).append(img).append(name).addClass("consultantImg");
                            $("#consultantList").append(li);
                        }
                    }
                });
            });

            //添加置业顾问弹出层中搜索框的搜索内容
            $("#searchConsult").click(function(){
                var consulCityId = $("#consultCity").val();
                var consultantName =$("#consultantName").val();
                $("#consultantList").find("li").remove();
                $.ajax({
                    type: "GET",
                    url: "/tospur/wp-admin/admin-ajax.php",
                    data: "action=searchConsultant&consulCityId="+consulCityId+"&consultantName="+consultantName,
                    success:function(json){
                        for(var i = 0; i <=json.length-1; i++){
                            var name = json[i]["consultantName"];
                            var imgUrl = json[i]["imageUrl"];
                            var img = $("<img>").attr({"src":imgUrl,"height":90,"width":140});
                            var li = $("<li>").attr("id",json[i]["id"]).append(img).append(name).addClass("consultantImg");
                            $("#consultantList").append(li);
                        }
                    }
                });
            })

            //点击添加房源中显示的列表，在界面中显示
            $("#houseList").on("click",".addImg",function(){
                var recommendHouse = $("<input>").attr({"type":"hidden","name":"data[recommend][]","value": $(this).attr("id")});
                var url = $(this).find("img").attr("src");
                var img = $("<img>").attr({"src":url,"height":90,"width":140,"style":"margin-right:50px"});
                var cancel = $("<input>").attr({"type":"button","value":"删除"}).addClass("button action imgCancel");
                var p = $("<p>").append(img).append(cancel).append(recommendHouse);
                $("#houseImg").append(p);
                controlCommand();
            });
            //添加置业顾问
            $("#consultantList").on("click",".consultantImg",function(){
                var url = $(this).find("img").attr("src");
                var img = $("<img>").attr({"src":url,"height":90,"width":140,"style":"margin-right:55px"});
                var recommendConsultant = $("<input>").attr({"type":"hidden","name":"data[recConsultant][]","value": $(this).attr("id")});
                var cancel = $("<input>").attr({"type":"button","value":"删除"}).addClass("button action consultantCancel");
                var font = $("<font>").attr("style","margin-right:50px").append( $(this).text());
                var p = $("<p>").append(img).append(font).append(cancel).append(recommendConsultant);
                $("#consultantImg").append(p);
            });

            //新增房源相册
            $("#housePicture").click(function(){
                var radio = $("<input>").attr({"type":"radio","name":"frontCover","value":i,});
                var picDelet = $("<input>").attr({"type":"button","value":"删除"}).addClass("button action existsCancel");
                var file = $("<input>").attr({"type":"file","name":"files["+i+"]"}).addClass("picFiles");
                var select = $("<select>").attr({"name":"data["+i+"][type]"});
                var dicRadio = $("<div>").append(radio).addClass("col-md-3");
                var dicPicDelet = $("<div>").append(picDelet).addClass("col-md-2");
                var dicFile = $("<div>").append(file).addClass("col-md-3");
                var dicSelect = $("<div>").append(select).addClass("col-md-3");
                var div = $("<div>").append(dicSelect).append(dicFile).append(dicRadio).append(dicPicDelet).addClass("row");
                {% for item in photoType %}
                    select.append($("<option>").attr("value",{{item.id}}).append('{{item.value}}'));
                {% endfor%}
                var fontA = $("<div>").append("<font>").append("设为封面").addClass("col-md-3");
                var fontB = $("<div>").append("<font>").append("类型").addClass("col-md-3");
                var fontC = $("<div>").append("<font>").append("相册").addClass("col-md-3");
                var titleP = $("<div>").append(fontB).append(fontC).append(fontA).addClass("row");
                $("#picList").append(div);
                var url = getUrlParmas();
                if(!url.id){
                    if( titleFlag== 0){
                        $("#picList").before(titleP);
                        titleFlag = 1
                    }
                }

                i++
            });

            //房源相册
            $("#picList").on("change",".picFiles",function(){
                readURL(this,2);
                $(this).hide();
            });

            //删除房源相册、推荐房源、推荐置业顾问
            $("#houseImg,#consultantImg").on("click",".imgCancel,.consultantCancel,.picDelet",function(){
                $(this).parents("p").remove();
            });
            $("#preview,#houseImg,#consultantImg").on("click",".existsCancel",function(){
                $(this).parent().remove();
            });

            $("#picList").on("click",".existsCancel",function(){
                $(this).parent().parent().remove();
            });

            $('#newHouse').validate({
                onkeyup: false,
                onfocusout: false,
                errorClass: "my-error-class",
                rules: {
                    housename:'required',
                    mark:'required',
                    community_name:'required',
                    address:'required',
                    average_price:'required',
                    latest_news:'required',
                    baseCity:{
                        selectcheck: true
                    },
                    baseAreaId:{
                        selectcheck: true
                    },
                    basePlateId:{
                        selectcheck: true
                    }

                },
                messages: {
                    housename:'请输入楼盘名称',
                    mark:'请输入标签',
                    community_name:'请输入小区名称',
                    address:'请输入地址',
                    average_price:'请输入均价',
                    latest_news:'请输入最新动态'
                },
                errorLabelContainer: "#notice",
                errorElement: 'div',
                submitHandler: function (form) {
                    if($("#preview div").length == 0 ){
                        alert("请选择主力户型");
                    }else if($("#consultantImg > p").length == 0){
                        alert("请选择置业顾问");
                    } else{
                        form.submit();
                    }
                }
            });
            jQuery.validator.addMethod('selectcheck', function (value) {
                return (value != '-1');
            },"请选择城市区域");

            //file上传之前，显示图片的方法
            function readURL(input,type) {
                if(type == 1){
                    if (input.files && input.files[0]){
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            var img = $("<img>").attr({"id":"target","src":e.target.result,"height":90,"width":140,"style":"margin-right:50px;margin-top:10px"});
                            var button = $("<input>").attr({"type":"button","value":"取消","property":+i,"id":+i}).addClass("button action cancel");
                            var type = $("<input>").attr({"type":"hidden","name":"data["+i+"][type]","value":4,"property":+i});
                            var mainHousePic = $("<input>").attr({"type":"hidden","name":"data["+i+"][mainHouse]","value":0,"property":+i});
                            var file = $("<input>").attr({"type":"file","name":"files["+(i+1)+"]","property":+(i+1)}).addClass("files");
                            var select = $("<select>").attr({"name":"data["+i+"][buildProperty]","style":"margin-right:50px"});
                            {% for item in buildProperty %}{{item.id}}
                                select.append($("<option>").attr("value",{{item.id}}).append('{{item.value}}'));
                            {% endfor%}
                            var areatext = $("<input>").attr({"type":"text","placeholder":"面积","name":"data["+i+"][housearea]","style":"width: 100px;display:inline-block;margin-right:50px"}).addClass("form-control");
                            var div = $("<div>").attr({"property":+i}).append(img).append(select).append(areatext).append(button).append(type).append(mainHousePic);
                            $("form").find("#preview > p").after(file);
                            $("#preview > p").append(div);
                            i++;
                        }
                    }
                }else{
                    if (input.files && input.files[0]){
                        var reader = new FileReader();
                        reader.onload = function (e){
                            var img = $("<img>").attr({"src":e.target.result,"height":90,"width":140});
                            $(input).before(img);
                        }
                    }
                }
                reader.readAsDataURL(input.files[0]);
            }
            function addOption(json,select){
                var selectId = select.attr("id");
                for(var i = 0; i <=json.length-1; i++){
                    var id = json[i]["id"];
                    var value = json[i]["value"];
                    if(selectId == "acreage" || selectId == "price"){
                        id = 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();
               }
            }



            function getUrlParmas(){
                var href = location.search.substr(1,location.search.length-1);
                var params = href.split("&");
                var map = {};
                for(item in params){
                    var key = params[item].split("=")[0] || "";
                    var value = params[item].split("=")[1] || "";
                    map[key] = value;
                }
                return map;
            }

            function addList($houseType){
                $("#houseList").find("li").remove();
                var cityId = $("#baseCity").val();
                var buildPropertyId = $("#buildProperty").val();
                var room = $("#room").val();
                var areaId = $("#areaId").val();
                var cityId = $("#cityId").val();
                var plateId = $("#plateId").val();
                var acreage = $("#acreage").val();
                var price = $("#price").val();
                $.ajax({
                    type: "post",
                    url: "/tospur/wp-admin/admin-ajax.php",
                    data: "action=searchHouse&cityId="+cityId+"&districtId="+areaId+"&plateId="+plateId+"&buildPropertyId="+buildPropertyId+"&roomId="+room+"&acreage="+acreage+"&totalPrice="+price+"&houseType="+$houseType,
                    success:function(json){
                        var result = json.result;
                        var urlParams = getUrlParmas();
                        for(var i = 0; i <result.length; i++){
                            var name = result[i]["name"];
                            var id = result[i]['id'];
                            var imgUrl = result[i]['path'];
                            var img = $("<img>").attr({"src":imgUrl,"height":90,"width":140,"style":"margin-right:50px"});
                            var li = $("<li>").attr("id",id).addClass("addImg").append(img).append(name);
                            if(urlParams["id"]){
                                if(urlParams["id"]!=id){
                                    $("#houseList").append(li);
                                }
                            }else{
                                $("#houseList").append(li);
                            }
                        }
                    }
                });
            }
        });
    })(jQuery);

</script>

</body>
</html>