<!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/style-new.css">
</head>

<body ontouchstart class="kehu-detail">
<input type="hidden" id="customerProjectId" th:value="${customerProject.id}"/>
<input type="hidden" id="customerId" th:value="${customer.id}"/>
<input type="hidden" id="status" th:value="${customerProject.status}"/>
<input type="hidden" id="isRepeat" th:value="${customerProject.isRepeat}"/>

<header>
    <div class="header">
        <a href="javascript:backToUrl();" class="btn-a-back"><i class="iconfont">&#xe61f;</i></a>
        <h2 th:text="${customerProject.projectName}"></h2>
    </div>
</header>

<!--弹出选择-->
<div class="weui-mask" id="iosMask" style="display: none"></div>
<div class="weui-actionsheet" id="recordedStatusSelect">
    <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell" filterValue="99">待定</div>
        <div class="weui-actionsheet__cell" filterValue="0">无效</div>
        <div class="weui-actionsheet__cell" filterValue="1">有效</div>
    </div>
</div>

<div class="weui-actionsheet" id="loanStatusSelect">
    <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell" filterValue="0">未办理</div>
        <div class="weui-actionsheet__cell" filterValue="1">申请中</div>
        <div class="weui-actionsheet__cell" filterValue="2">已下款</div>
        <div class="weui-actionsheet__cell" filterValue="3">被拒绝</div>
        <div class="weui-actionsheet__cell" filterValue="4">全款支付</div>
    </div>
</div>

<div class="xiangmu-panel">
    <div class="content">
        <div class="a-title" th:text="${customerProject.projectName}"></div>
        <div class="icon-line"><img src="/static/images/u3538.png" alt="" srcset=""><p th:text="${customer.name}"></p></div>
        <div class="icon-line"><img src="/static/images/u3533.png" alt="" srcset=""><p th:text="${customer.phone}"></p></div>
        <div class="icon-line"><img src="/static/images/u2749.png" alt="" srcset=""><p th:text="${customer.managerName}"></p></div>
    </div>
    <div class="status" th:switch="${customerProject.status}">
        <p th:case="1">约看</p>
        <p th:case="2">到访</p>
        <p th:case="3">认筹</p>
        <p th:case="4">认购</p>
        <p th:case="5">签约</p>
        <p th:case="6">退房</p>
        <p th:case="*">待定</p>
    </div>
</div>
<div class="weui-cells__title">跟进阶段</div>
<div class="row-timeline">
    <div class="row-timeline-item active" th:if=" ${statusProgress.maxActiveStatusId} ge 1 ">
        <div class="name">约看</div>

        <div class="pp" th:text="${#maps.containsKey(statusProgress.progressDetail, '1')} ? ${statusProgress.progressDetail['1'].statusHandler} : '' "></div>
        <div class="time" th:text="${#maps.containsKey(statusProgress.progressDetail, '1')} ? ${statusProgress.progressDetail['1'].statusTime} : '' "></div>
    </div>
    <div class="row-timeline-item" th:if=" ${statusProgress.maxActiveStatusId} lt 1 ">
        <div class="name">约看</div>
        <div class="pp"></div>
        <div class="time"></div>
    </div>
    <div class="row-timeline-item active" th:if=" ${statusProgress.maxActiveStatusId} ge 2 ">
        <div class="name">到访</div>
        <div class="pp" th:text="${#maps.containsKey(statusProgress.progressDetail, '2')} ? ${statusProgress.progressDetail['2'].statusHandler} : '' "></div>
        <div class="time" th:text="${#maps.containsKey(statusProgress.progressDetail, '2')} ? ${statusProgress.progressDetail['2'].statusTime} : '' "></div>
    </div>
    <div class="row-timeline-item" th:if=" ${statusProgress.maxActiveStatusId} lt 2 ">
        <div class="name">到访</div>
        <div class="pp"></div>
        <div class="time"></div>
    </div>
    <div class="row-timeline-item active" th:if=" ${statusProgress.maxActiveStatusId} ge 3 ">
        <div class="name">认筹</div>
        <div class="pp" th:text="${#maps.containsKey(statusProgress.progressDetail, '3')} ? ${statusProgress.progressDetail['3'].statusHandler} : '' "></div>
        <div class="time" th:text="${#maps.containsKey(statusProgress.progressDetail, '3')} ? ${statusProgress.progressDetail['3'].statusTime} : '' "></div>
    </div>
    <div class="row-timeline-item" th:if=" ${statusProgress.maxActiveStatusId} lt 3 ">
        <div class="name">认筹</div>
        <div class="pp"></div>
        <div class="time"></div>
    </div>
    <div class="row-timeline-item active" th:if=" ${statusProgress.maxActiveStatusId} ge 4 ">
        <div class="name">认购</div>
        <div class="pp" th:text="${#maps.containsKey(statusProgress.progressDetail, '4')} ? ${statusProgress.progressDetail['4'].statusHandler} : '' "></div>
        <div class="time" th:text="${#maps.containsKey(statusProgress.progressDetail, '4')} ? ${statusProgress.progressDetail['4'].statusTime} : '' "></div>
    </div>
    <div class="row-timeline-item" th:if=" ${statusProgress.maxActiveStatusId} lt 4 ">
        <div class="name">认购</div>
        <div class="pp"></div>
        <div class="time"></div>
    </div>
    <div class="row-timeline-item active" th:if=" ${statusProgress.maxActiveStatusId} ge 5 ">
        <div class="name">签约</div>
        <div class="pp" th:text="${#maps.containsKey(statusProgress.progressDetail, '5')} ? ${statusProgress.progressDetail['5'].statusHandler} : '' "></div>
        <div class="time" th:text="${#maps.containsKey(statusProgress.progressDetail, '5')} ? ${statusProgress.progressDetail['5'].statusTime} : '' "></div>
    </div>
    <div class="row-timeline-item" th:if=" ${statusProgress.maxActiveStatusId} lt 5 ">
        <div class="name">签约</div>
        <div class="pp"></div>
        <div class="time"></div>
    </div>
    <div class="row-timeline-item active" th:if=" ${statusProgress.maxActiveStatusId} ge 6 ">
        <div class="name">退房</div>
        <div class="pp" th:text="${#maps.containsKey(statusProgress.progressDetail, '6')} ? ${statusProgress.progressDetail['6'].statusHandler} : '' "></div>
        <div class="time" th:text="${#maps.containsKey(statusProgress.progressDetail, '6')} ? ${statusProgress.progressDetail['6'].statusTime} : '' "></div>
    </div>
</div>
<div class="weui-cells__title">凭证图片</div>
<div class="pingzheng">
    <div class="weui-cell__bd">
        <ul class="weui-uploader__files" id="uploaderFiles">
            <li class="weui-uploader__file" th:each="image,index:${images}"
                th:style="'background:url(' + ${image.remotePath} + ');background-size: 79px;-webkit-background-size: 79px;'"
                th:onclick="@{'showImage(\''+${image.remotePath}+'\')'}"></li>
        </ul>
    </div>
</div>

<div class="weui-gallery" style="display: none;">
    <span class="weui-gallery__img"
          style="background-image: url(http://ww2.sinaimg.cn/mw690/bfdcef89jw1f2lmtdfiyxj208c03cglx.jpg);"></span>
    <div class="weui-gallery__opr">
        <a href="javascript:closeImage()" class="weui-gallery__close">
            <i class="weui-icon-cancel weui-icon_gallery-close" style="color: #fff;"></i>
        </a>
    </div>
</div>

<div class="weui-cells__title">状态变更记录</div>
<div class="jilu" th:each="log : ${statusChangeLogs}">
    <div class="time" th:text="${#dates.format(log.createTime.time, 'yyyy-MM-dd HH:mm:ss')}"></div>
    <div class="content" th:if="${log.occurTime} != null">
        <span th:text="${'【' + log.toStatusName + '】， ' + '添加人' + log.creater + '， ' + '发生时间：' + #dates.format(log.occurTime.time, 'yyyy-MM-dd HH:mm') + '， ' + '备注【' + log.remark + '】'}" />
    </div>
    <div class="content" th:if="${log.occurTime} == null">
        <span th:text="${'【' + log.toStatusName + '】， ' + '添加人' + log.creater + '， ' + '备注【' + log.remark + '】'}" />
    </div>
</div>

</div>
<div class="weui-cells__title">意向信息</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell weui-cell_select weui-cell_select-after"
         th:onclick="'goToUrl(\''  + @{/project/modifytextarea(customerProjectId=${customerProject.id},key=requireArea,value=${customerProject.requireArea})} + '\')'">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">需求面积</label>
        </div>
        <div class="weui-cell__bd" style="height: 40px;">
            <input id="requireArea" class="weui-input" type="tel" th:value="${customerProject.requireArea}" readonly/>
        </div>
        
    </div>

    <div class="weui-cell weui-cell_select weui-cell_select-after"
         th:onclick="'goToUrl(\''  + @{/project/modifytextarea(customerProjectId=${customerProject.id},key=requireHouse,value=${customerProject.requireHouse})} + '\')'">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">需求房号</label>
        </div>
        <div class="weui-cell__bd" style="height: 40px;">
            <input id="requireHouse" class="weui-input" type="tel" th:value="${customerProject.requireHouse}" readonly/>
        </div>
        
    </div>

    <div class="weui-cell weui-cell_select weui-cell_select-after"
         th:onclick="'goToUrl(\''  + @{/project/modifytextarea(customerProjectId=${customerProject.id},key=requireHouseType,value=${customerProject.requireHouseType})} + '\')'">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">意向房型</label>
        </div>
        <div class="weui-cell__bd">
            <input id="requireHouseType" class="weui-input" type="tel" th:value="${customerProject.requireHouseType}" readonly/>
        </div>
        
    </div>

    <div class="weui-cell weui-cell_select weui-cell_select-after"
         th:onclick="'goToUrl(\''  + @{/project/modifytextarea(customerProjectId=${customerProject.id},key=requirePrice,value=${customerProject.requirePrice})} + '\')'">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">总价预算</label>
        </div>
        <div class="weui-cell__bd" style="height: 40px;">
            <input id="requirePrice" class="weui-input" type="tel" th:value="${customerProject.requirePrice}" readonly/>
        </div>
        
    </div>
</div>

<div class="weui-cells__title">案场状态信息</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell weui-cell_select weui-cell_select-after"
         th:onclick="'goToUrl(\''  + @{/project/modifytextarea(customerProjectId=${customerProject.id},key=consultantName,value=${customerProject.consultantName})} + '\')'">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">案场顾问</label>
        </div>
        <div class="weui-cell__bd" style="height: 40px;">
            <input id="consultantName" class="weui-input" type="tel" th:value="${customerProject.consultantName}" readonly/>
        </div>
        
    </div>

    <div class="weui-cell weui-cell_select weui-cell_select-after"
         th:onclick="'goToUrl(\''  + @{/project/modifytextarea(customerProjectId=${customerProject.id},key=consultantPhone,value=${customerProject.consultantPhone})} + '\')'">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">案场顾问电话</label>
        </div>
        <div class="weui-cell__bd" style="height: 40px;">
            <input id="consultantPhone" class="weui-input" type="tel" th:value="${customerProject.consultantPhone}" readonly/>
        </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>
        <input type="hidden" id="recordedStatus" name="selectCustomerInfo" th:value="${customerProject.recordedStatus}"/>
        <div class="weui-cell__bd" style="height: 40px;padding-top:7.5px" id="recordedStatusName" th:switch="${customerProject.recordedStatus}"
             onclick="selectStatus('1')">
            <p th:case="0">无效</p>
            <p th:case="1">有效</p>
            <p th:case="*">待定</p>
        </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>
        <input type="hidden" id="loanStatus" name="selectCustomerInfo" th:value="${customerProject.loanStatus}"/>
        <div class="weui-cell__bd" style="height: 40px;padding-top:7.5px" id="loanStatusName" th:switch="${customerProject.loanStatus}"
             onclick="selectStatus('2')">
            <p th:case="0">未办理</p>
            <p th:case="1">申请中</p>
            <p th:case="2">已下款</p>
            <p th:case="3">被拒绝</p>
            <p th:case="4">全款支付</p>
            <p th:case="*">待定</p>
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">到访次数</label>
        </div>
        <div class="weui-cell__bd" style="height: 40px;">
            <p th:text="${customerProject.visitTime}"></p>
        </div>
    </div>

    <div class="weui-cell weui-cell_select weui-cell_select-after"
         th:onclick="'goToUrl(\''  + @{/project/modifytextarea(customerProjectId=${customerProject.id},key=remark,value=${customerProject.remark})} + '\')'">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">备注信息</label>
        </div>
        <div class="weui-cell__bd" style="height: 40px;">
            <p th:text="${customerProject.remark}"></p>
        </div>
        
    </div>
</div>

<!--提交成功提示-->
<div id="toast" style="display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-icon-success-no-circle weui-icon_toast"></i>
        <p class="weui-toast__content">提交成功</p>
    </div>
</div>

<!--<div style="height:55px" th:onclick="'goToUrl(\''  + @{/project/addcustomerstatus(customerId=${customer.id},-->
<!--customerProjectId=${customerProject.id},customerProjectStatus=${customerProject.status})} + '\')'">-->
<div class="weui-cell weui-cell_access" onclick="addcustomerstatus()">

    <a class="add-status">
        <img src="/static/images/u2808.png" alt="">添加状态
    </a>
</div>
<div class="gallery-cover hide">
    <img src="" alt="">
</div>
<script type="text/javascript" src="/static/js/wechat/zepto.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/statistics.js"></script>
<script type="text/javascript" src="/static/js/history.js"></script>
<script>
    $(function() {
        $('.pingzheng img').click(function() {
            var src = $(this).attr('src');
            $('.gallery-cover').removeClass('hide');
            $('.gallery-cover img').attr('src',src);
        });
        $('.gallery-cover').click(function() {
            $('.gallery-cover').addClass('hide');
        });
        $("[name=selectCustomerInfo]").on("change", function () {
            var _id = $(this).attr("id");
            updateCustomerProject(_id)
        });
    });

    function updateCustomerProject(_id) {
        $.ajax({
            url: "/project/modifytextarea",
            data: {
                customerProjectId: $("#customerProjectId").val(),
                key: _id,
                value: $("#" + _id).val()
            },
            type: "post",
            success: function (data) {
                if (data.result == "1") {
                    // 提交成功提示
                    var $toast = $('#toast');
                    if ($toast.css('display') != 'none') return;

                    $toast.fadeIn(100);
                    setTimeout(function () {
                        $toast.fadeOut(100);
                    }, 2000);
                }
            }
        });
    }

    function showImage(imgUrl) {
        $(".weui-gallery__img").css("background-image", "url(" + imgUrl + ")");
        $(".weui-gallery").show();
    }

    function closeImage() {
        $(".weui-gallery").hide();
    }

    function selectStatus(_type) {
        var $iosMask = $('#iosMask');

        function hideActionSheet($this) {
            $this.removeClass('weui-actionsheet_toggle');
            $iosMask.fadeOut(200);
        }

        var $selectFilter;
        switch (_type) {
            case "1":
                $selectFilter = $('#recordedStatusSelect');
                break;
            case "2":
                $selectFilter = $('#loanStatusSelect');
                break;
            default:
                break;
        }
        $selectFilter.addClass('weui-actionsheet_toggle');
        $iosMask.fadeIn(200);
        $iosMask.on('click', function () {
            hideActionSheet($selectFilter)
        });
        $('.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");
            $("#" + key).val(value);
            $("#" + key).trigger("change");
            $("#" + key + "Name").html("<p>" + $(this).html() + "</p>");
            hideActionSheet($selectFilter)
        });
    }

    function addcustomerstatus() {
        debugger;
        var customerId = $("#customerId").val();
        var customerProjectId = $("#customerProjectId").val();
        var customerProjectStatus = $("#status").val();
        var isRepeat = $("#isRepeat").val();
        if(isRepeat == 1){
            alert("该客户为重客，无法维护");
            return;
        }
        window.location.href = "/project/addcustomerstatus?customerId=" + customerId + "&customerProjectId=" + customerProjectId + "&customerProjectStatus=" + customerProjectStatus;
    }

</script>
</body>

</html>