<!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">
    <table class="form-table">
        <tbody>
        <tr>
            <th><label for="housename">房源名：</label></th>
            <td> <input name="housename" id="housename" type="text" value="{{result.name}}" class="regular-text code" style="width: 150px;"></td>
        </tr>
        <tr>
            <th><label for="mark">标签：</label></th>
            <td> <input name="mark" id="mark" type="text" value="{{mark}}" class="regular-text code"></td>
        </tr>
        {% if not houseId %}
        <tr>
            <th><label for="owner_name">业主姓名</label></th>
            <td> <input name="owner_name" id="owner_name" type="text" value="" class="regular-text code" style="width: 150px;"></td>
        </tr>
        <tr>
            <th><label for="owner_phone">业主电话</label></th>
            <td> <input name="owner_phone" id="owner_phone" type="text" value="" class="regular-text code" style="width: 150px;"></td>
        </tr>
        {% endif %}
        <tr>
            <th><label for="rent">租金</label></th>
            <td> <input name="rent" id="rent" type="text" value="{{result.rent}}" class="regular-text code" style="width: 90px;"></td>
        </tr>

        </tbody>
    </table>
    <h2 class="title">基本信息</h2>
    <table class="form-table">
        <tbody>
        <tr>
            <th><label for="from">户型</label></th>
            <td>
                <select id="buildproperty_id" name="buildproperty_id">
                    <option value="-1"> 户型</option>
                    {% for item in buildProperty %}
                    <option {{ item.id == result.buildproperty_id?"selected":"" }} value="{{ item.id }}">{{ item.value }}</option>
                    {% endfor %}
                </select>
            </td>
        </tr>
        <tr>
            <th><label for="covered_area">面积</label></th>
            <td> <input name="covered_area" type="text" value="{{result.covered_area}}" class="regular-text code" style="width: 90px;"></td>
        </tr>
        <tr>
            <th><label for="floor">楼层：</label></th>
            <td> <input name="floor"  type="text" value="{{result.floor}}" class="regular-text code" style="width: 90px;"></td>
        </tr>
        <tr>
            <th><label for="faceto">朝向：</label></th>
            <td> <input name="faceto" type="text" value="{{result.faceto}}" class="regular-text code" style="width: 70px;"></td>
        </tr>
        <tr>
            <th><label for="decoration">装修状况</label></th>
            <td> <input name="decoration" type="text" value="{{result.decoration}}" class="regular-text code" style="width: 70px;"></td>
        </tr>
        <tr>
            <th><label for="age">建筑年代</label></th>
            <td> <input name="age" type="text" value="{{result.age}}" class="regular-text code" style="width: 70px;"></td>
        </tr>
        <tr>
            <th><label for="matching_facilities">配套设施</label></th>
            <td> <input name="matching_facilities" type="text" value="{{result.matching_facilities}}" class="regular-text code"></td>
        </tr>
        <tr>
            <th><label for="flat">楼号</label></th>
            <td> <input name="flat" type="text" value="{{result.flat}}" class="regular-text code"  style=" width: 50px;"></td>
        </tr>
        <tr>
            <th><label for="suite">室</label></th>
            <td> <input name="suite" type="text" value="{{result.suite}}" class="regular-text code"  style=" width: 50px;"></td>
        </tr>
        <tr>
            <th><label for="overview">房源点评</label></th>
            <td> <textarea name="overview" rows="4" cols="40" class="large-text code" style=" width: 400px;">{{result.overview}}</textarea></td>
        </tr>
        <tr>
            <th><label for="from">所属地区</label></th>
            <td>
                <select id="baseCity" name="baseCity">
                    <option value=""> 城市</option>
                    {% for item in city %}
                    <option {{ item.id == result.city_id?"selected":"" }} value="{{ item.id }}">{{ item.value }}</option>
                    {% endfor %}
                </select>
                <select id="baseAreaId" name="baseAreaId">
                    <option value = "">区域</option>
                    {% if district %}
                    {% for item in district %}
                    <option {{ item.id == result.district_id?"selected":"" }} value="{{ item.id }}">{{ item.value }}</option>
                    {% endfor %}
                    {% endif %}
                </select>
                <select id="basePlateId" name="basePlateId">
                    <option value = "">板块</option>
                    {% if district %}
                    {% for item in plate %}
                    <option {{ item.id == result.plate_id?"selected":"" }} value="{{ item.id }}">{{ item.value }}</option>
                    {% endfor %}
                    {% endif %}
                </select>
            </td>
        </tr>
        <tr>
            <th><label for="location">地域坐标</label></th>
            <td> <input name="location" id="location" type="text" value="{{result.location}}" class="regular-text code"></td>
        </tr>
        </tbody>
    </table>
    <h2 class="title">位置及周边</h2>
    <table class="form-table">
        <tbody>
        <tr>
            <th><label for="address">地址</label></th>
            <td> <input name="address" type="text" value="{{result.address}}" class="regular-text code"></td>
        </tr>
        <tr>
            <th><label for="address">小区名称</label></th>
            <td> <input name="community_name" type="text" value="{{result.community_name}}" class="regular-text code" style="width: 150px;"></td>
        </tr>
        <tr>
            <th><label for="traffic">交通线路</label></th>
            <td> <input name="traffic" type="text" value="{{result.traffic}}" class="regular-text code" style="width: 300px;"></td>
        </tr>
        <tr>
            <th><label for="periphery">周边配套</label></th>
            <td> <input name="periphery" type="text" value="{{result.periphery}}" class="regular-text code" ></td>
        </tr>
        </tbody>
    </table>

    <h2 class="title">关联信息</h2>
    <table class="form-table">
        <tbody>
        <tr>
            <th><label>房源相册</label></th>
            <td>
                <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 %}
                    <p>
                        <select name="exists_photo[{{ item.image_id }}][type]">
                            {% for i in photoType %}
                            <option {{ i.id == item.image_type?"selected":"" }} value="{{ i.id }}">{{ i.value }}</option>
                            {% endfor %}
                        </select>
                        <img src="{{siteUrl}}{{item.path}}" heghit="100" width="100">
                        <input type="button" value="取消" class="cancel existsCancel">
                    </p>
                    {% endfor %}
                    <input type="hidden" name="exists_photo_ids" value="{{exists_photo_ids}}" >
                </div><br />
                <button type="button" id="housePicture" class="button action" data-toggle="modal">
                    新增
                </button>
            </td>
        </tr>
        <tr>
            <th><label for="recommend">推荐房源</label></th>
            <td>
                <div id="houseImg"></div><br />
                <button type="button" class="button action" data-toggle="modal" data-target="#myModal" id="recHouseBt" >
                    添加房源
                </button>
            </td>
        </tr>
        <tr>
            <th><label for="consultant">置业顾问</label></th>
            <td>
                <div id="consultantImg">
                    {% for item in consultant %}
                    <p>
                        <span>{{item.name}}</span>
                        <input type="button" value="删除" class="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>
        {% if role == 'administrator' %}
        <tr>
            <th><label for="from">状态</label></th>
            <td>
                <select id="status" name="status">
                    {% for item in status %}
                    <option value={{item.status_id}}>{{item.status_name}}</option>
                    {% endfor %}
                </select>
            </td>
        </tr>
        {% endif %}
        </tbody>
    </table>
    <input type="text" name="type" value="3" hidden="hidden">
    {% if houseId %}
    <input type="text" name="houseId" value="{{houseId}}" hidden="hidden">
    {% endif %}
    <input type="submit" id="submit" class="button action">
</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">
                    <option value=""> 城市</option>
                    {% for item in city %}
                    <option value="{{ item.id }}">{{ item.value }}</option>
                    {% endfor %}
                </select>
                <input type="text" placeholder="请出入置业顾问姓名搜索" id="consultantName">
                <button type="button" class="button action" id="searchConsult">搜索</button>
                <ul id="consultantList">
                </ul>
            </div>
        </div>
    </div>
</div>


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

            //主力房源中选择图片file的下标
            var i = 0;
            //基本信息的联动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);
                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);
                    }
                });

                $.ajax({
                    type: "post",
                    url: "/tospur/wp-admin/admin-ajax.php",
                    data: "action=searchHouse&cityId="+cityId+"&houseType=2",
                    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":100,"width":100});
                            var li = $("<li>").attr("id",id).addClass("addImg").append(img).append(name);
                            $("#houseList").append(li);
                        }
                    }
                });
            });


            //区域联动板块
            $("#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(){
                $("#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 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=2",
                    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 = json.images[id];
                            var img = $("<img>").attr({"src":imgUrl,"height":100,"width":100});
                            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);
                            }
                        }
                    }
                });
            });

            //添加房源中搜索框的搜索
            $("#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":100,"width":100});
                            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":100,"width":100});
                            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":100,"width":100});
                            var li = $("<li>").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":100,"width":100});
                var cancel = $("<input>").attr({"type":"button","value":"删除"}).addClass("imgCancel");
                var p = $("<p>").append(img).append(cancel).append(recommendHouse);
                $("#houseImg").append(p);
                controlCommand("houseImg",3,0);
            });
            //添加置业顾问
            $("#consultantList").on("click",".consultantImg",function(){
                var recommendConsultant = $("<input>").attr({"type":"hidden","name":"data[recConsultant][]","value": $(this).attr("id")});
                var cancel = $("<input>").attr({"type":"button","value":"删除"}).addClass("consultantCancel");
                var font = $("<font>").append( $(this).text());
                var p = $("<p>").append(font).append(cancel).append(recommendConsultant);
                $("#consultantImg").append(p);
                controlCommand("consultantImg",1,1);
            });

            //新增房源相册
            $("#housePicture").click(function(){
                var picDelet = $("<font>").append("删除").addClass("picDelet");
                var file = $("<input>").attr({"type":"file","name":"files["+i+"]"}).addClass("picFiles");
                var select = $("<select>").attr("name","data["+i+"][type]");
                {% for item in photoType %}
                    select.append($("<option>").attr("value",{{item.id}}).append('{{item.value}}'));
                {% endfor%}
                var p = $("<p>").append(select).append(file).append(picDelet);
                $("#picList").append(p);
                i++
            });

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

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

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

            //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,"heghit":100,"width":100});
                            var button = $("<input>").attr({"type":"button","value":"取消","property":+i,"id":+i}).addClass("cancel");
                            var type = $("<input>").attr({"type":"hidden","name":"data["+i+"][type]","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]"});
                            {% 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]"}).addClass("regular-text");
                            var div = $("<div>").append(select).append(areatext).append(button).append(type);
                            var span = $("<span>").attr({"property":+i}).append(img).append(div);
                            $("form").find("#preview > p").before(file);
                            $("#preview > p").append(span);
                            i++;
                        }
                    }
                }else{
                    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});
                            $(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(id,number,type){
                var num  = $("#"+id+" > p").length;
                if(num>number){
                    if(type==0){
                        alert("最多只能推荐3个房源");
                    }else if(type==1){
                        alert("您只能推荐一位置业顾问");
                    }
                    $("#"+id).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;
            }
            $("#picList,#houseImg,#consultantImg").on("click",".existsCancel",function(){
                $(this).parent().remove();
            });

        });
    })(jQuery);

</script>

</body>
</html>