
<!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="customerForm" class="form-inline">
    <div class="row">
        <div class="col-md-11">
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#customer" aria-controls="customer" role="tab" data-toggle="tab">客户信息</a>
                </li>
                <li role="presentation">
                    <a href="#demand" aria-controls="demand" role="tab" data-toggle="tab">需求信息</a>
                </li>
                <li role="presentation">
                    <a href="#house" aria-controls="house" role="tab" data-toggle="tab">详细需求</a>
                </li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="customer">
                    {% include 'customerInfo.html' %}
                </div>
                <div role="tabpanel" class="tab-pane" id="demand">
                    {% include 'customerDemand.html' %}
                </div>
                <div role="tabpanel" class="tab-pane" id="house">
                    {% include 'customerDetail.html' %}
                </div>
            </div>
            {% if houseId %}
            <label for="houseId" class="hidden"></label>
            <input type="hidden" name="houseId" id="houseId" value="{{ houseId }}">
            {% 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 == result.status?"selected":"" }} value={{ item.id }}>{{ item.value }}</option>
                    {% endfor %}
                </select>
            </div>
            {% endif %}
        </div>
    </div>
</form>

<!-- 置业顾问弹出层 -->
<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>

<script>
(function($){
    $(document).ready(function(){
        $("#check_in_time").datepicker({
            dateFormat: "yy-mm-dd"
        });
        //基本信息的联动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);
                }
            });
        });

        //根据上方选择的城市,选择推荐置业顾问的默认城市
        $("#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);
                    }
                }
            });
        });

        //添加置业顾问
        $("#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":"consultant_id","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);
        });

        //删除置业顾问
        $("#consultantImg").on("click",".imgCancel,.consultantCancel,.picDelet,.featureCancel",function(){
            $(this).parents("p").remove();
        });

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

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


        $('#customerForm').validate({
            onkeyup: false,
            onfocusout: false,
            errorClass: "my-error-class",
            rules: {
                name: 'required',
                phone: 'required',
                baseCity: {
                    min: 0
                },
                baseAreaId: {
                    min: 0
                },
                basePlateId: {
                    min: 0
                },
                status: {
                    min: 0
                }
            },
            messages: {
                name: '请输入姓名',
                phone: '请输入电话',
                baseCity: '请选择城市',
                baseAreaId: '请选择区域',
                basePlateId: '请选择板块',
                status: '请选择状态'
            },
            errorLabelContainer: "#notice",
            errorElement: 'div',
            submitHandler: function (form) {
                if ($("#consultantImg > p").length == 0) {
                    alert("请选择置业顾问");
                } else {
                    form.submit();
                }
            }
        });

        var json = {
            'character': '{{ result.character }}',
            'origin': '{{ result.origin }}',
            'payment_mode': '{{ result.payment_mode }}',
            'rent': '{{ result.rent }}',
            'tenancy': '{{ result.tenancy }}',
            'propertyRight': '{{ result.propertyRight }}',
            'decoration': '{{ result.decoration }}',
            'age': '{{ result.age }}',
            'faceto': '{{ result.faceto }}',
            'bedroom': '{{ result.bedroom }}',
            'hall': '{{ result.hall }}',
            'bathroom': '{{ result.bathroom }}'
        };
        revertOption(json);

        function revertOption(data) {
            $.each(data, function (i, item) {
                $("form").find("select[name='" + i + "']").val(item);
            });
        }

        function textDisable(checkId,textId){
            if($('input[id="'+checkId+'"]:checked').length > 0){
                $("#"+textId).removeAttr("disabled");
            }else{
                $("#"+textId).attr("disabled","true");
            }
        }

        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>