<!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">
    <link rel="stylesheet" href="/static/css/wechat/tag.css">
</head>

<style>
    body{
        /*padding-bottom: 5rem;*/
    }
    .btn-modify-my {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        height:2.3rem;
    }

    .btn-modify-my-a{
        display: block;
        width:100%;
        height:2.3rem;
        line-height:2.3rem;
        text-align: center;
        background-color: #4284D9;
        font-size: 18px;
        color: #fff;
    }
    </style>

<body ontouchstart>
<header>
    <div class="header">
        <a href="/customer/sea" class="btn-a-back" th:href="@{/customer/myCustomers}"><i class="iconfont">&#xe61f;</i></a>
        <h2>查询条件</h2>
    </div>
</header>

<form id="queryForm" action="/customer/myCustomerList" th:action="@{/customer/myCustomerList}" method="get">
    <div style="padding-bottom:3rem">
    <input type="hidden" id="labelId" name="labelId" value="" />
    <div class="weui-cells weui-cells_form mt0">

        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label for="" class="weui-label">开始时间</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="date" value="2017年3月3日" name="startDate" id="startDate"
                       th:value="${(param.startDate==null)?'':param.startDate[0]}"/>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label for="" class="weui-label">结束时间</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="date" value="2017年3月3日" name="endDate" id="endDate"
                       th:value="${(param.endDate==null)?'':param.endDate[0]}"/>
            </div>
        </div>

        <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
                <label for="" class="weui-label">购房意向</label>
            </div>
            <div class="weui-cell__bd">
                <select class="weui-select" name="buyIntention">
                    <option value="">全部</option>
                    <option value="99">待定</option>
                    <option value="1">A</option>
                    <option value="2">B</option>
                    <option value="3">C</option>
                    <option value="4">D</option>
                    <option value="5">E</option>
                </select>
            </div>
        </div>

        <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
                <label for="" class="weui-label">跟踪状态</label>
            </div>
            <div class="weui-cell__bd">
                <select class="weui-select" name="traceStatus">
                    <option value="">全部</option>
                    <option value="1">有效</option>
                    <option value="2">已购</option>
                    <option value="3">我购</option>
                    <option value="4">暂缓</option>
                </select>
            </div>
        </div>

        <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
                <label for="" class="weui-label">客户状态</label>
            </div>
            <div class="weui-cell__bd">
                <select class="weui-select" name="projectStatus">
                    <option value="">全部</option>
                    <option value="1">约看</option>
                    <option value="2">到访</option>
                    <option value="3">认筹</option>
                    <option value="4">认购</option>
                    <option value="5">签约</option>
                    <option value="6">退房</option>
                </select>
            </div>
        </div>

        <!-- 客户标签 -->
        <div class="weui-cell weui-cell_select weui-cell_select-after">
            <!--<div class="weui-cell__hd">-->
                <!---->
            <!--</div>-->
            <div class="all-tag bor-t">
                <label for="" class="weui-label">客户标签</label>
                <div class="center" >
                        <!--<c:if >-->
                    <span th:each="label: ${labelList}" class="all-tag-item gray" th:data="${label.colorId}" th:attr="dataIndex=${label.labelId}" th:content="${label.labelId}"><p th:text="${label.labelName}"></p></span>
                        <!--</c:if>-->
                </div>
            </div>
            <div class="">
                <div class="center">
                </div>
            </div>
        </div>
    </div>

    <div class="btn-modify-my">
        <a class="btn-modify-my-a" href="javascript:queryForm();">查询</a>
    </div>
    </div>
</form>


<div id="dialogs">
    <!--BEGIN dialog1-->
    <div class="js_dialog" id="iosDialog1" style="opacity: 0; display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__hd"><strong class="weui-dialog__title">提示</strong></div>
            <div class="weui-dialog__bd" id="alertContent"></div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确认</a>
            </div>
        </div>
    </div>
    <!--END dialog1-->
</div>

<div id="loadingToast" style="opacity: 0; display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-icon_toast"></i>
        <p class="weui-toast__content" id="toastContent"></p>
    </div>
</div>

<script type="text/javascript" src="/static/js/wechat/zepto.min.js"></script>
<script type="text/javascript" src="/static/js/statistics.js"></script>
<script type="text/javascript" src="/static/js/jquery.charfirst.pinyin.js"></script>
<script type="text/javascript" src="/static/js/sort.js"></script>

<script language="JavaScript">

    $(function () {
        var tags = document.getElementsByClassName("all-tag-item");
        if(tags != undefined && tags != ''){
            for(var i=0;i<tags.length;i++){
                var value = tags[i].attributes.data.value;
                if(value == 2){
                    tags[i].className = "all-tag-item red"
                }
                if(value == 3){
                    tags[i].className = "all-tag-item orange"
                }
                if(value == 4){
                    tags[i].className = "all-tag-item green"
                }
                if(value == 5){
                    tags[i].className = "all-tag-item blue"
                }
                if(value == 6){
                    tags[i].className = "all-tag-item darkblue"
                }
                if(value == 7){
                    tags[i].className = "all-tag-item zi"
                }
            }
        }

    })
    function queryForm() {

        var startDateStr = $('#startDate').val();
        var endDateStr = $('#endDate').val();

        $('#dialogs').on('click', '.weui-dialog__btn', function(){
            $(this).parents('.js_dialog').fadeOut(200);
        });


        if ((startDateStr == '' || startDateStr == null || startDateStr == undefined) || (endDateStr == '' || endDateStr == null || endDateStr == undefined)){

            $("#toastContent").text("请选择结束时间和开始时间!");
            var $loadingToast = $('#loadingToast');
            if ($loadingToast.css('display') != 'none') return;
            $loadingToast.fadeIn(100);
            setTimeout(function () {
                $loadingToast.fadeOut(100);
            }, 1000);

            return false;
        }

        if (startDateStr != '' && startDateStr != null && startDateStr != undefined) {
            if (endDateStr != '' && endDateStr != null && endDateStr != undefined) {
                var startDate = eval('new Date(' + startDateStr.replace(/\d+(?=-[^-]+$)/,
                        function (a) {
                            return parseInt(a, 10) - 1;
                        }).match(/\d+/g) + ')');
                var endDate = eval('new Date(' + endDateStr.replace(/\d+(?=-[^-]+$)/,
                        function (a) {
                            return parseInt(a, 10) - 1;
                        }).match(/\d+/g) + ')');

                if (startDate > endDate) {

                    $("#toastContent").text("结束时间不能早于开始时间!");
                    var $loadingToast = $('#loadingToast');
                    if ($loadingToast.css('display') != 'none') return;
                    $loadingToast.fadeIn(100);
                    setTimeout(function () {
                        $loadingToast.fadeOut(100);
                    }, 1000);

                    return false;
                }

            }
        }
        var tags = document.getElementsByClassName("all-tag-item active");
        var labelId="";
        if(tags != undefined && tags != ''){
            for(var i=0;i<tags.length;i++){
                labelId += tags[i].attributes.content.value + ",";
            }
            labelId = labelId.substr(0,labelId.length-1);
        }
        $("#labelId").val(labelId);
        $("#queryForm").submit();
    }

    $('.all-tag').on('click', '.all-tag-item',function() {
        if($(this).hasClass('active')){
            $(this).removeClass('active');
            var index = $(this).data('index');
            $('.result-tag .center .all-tag-item[data-index="' + index + '"]').remove();
            if ($('.result-tag .tag-item').length == 0) {
                $('.result-tag label').show();
            }
        }else{
            $(this).addClass('active');
            var $html = $(this.outerHTML);
            $('.result-tag label').hide();
            $html.addClass('can_close');
            $('.result-tag .center').append($html)
        }
    })
</script>

</body>


</html>
