<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>精准导购系统企业号应用</title>
    <link rel="stylesheet" href="/static/css/wechat/weui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/wechat/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="/static/css/wechat/style.css">
</head>
<body>
<header>
    <div class="header">
        <a href="javascript:backToUrl()" class="btn-a-back"><i class="iconfont">
            &#xe61f;</i></a>
        <h2>客户评价</h2>
    </div>
</header>

<input id="projectId" type="hidden" class="inputR" th:value="${projectId}"/>
<input id="projectName" type="hidden" class="inputR" th:value="${projectName}"/>
<input id="channel" type="hidden" class="inputR" th:value="${channel}"/>

<input id="cityCode" type="hidden" th:value="${user.city}">
<div class="weui-cells weui-cells_form mt0">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <input id="inProjectName" class="weui-textarea" th:text="${projectName}" th:placeholder="项目名称"/>
        </div>
    </div>
</div>

<!--弹出选择-->
<div class="weui-actionsheet" id="projectsSelect"></div>
</body>
<script type="text/html" id="projectsTemplate">

    <div class="weui-actionsheet__menu">
        {{each projects as project index}}
        <div class="weui-actionsheet__cell"
             filterValue="{{project.itemname}}@#{{project.listid}}@#{{project.channel_name}}@#{{project.channel}}">
            {{project.itemname}}({{project.channel_name}})
        </div>
        {{/each}}
    </div>
</script>

<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="/static/js/history.js"></script>
<script type="text/javascript" src="/static/js/template.js"></script>
<script type="text/javascript" src="/static/js/utils.js"></script>
<script>

    $(function () {
        var textarea = document.getElementById("inProjectName");

        if (textarea.addEventListener) {
            // all browsers except IE before version 9
            textarea.addEventListener("input", OnInput, false);
            // Google Chrome and  Safari
            textarea.addEventListener("textInput", OnTextInput, false);
            // Internet Explorer from version 9
            textarea.addEventListener("textinput", OnTextInput, false);
        }

        if (textarea.attachEvent) {
            textarea.attachEvent("onpropertychange", OnPropChanged);
        }

        // Google Chrome, Safari and Internet Explorer from version 9
        function OnTextInput(event) {
            getProjects($(this).val());
        }

        // Firefox, Google Chrome, Opera, Safari from version 5, Internet Explorer from version 9
        function OnInput(event) {
            getProjects($(this).val());
        }

        // Internet Explorer
        function OnPropChanged(event) {
            // 使用event.propertyName 过滤
            if (event.propertyName.toLowerCase() == "value") {
                getProjects($(this).val());
            }
        }
    });

    function getProjects(_projectName) {
        $.ajax({
            timeout: 1000,
            url: "/remoteJson/getJson",
            data: {
                url: "http://newapi.house365.com/projects/name",
                city: $("#cityCode").val() || "nj",
                limit: 20,
                name: _projectName,
                like: 1
            },
            type: "GET",
            dataType: "json",
            success: function (data, status) {
                $('.weui-actionsheet__cell').off();
                var html = template('projectsTemplate', {projects: data.data.list});
                $("#projectsSelect").html(html);

                var $selectFilter = $('#projectsSelect');
                $selectFilter.addClass('weui-actionsheet_toggle');
                //禁止列表滚动
                $("html,body").css({overflow: "hidden", height: '100%'});

                $('.weui-actionsheet__cell').on('click', function () {
                    var filterId = $(this).parents(".weui-actionsheet").attr("id");
                    var key = filterId.substring(0, filterId.indexOf("Select"));
                    var value = $(this).attr("filterValue");
                    var text = $(this).text();
                    $("#" + key + "Filter").val(value);
                    $("#" + key + "Text").html(text);

                    var histories = JSON.parse(sessionStorage.getItem("histories")) || [];
                    //去除栈顶最后入栈的历史记录
                    histories.pop();

                    var houses = value.split("@#");
                    $("#projectId").val(houses[1]);
                    $("#projectName").val(houses[0] + "(" + houses[2] + ")");
                    $("#channel").val(houses[3]);

                    window.location.href = "/user/evaluateUser?projectId=" + houses[1] + "&projectName=" + houses[0] + "(" + houses[2] + ")" + "&channel=" + houses[3];
                });
            },
            error: function () {
            }
        });
    }

    function hideActionSheet($this) {
        $this.removeClass('weui-actionsheet_toggle');
        //解除列表滚动
        $("html,body").css({overflow: "auto", height: '100%'});
    }
</script>
</html>