
<!DOCTYPE HTML>
<html>
<head>
    {% set title = houseId?"修改二手房房源":"添加二手房房源" %}
    <meta charset="utf-8">
    <title>{{title}}</title>
    <script>
        var i = 0;
    </script>
</head>
<body>
<h2 class="title">{{title}}</h2>



<form action="" method="POST" enctype="multipart/form-data" id="secHouse" class="form-inline">
    <div class="row">
        <div class="col-md-11">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#info" aria-controls="info" role="tab" data-toggle="tab">楼盘情况</a></li>
                <li role="presentation"><a href="#weixin" aria-controls="weixin" role="tab" data-toggle="tab">微信营销</a></li>
                <li role="presentation"><a href="#business" aria-controls="business" role="tab" data-toggle="tab">业务信息</a></li>
                {% if not houseId %}
                    <li role="presentation"><a href="#owner" aria-controls="owner" role="tab" data-toggle="tab">业主信息</a></li>
                {% endif %}
                <li role="presentation"><a href="#photos" aria-controls="photos" role="tab" data-toggle="tab">房源相册</a></li>
                <li role="presentation"><a href="#recommend" aria-controls="recommend" role="tab" data-toggle="tab">推荐房源</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="info">
                    {% include 'houseInfo.html' %}
                </div>
                <div role="tabpanel" class="tab-pane" id="weixin">
                    {% include 'weixin.html' %}
                </div>
                <div role="tabpanel" class="tab-pane" id="business">
                    {% include 'business.html' %}
                </div>
                <div role="tabpanel" class="tab-pane" id="owner">
                    {% include 'owner.html' %}
                </div>
                <div role="tabpanel" class="tab-pane" id="photos">
                    {% include 'photos.html' %}
                </div>
                <div role="tabpanel" class="tab-pane" id="recommend">
                    {% include 'recommend.html' %}
                </div>
            </div>







                <h2 class="title">关联信息</h2>
                        <table class="form-table">
                            <tbody>
                                <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="feature">房源特色</label></th>
                                    <td>
                                        <div id="feature">
                                            {% for item in featureOld %}
                                            <p>
                                                <span style="margin-right:50px">{{ item.name }}</span>
                                                <input type="button" value="删除" class="button action featureCancel existsCancel">
                                                <input type="hidden" name="data[houseFeature][]" value="{{item.tag_id}}">
                                            </p>
                                            {% endfor %}
                                        </div><br/>
                                        <button type="button" class="button action" data-toggle="modal" data-target="#houseFeature" id="featureBt">
                                            添加特色
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <th><label for="periphery">置业顾问</label></th>
                                    <td>
                                        <div id="consultantImg">
                                            {% for item in consultant %}
                                            <p>
                                                <img src="{{item.imageUrl}}" height="100" width="100" 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>
                        <div>


                        </div>
                <input type="text" name="type" value="2" 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:50px;">
                <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">
                    <option value="-1"> 城市</option>
                    {% for item in city %}
                    <option value="{{ item.id }}">{{ item.value }}</option>
                    {% endfor %}
                </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" class="form-control">
                <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" class="form-control">
                <button type="button" class="button action" id="searchConsult">搜索</button>
                <ul id="consultantList">
                </ul>
            </div>
        </div>
    </div>
</div>
{% include 'addTag.html' %}
{{ block('addTag') }}



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

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

            //添加房源中搜索框的搜索
            $("#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,"style":"margin-right:50px"});
                            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":100,"width":100,"style":"margin-right:50px"});
                            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("houseImg",3,0);
            });
            //添加置业顾问
            $("#consultantList").on("click",".consultantImg",function(){
                var url = $(this).find("img").attr("src");
                var img = $("<img>").attr({"src":url,"height":100,"width":100,"style":"margin-right:50px"});
                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);
                controlCommand("consultantImg",1,1);
            });

            //显示选中的特色
            $("#featureTable").find("#featureList > div").click(function(){
                var houseFeature = $("<input>").attr({"type":"hidden","name":"data[houseFeature][]","value": $(this).attr("id")});
                var cancel = $("<input>").attr({"type":"button","value":"删除"}).addClass("button action featureCancel");
                var font = $("<font>").attr("style","margin-right:50px").append( $(this).text());
                var p =$("<p>").append(houseFeature).append(font).append(cancel);
                $("#feature").append(p);

            });

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

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

            $("input[id='keyCheck']").change(function(){
                textDisable("keyCheck","key");
            });
            $("input[id='garageCheck']").change(function(){
                textDisable("garageCheck","garage");
            });


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

                },
                messages: {
                    housename:'请输入房源名称',
                    mark:'请输入标签',
                    owner_name:'请输入业主姓名',
                    owner_phone:'请输入业主电话',
                    total_price:'请输入售价',
                    community_name:'请输入小区名称',
                    average_price:'请输入单价'
                },
                errorLabelContainer: "#notice",
                errorElement: 'div',
                submitHandler: function (form) {
                    if ($("#feature > p").length == 0){
                        alert("请选择房源特色");
                    }else if($("#consultantImg > p").length == 0 ){
                        alert("请选择置业顾问");
                    }else{
                        form.submit();
                    }
                }
            });
            jQuery.validator.addMethod('selectcheck', function (value) {
                return (value != '-1');
            },"请选择城市区域");
            $("form").find("select[name='faceto']").val("{{result.faceto}}");
            $("form").find("select[name='age']").val("{{result.age}}");
            $("form").find("select[name='propertyRight']").val("{{result.propertyRight}}");
            $("form").find("select[name='decoration']").val("{{result.decoration}}");
            $("form").find("select[name='source']").val("{{result.source}}");
            $("form").find("select[name='structure']").val("{{result.structure}}");
            $("form").find("select[name='roomNum']").val("{{result.roomNum}}");
            $("form").find("select[name='livingRoom']").val("{{result.livingRoom}}");
            $("form").find("select[name='bathRoom']").val("{{result.bathRoom}}");
            $("form").find("select[name='kitchen']").val("{{result.kitchen}}");
            $("form").find("select[name='balcony']").val("{{result.balcony}}");
            function textDisable(checkId,textId){
                if($('input[id="'+checkId+'"]:checked').length > 0){
                    $("#"+textId).removeAttr("disabled");
                }else{
                    $("#"+textId).attr("disabled","true");
                }
            }

            //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":140,"width":90,"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).addClass("row");
                            $("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,"heghit":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(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;
            }

            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>