<!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>
            <tr>
                <th><label for="community_name">小区名</label></th>
                <td> <input name="community_name" id="community_name" type="text" value="{{result.community_name}}"  style="width: 150px;" class="regular-text code" ></td>
            </tr>
            <tr>
                <th><label for="average_price">均价</label></th>
                <td> <input name="average_price" id="average_price" type="text" value="{{result.average_price}}" class="regular-text code" style="width: 90px;"></td>
            </tr>
            <tr>
                <th><label for="latest_news">最新动态</label></th>
                <td><textarea name="latest_news" rows="4" cols="40" class="large-text code" style="width: 400px;">{{result.latest_news}}</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>
            <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}}" heghit="100" width="100"><br />
                                <select name="exists[{{item.id}}][buildProperty]">
                                    {% 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="regular-text" value="{{item.area}}">
                                <input type="button" value="取消" class="cancel existsCancel">
                            </div>
                        {% endfor %}
                        <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">
                        <P></P>
                    </div>
                </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="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" style="width: 300px;"></td>
            </tr>
        </tbody>
    </table>
    <h2 class="title">基本信息</h2>
    <table class="form-table">
        <tbody>
            <tr>
                <th><label for="developers">建筑类型</label></th>
                <td>
                    <select id="baseRoom" name="baseRoom">
                        {% for item in room %}
                        <option {{ item.id == result.room_id?"selected":"" }} value="{{ item.id }}">{{ item.value }}</option>
                        {% endfor %}
                    </select>
                </td>
            </tr>
            <tr>
                <th><label for="developers">开发商</label></th>
                <td> <input name="developers" type="text" value="{{result.developer}}" class="regular-text code" style="width: 150px;"></td>
            </tr>
            <tr>
                <th><label for="check_in_time">入住时间</label></th>
                <td> <input name="check_in_time" id="checkin" type="text" value="{{result.check_in_time}}" class="regular-text code" style="width: 150px;"></td>
            </tr>
            <tr>
                <th><label for="property_age">产权年限</label></th>
                <td> <input name="property_age" type="text" value="{{result.property_age}}" class="regular-text code" style="width: 90px;"></td>
            </tr>
            <tr>
                <th><label for="decoration">装修状况</label></th>
                <td> <input name="decoration" type="text" value="{{result.decoration}}" class="regular-text code"style="width: 90px;"></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="volume_rate">容积率</label></th>
                <td> <input name="volume_rate" type="text" value="{{result.volume_rate}}" class="regular-text code" style="width: 50px;"></td>
            </tr>
            <tr>
                <th><label for="greening_rate">绿化率</label></th>
                <td> <input name="greening_rate" type="text" value="{{result.greening_rate}}" class="regular-text code" style="width: 50px;"></td>
            </tr>
            <tr>
                <th><label for="households">规划户数</label></th>
                <td> <input name="households" type="text" value="{{result.households}}" class="regular-text code" style="width: 50px;"></td>
            </tr>
            <tr>
                <th><label for="parking_spaces">车位数</label></th>
                <td> <input name="parking_spaces" type="text" value="{{result.parking_spaces}}" class="regular-text code" style="width: 50px;"></td>
            </tr>
            <tr>
                <th><label for="property_management">物业公司</label></th>
                <td> <input name="property_management" type="text" value="{{result.property_management}}" class="regular-text code" style="width: 150px;"></td>
            </tr>
            <tr>
                <th><label for="property_money">物业费</label></th>
                <td> <input name="property_money" type="text" value="{{result.property_money}}" 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>
        </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="traffic">推荐房源</label></th>
                <td>
                    <div id="houseImg">
                        {% for item in recommends %}
                            <p>
                                <img src="{{siteUrl}}{{item.path}}" height="100" width="100">
                                <input type="button" value="删除" class="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>
                                <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="1" 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">
                </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;
            //入住时间选择
            $("#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);
                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=0",
                    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=0",
                        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);
                        }
                    }
                });
            });

            //添加房源中搜索框的搜索
            $("#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();
            });
            //添加置业顾问
            $("#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);
            });

            //新增房源相册
            $("#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":4,"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(){
                var num  = $("#houseImg > p").length;
               if(num>3){
                   alert("最多只能推荐3个房源");
                   $("#houseImg").find("p:last-child").remove();
               }
            }

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

</script>

</body>
</html>