<!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?v=04130944">
    <script type="text/javascript" src="/static/js/weui.min.js"></script>
    <style>
        /*li.weui-uploader__file .delxxx {*/
            /*position: absolute;*/
            /*right: 0;*/
            /*top: 0;*/
            /*width: 24px;*/
            /*height: 24px;*/
            /*background: url(./u3676.svg) no-repeat right top;*/
        /*}*/

    </style>

</head>

<body ontouchstart>
<header>
    <div class="header">
        <a href="javascript:backToUrl();" class="btn-a-back"><i class="iconfont">&#xe61f;</i></a>
        <h2>添加状态</h2>
        <a href="/project/testupload" class="btn-add-visit" style="color: #4284d9;">test</a>
    </div>
</header>
<input type="hidden" id="customerId" th:value="${customerId}"/>
<input type="hidden" id="customerProjectId" th:value="${customerProjectId}"/>
<input type="hidden" id="customerStatus" th:value="${customerProjectStatus}"/>
<!--<input type="hidden" id="occurTime" th:value="${occurTime}"/>-->
<!--弹出选择-->
<div class="weui-mask" id="iosMask" style="display: none"></div>
<div class="weui-actionsheet" id="customerStatusSelect">
    <div class="weui-actionsheet__menu">
        <!--<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 class="weui-actionsheet__cell" filterValue="5">签约</div>
        <div class="weui-actionsheet__cell" filterValue="6">退房</div>
    </div>
</div>

<div class="weui-cells weui-cells_form mt0" id="uploader">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <textarea class="weui-textarea" id="callContent" placeholder="请输入备注信息" rows="5" maxlength="600"></textarea>
            <div class="weui-textarea-counter"><span id="contentLengthStr">0</span>/600</div>
        </div>
    </div>
    <div class="weui-cell weui-cells_form">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">客户状态</label>
        </div>
        <div class="weui-cell__bd showList">
            <div class="weui-cell__bd" id="customerStatusName" th:switch="${customerProjectStatus}">
                <!--<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-cell__ft">
        </div>
    </div>
    <div class="weui-cell weui-cells_form">
        <!--<div class="weui-cell__hd">-->
            <!--<label class="weui-label">发生时间</label>-->
            <!--<div class="weui-cell__bd">-->
                <!--<input class="weui-input" type="text" th:value="${#dates.format(new Date(), 'yyyy-MM-dd HH:mm:ss')}" />-->
            <!--</div>-->
        <!--</div>-->
        <div class="weui-cell__hd">
            <label for="" class="weui-label">发生时间</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="datetime-local" min=" value="" name="occurTime" id="occurTime" />
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <div class="weui-uploader">
                <div class="weui-uploader__hd">
                    <p class="weui-uploader__title">图片上传</p>
                    <div class="weui-uploader__info"><span id="uploadCount">0</span>/9</div>
                </div>
                <div class="weui-uploader__bd">
                    <ul class="weui-uploader__files" id="uploaderFiles">
                    </ul>
                    <div class="weui-uploader__input-box">
                        <input id="uploaderInput" name="file" class="weui-uploader__input" type="file" multiple=""
                               accept="image/jpg,image/jpeg,image/png,image/gif;capture=camera">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a class="weui-btn weui-btn_blue" href="javascript:saveStatus()" id="showToast" style="width: 90%;  margin-bottom: 1.5rem;" >提交</a>
</div>
<!--<div class="btn-modify">-->
    <!--<a class="weui-btn weui-btn_blue" href="javascript:saveStatus()" id="showToast">提交</a>-->
<!--</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 id="loadingToast" style="display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据提交中</p>
    </div>
</div>
<script type="text/html" id="imageTemplate">
    <li class="weui-uploader__file"
        style="background-image:url({{attachment.remotePath}})">
    </li>
</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 type="text/javascript" src="/static/js/template.js"></script>
<script type="text/javascript" src="/static/js/utils.js"></script>
<script type="text/javascript" src="/static/js/ajaxfileupload.js?v=2222"></script>
<script type="text/javascript">
    var contentLength = 0;
    var imageCount = 0;
    var $loadingToast = $('#loadingToast');

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

        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) {
            $("#contentLengthStr").text($(this).val().length);
        }

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

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

        $('#callContent').bind('input propertychange', function () {
            $("#contentLengthStr").text($(this).val().length);
        });

        document.getElementById("callContent").addEventListener("input", function () {
            contentLength = this.value.length;
            $("#contentLengthStr").text(contentLength);
        })

        var $iosMask = $('#iosMask');

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

        $(".showList").on("click", function () {
            $iosMask.off();
            $('.weui-actionsheet__cell').off();
            var $selectFilter;
            switch ($(this).index()) {
                case 1:
                    $selectFilter = $('#customerStatusSelect');
                    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 + "Name").val($(this).text());
                $("#" + key + "Name").html("<p>" + $(this).html() + "</p>");
                hideActionSheet($selectFilter)
            });
        });

//        asyncUploadImage();
    });

    function saveStatus() {
        var occurTime = $("#occurTime").val();
        if(occurTime == null || occurTime ==''){
            alert('请填写发生时间');
            return;
        }
        $loadingToast.fadeIn(100);
//        document.getElementById('showToast').disabled=true;
        document.getElementById('showToast').style.display = "none";
        setTimeout(function () {
            //先将图片上传至服务器
            asyncUploadImage();
        },1000);


    }

    function putTimeStr(obj){
        var now = new Date();
//        var nerDateStr = obj.slice(0, 16);
        $("#occurTime").val(now);
        return nerDateStr;
    }

    function asyncUploadImage() {
        var formData = new FormData();
//        var xhr= new XMLHttpRequest()
        for(var i = 0;i<uploaderFiles.length;i++){
            formData.append("file[]",uploaderFiles[i], uploaderFiles[i].name);
//            xhr.open("post", "", true)
//            xhr.send(formData)
        }
        $.ajax({
            url: "/project/addSection",
            type: "POST",
            async: false,
            cache: false,
            processData: false,// 告诉jQuery不要去处理发送的数据
            contentType: false,// 告诉jQuery不要去设置Content-Type请求头
            data: formData,
            dataType: 'JSON',
            success: function(data){

                if (!data.status) {
                    showMessage("error", data.message, 1000);
                    return false;
                }
                $.each(data.images, function (n, img) {
                    imageCount++;
                    if (imageCount === 9) {
                        $(".weui-uploader__input-box").remove();
                    }
                    if (imageCount <= 9) {
                        addAttachment(img);
                    }
                });
            },
            error: function(){
                showMessage("error", "系统异常");
                return false;
            },
            complete: function(XMLHttpRequest, textStatus){
                $loadingToast.fadeOut(100)
                if(textStatus == "success"){
                    $.ajax({
                        url: "/project/addcustomerstatus",
                        data: {
                            customerId: $("#customerId").val(),
                            customerProjectId: $("#customerProjectId").val(),
                            customerStatus: $("#customerStatus").val(),
                            occurTime: $("#occurTime").val(),
                            callContent: $("#callContent").val()
                        },
//                        async: false,
                        type: "post",
                        success: function (data) {
                            if (data.result == "1") {
                                showMessage("success", "提交成功", 3000, "back");
//                                window.location.href="/project/reportcustomer?customerProjectId="+$("#customerProjectId").val();
                            } else {
                                showMessage("error", data.msg, 3000);
                            }
                        }
                    });
                }

            }
        });


//        weui.confirm('是否确认提交', {
//            title: '提示框',
//            buttons: [{
//                label: '取消',
//                type: 'default',
//                onClick: function () {
//
//                }
//            }, {
//                label: '确定',
//                type: 'primary',
//                onClick: function () {
//                    $loadingToast.fadeIn(100)
//                    var promise = new Promise(function (resolve, reject) {
//
//                    });
//                }
//            }]
//        });
    }

    function addAttachment(attachment) {
        $.ajax({
            url: "/project/addattachment",
            data: {
                resourceId: attachment.resourceType,
                resourceType: attachment.resourceType,
                bizType: attachment.bizType,
                name: attachment.name,
                suffix: attachment.suffix,
                size: attachment.size,
                remotePath: attachment.remotePath
            },
            type: "post",
            async: false,
            success: function (data) {
                if (data.result == "1") {
                    var html = template('imageTemplate', {
                        attachment: attachment
                    });
//                    $("#uploaderFiles").append(html);
                    if (imageCount > 9) {
                        imageCount = 9;
                    }
                    $("#imageCount").text(imageCount + "/9");
//                    $loadingToast.fadeIn(2000);

//                    setTimeout(function () {
//                        $loadingToast.fadeOut(100);
//                    }, 3000);
//                    asyncUploadImage();
//                    showMessage("success", "提交成功");
                }
            },
            error: function () {
                $loadingToast.fadeOut(100);
                showMessage("error", "提交失败");
//                asyncUploadImage();
            }
        });
    }
</script>
<script type="text/javascript">
    document.querySelector('#uploaderFiles').addEventListener('click', function (e) {
        var target = e.target;

        while (!target.classList.contains('weui-uploader__file') && target) {
            target = target.parentNode;
        }
        if (!target) return;

        var url = target.getAttribute('style') || '';
        var id = target.getAttribute('data-id');

        if (url) {
            url = url.match(/url\((.*?)\)/)[1].replace(/"/g, '');
        }

        // console.log(url,'llllll')
        var gallery = weui.gallery(url, {
            onDelete: function() {
                weui.confirm('确定删除该图片？', function () {
                    var index;
                    for (var i = 0, len = uploaderFiles.length; i < len; ++i) {
                        var file = uploaderFiles[i];
                        if (file.id == id) {
                            index = i;
                            break;
                        }
                    }
                    if (index) uploaderFiles.splice(index, 1);
                    --uploadCount;
                    $('#uploader #uploadCount').html(uploadCount);
                    target.remove();
                    gallery.hide();
                });
            }
        });

    });

    var uploadCount = 0;
    var uploaderFiles =[];
    var countA =[];
    weui.uploader('#uploader', {
        url: '',
        auto: false,
        type: 'file',
        fileVal: 'fileVal',
        onBeforeQueued: function (files) {
            // `this` 是轮询到的文件, `files` 是所有文件

            if (["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0) {
                weui.alert('请上传图片');
                return false; // 阻止文件添加
            }
            if (this.size > 10 * 1024 * 1024) {
                weui.alert('请上传不超过10M的图片');
                return false;
            }
            if (files.length > 9) { // 防止一下子选择过多文件
                weui.alert('最多只能上传9张图片，请重新选择');
                return false;
            }
            if (uploadCount + 1 > 9) {
                weui.alert('最多只能上传9张图片');
                return false;
            }
            ++uploadCount;
            $('#uploader #uploadCount').html(uploadCount);

        },
        onQueued: function () {
            uploaderFiles.push(this)
            var $del = $('<span class="delxxx"></span>');
            $del.click(function(e) {
                e.stopPropagation();
                var id = $(this).parent().data('id');
                var target = $(this).parent();
                weui.confirm('确定删除该图片？', function () {
                    var index;
                    for (var i = 0, len = uploaderFiles.length; i < len; ++i) {
                        var file = uploaderFiles[i];
                        if (file.id == id) {
                            index = i;
                            break;
                        }
                    }
                    // if (index)
                    uploaderFiles.splice(index, 1);
                    uploaderFiles.del
                    --uploadCount;
//                    if (uploadCount > 0) { // 防止一下子选择过多文件
//                        $('#showTooltips').removeAttr("disabled");
//                    }else if(uploadCount<=0){
//                        $('#showTooltips').attr("disabled","disabled");
//                    }
                    $('#uploader #uploadCount').html(uploadCount);
                    target.remove();
                });
            })
            $('#uploaderFiles li').html($del)
        }
    });

    function showMessage(type, message, timeout, url) {
        var $toast = $('#toast');
        if (type == "error") {
            $toast.find("i").removeClass().addClass("weui-icon_toast")
        } else if (type == "success") {
            $toast.find("i").removeClass().addClass("weui-icon_toast").addClass("weui-icon-success-no-circle")
        }
        $toast.find("p").text(message);
//        if ($toast.css('display') != 'none')
//            return;
        setTimeout(function () {
            $toast.fadeIn(100);
        }, 1000);
//        $toast.fadeIn(1000);
        setTimeout(function () {
            $toast.fadeOut(100);
            if (url != undefined) {
                backToUrl()
            }
        }, timeout);
    }
</script>



</body>
</html>
