<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="include :: header('信息修改')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <style>
        .enabled-click-disabled-ele {
            pointer-events: none;
        }
    </style>
</head>

<body class="white-bg">

<div class="ui-layout-center">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 m-t m-b">
                <form id="order-form" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">客户地址：</label>
                        <div class="col-sm-8">
                            <input id="address" name="address" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">客户联系方式：</label>
                        <div class="col-sm-8">
                            <input id="addressPhone" name="addressPhone" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">上门日期：</label>
                        <div class="col-sm-8">
                            <div class="input-group date">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                <input id="expectDate" name="expectDate" type="text" class="form-control date-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">上门时间：</label>
                        <div class="col-sm-8">
                            <div onclick="toggleTimeDurationType('halfAnHourTimeDurationOpts', 'twoHoursTimeDurationOpts')">
                                <select id="halfAnHourTimeDurationOpts" name="expectDuration" class="form-control normal-select-input m-r">
                                    <option value=""></option>
                                    <option value="08:00-08:30">08:00-08:30</option>
                                    <option value="08:30-09:00">08:30-09:00</option>
                                    <option value="09:00-09:30">09:00-09:30</option>
                                    <option value="09:30-10:00">09:30-10:00</option>
                                    <option value="10:00-10:30">10:00-10:30</option>
                                    <option value="10:30-11:00">10:30-11:00</option>
                                    <option value="11:00-11:30">11:00-11:30</option>
                                    <option value="11:30-12:00">11:30-12:00</option>
                                    <option value="12:00-12:30">12:00-12:30</option>
                                    <option value="12:30-13:00">12:30-13:00</option>
                                    <option value="13:00-13:30">13:00-13:30</option>
                                    <option value="13:30-14:00">13:30-14:00</option>
                                    <option value="14:00-14:30">14:00-14:30</option>
                                    <option value="14:30-15:00">14:30-15:00</option>
                                    <option value="15:00-15:30">15:00-15:30</option>
                                    <option value="15:30-16:00">15:30-16:00</option>
                                    <option value="16:00-16:30">16:00-16:30</option>
                                    <option value="16:30-17:00">16:30-17:00</option>
                                    <option value="17:00-17:30">17:00-17:30</option>
                                    <option value="17:30-18:00">17:30-18:00</option>
                                    <option value="18:00-18:30">18:00-18:30</option>
                                    <option value="18:30-19:00">18:30-19:00</option>
                                    <option value="19:00-19:30">19:00-19:30</option>
                                    <option value="19:30-20:00">19:30-20:00</option>
                                </select>
                            </div>
                            <div class="m-t m-b">或</div>
                            <div onclick="toggleTimeDurationType('twoHoursTimeDurationOpts', 'halfAnHourTimeDurationOpts')">
                                <select id="twoHoursTimeDurationOpts" name="expectDuration" class="form-control normal-select-input m-r enabled-click-disabled-ele" disabled>
                                    <option value=""></option>
                                    <option value="08:00-10:00">08:00-10:00</option>
                                    <option value="10:00-12:00">10:00-12:00</option>
                                    <option value="12:00-14:00">12:00-14:00</option>
                                    <option value="14:00-16:00">14:00-16:00</option>
                                    <option value="16:00-18:00">16:00-18:00</option>
                                    <option value="18:00-20:00">18:00-20:00</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: datetimepicker-js" />

<script th:inline="javascript">

    var orderId = '[[${orderId}]]';
    var pageCode = '[[${pageCode}]]';

    $(function () {
        console.log(pageCode);
        console.log(orderId);

        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 185});
        // 回到顶部绑定
        if ($.fn.toTop !== undefined) {
            var opt = {
                win: $('.ui-layout-center'),
                doc: $('.ui-layout-center')
            };
            $('#scroll-up').toTop(opt);
        }

        initComponent();
    });

    function initComponent() {
        $("#expectDate").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
    }

    function toggleTimeDurationType(enabledDurationId, disabledDurationId) {
        let $enabledIdSelector = $("#" + enabledDurationId);
        let $disabledIdSelector = $("#" + disabledDurationId);
        $enabledIdSelector.prop('disabled', false);
        $enabledIdSelector.removeClass('enabled-click-disabled-ele');
        $disabledIdSelector.prop('disabled', true);
        $disabledIdSelector.addClass('enabled-click-disabled-ele');
        $disabledIdSelector.val('');
    }

    function validIfHasAtleastOneContent() {
        if ($("#address").val()
            || $("#addressPhone").val()) {
            return true;
        }
        if ($("#expectDate").val()
            && ($("#halfAnHourTimeDurationOpts").val()
            || $("#twoHoursTimeDurationOpts").val())) {
            return true;
        } else if ($("#expectDate").val()
            || ($("#halfAnHourTimeDurationOpts").val()
            || $("#twoHoursTimeDurationOpts").val())) {
            $.modal.msgError("上门日期与时间需要同时填写");
            return false;
        }
        $.modal.msgError("请填写需要修改的内容");
        return false;
    }

    function translateFormInfo(data) {
        let tmpParams = {};
        data.forEach(function (item){
            tmpParams[item.name] = item.value;
        });

        let params = {};
        params.address = tmpParams.address;
        params.addressPhone = tmpParams.addressPhone;
        if (tmpParams.expectDuration && tmpParams.expectDate) {
            let expectTimeArr = tmpParams.expectDuration.split('-');
            let expectTimeStart = tmpParams.expectDate + ' ' + expectTimeArr[0] + ':00';
            let expectTimeEnd = tmpParams.expectDate + ' ' + expectTimeArr[1] + ':00';
            params.expectTimeStart = expectTimeStart;
            params.expectTimeEnd = expectTimeEnd;
        }

        return params;
    }

    function submitHandler() {
        if (!validIfHasAtleastOneContent()) return;
        let data = $("#order-form").serializeArray();
        let params = this.translateFormInfo(data);
        params.id = orderId;
        $.ajax({
            type: "POST",
            dataType:"json",
            url: ctx + "order/master/editServingInfo",
            data: JSON.stringify(params),
            contentType: 'application/json',
            success: function (result) {
                if (result.code === web_status.SUCCESS) {
                    $.modal.msgSuccess("修改成功");
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                } else {
                    $.modal.msgError(result.msg)
                }
            }
        })
    }
</script>
</body>

</html>