<!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>
        .custom-container {
            padding: 0 30px 20px 30px;
        }

        .flex-board {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
        }

        .flex-board-no-wrap {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .flex-board.select-content {
            flex-basis: 100%
        }

        .flex-board.select-content .flex-board-no-wrap {
            flex-basis: 90%
        }

        .flex-board.input-content {
            flex-basis: 50%;
        }

        .flex-board.input-content input {
            flex-basis: 75%
        }

        .specCanAssignNum {
            text-align: center;
            line-height: 31px;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="animated fadeInRight row custom-container">
        <div class="col-sm-12 search-collapse">
            <form class="m" id="canAssignSpecForm">
                <div id="canAssignSpecList" class="m-b">
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <span>派单金额：</span>
                        <span id="moneyCanAssign"></span>
                        <span>元</span>
                    </div>
<!--                    <div class="col-sm-5">-->
<!--                        <div class="flex-board input-content">-->
<!--                            <label class="form-control-label">派出金额：</label>-->
<!--                            <input name="totalPay" type="number" class="form-control">-->
<!--                        </div>-->
<!--                    </div>-->
                </div>
            </form>
        </div>

        <div class="col-sm-12 search-collapse">
            <form class="flex-board m" id="workerForm">
                <div class="flex-board select-content m-t">
                    <label class="form-control-label">区域筛选：</label>
                    <div id="areaCxSelect" class="flex-board-no-wrap">
                        <select class="province form-control cx-select-input m-r" name="province" id="province" data-first-title="选择省" onchange="selectRegion('province', 'city')"></select>
                        <select class="city form-control cx-select-input m-r" name="city" id="city" data-first-title="选择市" onchange="selectRegion('city', 'district')"></select>
                        <select class="district form-control cx-select-input m-r" name="areaId" id="district" data-first-title="选择区" onchange="selectRegion('district', 'street')"></select>
                        <select class="street form-control cx-select-input m-r" name="streetId" id="streetId" data-first-title="选择街道" ></select>
                    </div>
                </div>
                <div class="flex-board select-content m-t">
                    <label class="form-control-label">类别筛选：</label>
                    <div id="categoryCxSelect" class="flex-board-no-wrap">
                        <select class="category1 form-control cx-select-input m-r" name="category1" id="category1" data-first-title="选择一类"></select>
                        <select class="category2 form-control cx-select-input m-r" name="category2" id="category2" data-first-title="选择二类"></select>
                        <select class="category3 form-control cx-select-input m-r" name="goodsCategoryId" id="category3" data-first-title="选择三类"></select>
                        <select class="category4 form-control cx-select-input m-r" name="category4" id="category4" data-first-title="选择四类" ></select>
                    </div>
                </div>
                <div class="flex-board input-content m-t">
                    <label class="form-control-label">名称/手机号：</label>
                    <input name="keyWords" type="text" class="form-control normal-input m-r">
                </div>
                <div class="m-t">
                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('workerForm')"><i
                        class="fa fa-search"></i>&nbsp;搜索</a>
                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('workerForm')"><i
                        class="fa fa-refresh"></i>&nbsp;重置</a>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: jquery-cxselect-js" />
<script type="text/javascript">
    var orderMasterId = '[[${orderId}]]';
    var prefix = ctx + "worker"

    $(function () {
        loadCanAssignSpecInfo();
        initForm();
        initTable();
    });

    function loadCanAssignSpecInfo() {
        $.ajax({
            type: "POST",
            dataType:"json",
            url: ctx + "order/can/assign",
            data: JSON.stringify({orderMasterId: orderMasterId}),
            contentType: 'application/json',
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    $('#canAssignSpecList').html('');
                    $.each(result.data, function(index, spec) {
                        $('#canAssignSpecList').append(
                            '<div class="row m-b">' +
                            '    <div class="col-sm-6">' +
                            '        <input disabled class="form-control" value="' + spec.goodsName +'">' +
                            '    </div>' +
                            '    <div class="col-sm-2 specCanAssignNum">' +
                            spec.goodsNum +
                            '    </div>' +
                            '</div>'
                        )
                    });
                } else {
                    $.modal.msgError("数据加载错误，请重试！")
                }
            }
        })

        $.ajax({
            type: "POST",
            dataType:"json",
            url: ctx + "order/master/app/detail",
            data: JSON.stringify({id: orderMasterId}),
            contentType: 'application/json',
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    $('#moneyCanAssign').html(result.data.serverMoney);
                } else {
                    $.modal.msgError("数据加载错误，请重试！")
                }
            }
        })
    }

    function initForm() {
        $.ajax({
            type: "POST",
            dataType:"json",
            url: ctx + "system/area/list",
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    $('#areaCxSelect').cxSelect({
                        selects: ['province', 'city', 'district', 'street'],
                        jsonValue: 'areaId',
                        jsonName: 'areaName',
                        data: result.data
                    });
                } else {
                    $.modal.msgError("数据加载错误，请重试！")
                }
            }
        })

        $.ajax({
            type: "POST",
            dataType:"json",
            url: ctx + "goods/deptcategory/app/list",
            data: JSON.stringify({deptId: 101, goodsCategoryId: 1}),
            contentType: 'application/json',
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    $('#categoryCxSelect').cxSelect({
                        selects: ['category1', 'category2', 'category3', 'category4'],
                        jsonValue: 'goodsCategoryId',
                        jsonName: 'goodsCategoryName',
                        jsonSub: 'child',
                        data: result.data
                    });
                } else {
                    $.modal.msgError("数据加载错误，请重试！")
                }
            }
        })
    }

    function initTable() {
        var options = {
            url: prefix + "/list",
            modalName: "师傅派单列表",
            firstLoad: false,
            columns: [
                {
                    checkbox: true
                }, {
                    field: 'name',
                    title: '人员名称',
                    align: "left"
                }, {
                    field: 'phone',
                    title: '手机号',
                    align: "left"
                }, {
                    title: '操作',
                    align: 'left',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="assign(' + row.workerId + ')">指派</a> ');
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
        $.table.search('workerForm');
    }

    function selectRegion(regionLevelName, nextRegionLevelName) {
        var regionId = $("#" + regionLevelName).val();
        if ($.common.isEmpty(regionId)) {
            return;
        }

        //Ajax调用处理
        $.ajax({
            type: "POST",
            dataType:"json",
            url: ctx + "system/area/list",
            data: {parentCode: regionId},
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    $('#areaCxSelect').cxSelect({
                        selects: [nextRegionLevelName],
                        jsonValue: 'areaId',
                        jsonName: 'areaName',
                        data: result.data
                    });
                } else {
                    $.modal.msgError("数据加载错误，请重试！")
                }
            }
        })
    }

    function assign(workerId) {
        var params = {
            id: orderMasterId,
            workerId: workerId,
            orderStatus: 0
        };

        $.ajax({
            type: "POST",
            dataType:"json",
            url: ctx + "order/master/editOrderMaster",
            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("指派失败")
                }
            }
        })
    }
</script>
</body>

</html>
