{% extends 'MirrorOamBundle:Base:base.html.twig' %}



{% block script %}

    <script type="text/javascript" src="{{ asset('bundles/mirroroam/js/anychart/anychart-base.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/mirroroam/js/anychart/anychart-ui.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/mirroroam/js/anychart/anychart-exports.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/mirroroam/js/anychart/anychart-gantt.min.js') }}"></script>
    <script type="text/javascript"
            src="{{ asset('bundles/mirroroam/js/anychart/anychart-data-adapter.min.js') }}"></script>

    <script type="text/javascript">
        angular.module('myApp', [])
                .controller('orderDetailController', function ($scope, $http, $location, $timeout) {
                    AngularAction($scope, $http, $location, $timeout);
                });
        function AngularAction($scope, $http, $location, $timeout) {
            $scope.hasComment = false;
            $scope.ToBeAllotTaskMsg = {};
            $scope.selected = {
                name: "",
                telephone: "",
                address: "",
                timeRange: "",
            };
            $scope.AmbuletteID = null;
            var detailNumber = '{{ orderId }}';
            $scope.orderId = '{{ orderId }}';
            httpOther($http, apiPath('/api/dict/key/4'), 'GET',
                    {},
                    function (response) {
                        $scope.statusList = response.valueList;
                    },
                    function (errno, errmsg) {

                    });

            anychart.onDocumentReady(function () {
                // The data used in this sample can be obtained from the CDN
                // https://cdn.anychart.com/samples-data/gantt-general-features/external-events/data.json
                anychart.data.loadJsonFile('http://www.uuhoo.net:7890/IntelligentService/api/AmbuletteSortedForSchedule?OrderID=' +{{ orderId }}, function (data) {
                    $scope.ToBeAllotTaskMsg.name = data.Data.userName;
                    $scope.ToBeAllotTaskMsg.telephone = data.Data.userTelephone;
                    $scope.ToBeAllotTaskMsg.address = data.Data.beginPosition + '--' + data.Data.endPosition;
                    $scope.ToBeAllotTaskMsg.timeRange = data.Data.hopeTime + '--' + data.Data.estimatedTime;

                    var treeData = anychart.data.tree(data.Data.ambulatteList, 'as-table');

                    // create resource gantt chart
                    chart = anychart.ganttResource();

//                    chart.title('车辆信息 ');
                    var title = chart.title();
                    title.height(0);
                    // set data for the chart
                    chart.data(treeData);

                    // set pixel position of the main splitter
                    chart.rowSelectedFill('#D4DFE8')
                            .rowHoverFill('#EAEFF3')
                            // set start splitter position settings
                            // 设置主分割器的像素位置
                            .splitterPosition(428)
                            .defaultRowHeight(30);

                    // getting chart's data grid
                    var dataGrid = chart.dataGrid();//获取图表的数据网格

                    // disabling default 0-column
                    dataGrid.column(0)
                            .title('#')
                            .width(30)
                            .cellTextSettings({
                                hAlign: 'center'
                            }).format(function (item) {

                                return item.La.id
                            })
                            .cellTextSettingsOverrider(function (label, dataItem) {
                                if (!dataItem.getParent()) {
                                    label.fontSize(12);
                                }
                            });

                    // set second column settings
                    dataGrid.column(1)
                            .title('姓名')
                            .width(167)
                            .cellTextSettings({
                                hAlign: 'left'
                            }).format(function (item) {

                                return item.La.name
                            })
                            .cellTextSettingsOverrider(function (label, dataItem) {
                                if (!dataItem.getParent()) {
                                    label.fontSize(12);
                                }
                            });

                    // set third column settings
                    dataGrid.column(2)
                            .title('车牌号')
                            .width(76)
                            .cellTextSettings({
                                hAlign: 'left'
                            })
                            .format(function (item) {

                                return item.La.plateNumber
                            })
                            .cellTextSettingsOverrider(function (label, dataItem) {
                                if (!dataItem.getParent()) {
                                    label.fontSize(12);
                                }
                            });

                    // set fourth column settings
                    dataGrid.column(3)
                            .title('公里数')
                            .width(50)
                            .cellTextSettings({
                                hAlign: 'left'
                            })
                            .format(function (item) {

                                return item.La.mileage;
                            })
                            .cellTextSettingsOverrider(function (label, dataItem) {
                                if (!dataItem.getParent()) {
                                    label.fontSize(12);
                                }
                            });
                    dataGrid.column(4)
                            .title('长途公里数')
                            .width(50)
                            .cellTextSettings({
                                hAlign: 'left'
                            })
                            .format(function (item) {

                                return item.La.mileageLongway;
                            })
                            .cellTextSettingsOverrider(function (label, dataItem) {
                                if (!dataItem.getParent()) {
                                    label.fontSize(12);
                                }
                            });
                    dataGrid.column(5)
                            .title('价格')
                            .width(50)
                            .cellTextSettings({
                                hAlign: 'left'
                            })
                            .format(function (item) {

                                return item.La.sum;
                            })
                            .cellTextSettingsOverrider(function (label, dataItem) {
                                if (!dataItem.getParent()) {
                                    label.fontSize(12);
                                }
                            });

                    // set container id for the chart
                    chart.container('container');

                    // initiate chart drawing
                    chart.draw();
                    // zoom chart all dates range
                    chart.fitAll();
                    // chart.zoomTo("hour", 2, "first-date");
                    // External events
                    chart.listen('rowSelect', function (e) {
                        var msg = e['item'].get('name');

                    });
                    chart.listen('rowClick', callbackFenPei);
                    chart.listen('rowDblClick', callback);
                    chart.listen('rowMouseOver', callback);
                    chart.listen('rowMouseMove', callback);
                    chart.listen('rowMouseOut', callback);
                    chart.listen('rowMouseUp', callback);
                    chart.listen('rowMouseDown', callback);
                });
            });

            function callback(e) {
                var msg = e['item'].get('name');


                var complete = eval(e['item'].get('periods'));
                if (e['period']) {
                    var info = complete[e['periodIndex']].info;
                    var msgId = complete[e['periodIndex']].id;
                    var startTime = complete[e['periodIndex']].start;
                    var endTime = complete[e['periodIndex']].end;
//                    因为接口返回的是考虑北京时间的json数据，现在因为想调用转化炒化成本地格式的时间所以要减掉8个小时的毫秒数
                    var timeRange = formatTime(Number(complete[e['periodIndex']].start) - 28800000) + "--" + formatTime(Number(complete[e['periodIndex']].end) - 28800000);

                } else {
                    msg = "";
                }


                $scope.$apply(function () {

                    $scope.selected.name = msg;
                    $scope.selected.id = msgId;
                    $scope.selected.address = info;
                    $scope.selected.timeRange = timeRange;

                })


            }

            function callbackFenPei(e) {
                var msg = e['item'].get('name');
                if (e['item'].get('comment')) {
                    comment = e['item'].get('comment')
                    $scope.hasComment = true;
                } else {
                    comment = "正常分配";
                    $scope.hasComment = false;
                }

                $scope.$apply(function () {
                    $scope.selected.CarGroup = msg;
                    $scope.selected.comment = comment;
                })


                $scope.AmbuletteID = e['item'].get('id')

            }

// logs actions to textarea
            function log(eventType, message) {

                chart.title(message);
            }

            function formatTime(argument) {
                var timestamp = new Date(argument);

                return (timestamp.toLocaleDateString().replace(/\//g, "-") + " " + timestamp.toTimeString().substr(0, 8))
            }

            var pTop = $("#fixed-top").offset().top;
            var pHeight = $("#fixed-top").outerHeight();
            $(window).scroll(function () {
                var sTop = $(window).scrollTop();
                var navTop = $('#navbar').outerHeight();
                if (sTop + navTop >= pTop) {

                    $(".virtual").css('height', 183)
                    $("#fixed-top").addClass("fixed-top")
                } else {
                    console.log($(".virtual"))
                    $(".virtual").css('height', 1)
                    $("#fixed-top").removeClass("fixed-top")

                }
            })
            $scope.allotTask = function () {
                var queryData = {
                    "OrderID": {{ orderId }},
                    "AmbuletteID": $scope.AmbuletteID,
                }
                if ($scope.AmbuletteID == null) {
                    alert("请选择一个车辆")
                } else {
                    $http.post("http://www.uuhoo.net:7890/IntelligentService/api/OrderDirectorReplyToAmbulette", queryData).then(function (res) {

                        if (res.data.ErrMsg) {
                            alert(res.data.ErrMsg)
                        } else {
                            alert("分配订单成功")
                        }

                    }, function errorCallback(res) {
                        alert("分配订单失败")
                    })
                }
            }
        }


    </script>
{% endblock %}

{% block style %}
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/mirroroam/css/anychart/anychart-ui.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/mirroroam/css/anychart/anychart-font.min.css') }}">
    <style type="text/css">
        .normal {
            color: green;
        }

        .abnormal {
            color: red;
        }

        .legend {
            width: 25px;
            height: 15px;
            border-radius: 3px;
            display: inline-block;
        }

        .text {
            font-size: 12px;
        }

        .completed {
            background-color: #4284F5;
        }

        .undone {
            background-color: #DB4537;
        }

        .current {
            background-color: #F5B400;
        }

        .processing {
            background-color: #109E59;
        }

        .fixed-top {
            position: fixed;
            top: 0;
            right: 0;
            z-index: 9999;
            width: 87%;
            height: 183px;
            overflow: auto;
            border: 1px solid #f6f6f6;
        }

        .virtual {
            width: 100%;
            height: 1px;
        }
    </style>
{% endblock %}

{% block content %}
    {% raw %}
        <div ng-controller="orderDetailController">

            <h1 class="page-header">分配订单</h1>
            <div class="virtual"></div>
            <div style="background-color:#FFFFFF;height: 183px "
                 class="" id="fixed-top">
                <div style="height: 183px">
                    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8" style="background-color:#f9f9f9;height: 100%">
                        <div style="border-right:1px solid #C7C7C7;" class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            <h5 style=" margin-bottom: 5px; font-size: 15px;font-weight: bold;">待分配订单信息：</h5>
                            <ul style="list-style: none">
                                <li>姓名：{{ToBeAllotTaskMsg.name}}</li>
                                <li>电话：{{ToBeAllotTaskMsg.telephone}}</li>
                                <li>起终点：{{ToBeAllotTaskMsg.address}}</li>
                                <li> 起止时间：{{ToBeAllotTaskMsg.timeRange}}</li>
                            </ul>
                            <div style="padding:5px 0 ;width: 100%">
                                <div class="legend current"></div>
                                <span class="text">当前待分配订单</span>
                                <div class="legend processing"></div>
                                <span class="text">进行中</span>
                                <div class="legend completed"></div>
                                <span class="text">已完成</span>
                                <div class="legend undone"></div>
                                <span class="text">未完成</span>
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            <div>
                                <h5 style=" margin-bottom: 5px; font-size: 15px;font-weight: bold;">建议信息：</h5>
                                <ul style="list-style: none">
                                    <li ng-class="{true: 'abnormal', false: 'normal'}[hasComment]">
                                        备注：{{selected.comment}}
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <h5 style=" margin-bottom: 5px; font-size: 15px;font-weight: bold;">当前选择车辆：</h5>
                                <ul style="list-style: none">
                                    <li>{{selected.CarGroup}}</li>
                                </ul>
                            </div>

                            <button type="submit" class="btn btn-default pull-right " ng-click="allotTask()">分配</button>
                        </div>
                    </div>

                    <div style="border-left:1px solid #f6f6f6;" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                        <h5 style=" margin-bottom: 5px; font-size: 15px;font-weight: bold;">光标悬浮订单信息：</h5>
                        <ul style="list-style: none">
                            <li>订单id：{{selected.id}}</li>
                            <li>姓名：{{selected.name}}</li>
                            <li>起终点：{{selected.address}}</li>
                            <li> 起止时间：{{selected.timeRange}}</li>
                        </ul>
                    </div>
                </div>

                <div class="clean" style="clean:both"></div>
            </div>

            <div id="container" style="height: 800px;overflow: scroll;width: 100%"></div>
        </div>
    {% endraw %}
{% endblock %}