<?php
use yii\helpers\Url;
use app\ht\widgets\LinkPager;
use common\helpers\ImageManager;

$this->title = '手动分配订单';
$this->params['breadcrumbs'][] = '订单管理';
$this->params['breadcrumbs'][] = ['label' => '订单列表', 'url' => ['/trade/order/index?order_status=0','order_status'=>$order_status]];
$this->params['breadcrumbs'][] =  $this->title;

?>

<div class="panel panel-default">
    <div class="panel-body">
        <table class="table table-bordered">
            <tr>
                <td colspan="4" class="bg-info">申请信息</td>
            </tr>
            <tr>
                <th class="col-sm-2">订单号</th>
                <td class="col-sm-4"><?=$order['order_no']; ?></td>
                <th class="col-sm-2">订单状态</th>
                <td class="col-sm-4"><?=$orderStatusList[$order['status']]; ?></td>
            </tr>
            <tr>
                <th>报修设备</th>
                <td><?=$order['repair_device_name']; ?></td>
                <th>报修时间</th>
                <td><?=Yii::$app->formatter->asTime($order['created_at'], "yyyy-MM-dd HH:mm:ss"); ?></td>
            </tr>
            <tr>
                <th>帐户信息</th>
                <td><?=$order['nickname']; ?>&nbsp;&nbsp;(&nbsp;帐户手机：<?=$order['phone'] ?>&nbsp;)</td>
                <th>公司名称</th>
                <td>
                    <?php if (empty($order['owner'])){
                        echo "暂无";
                    }else{
                        echo $order['owner'];
                    }
                    ?>
                </td>
            </tr>
            <tr>
                <th>上门地址</th>
                <td><?=$order['address'].$order['detail']; ?></td>
                <th>工程师</th>
                <td>
                    <input type="hidden" value="0" id="engineer_id" />
                    <input class="form-control" id="engineer" name="engineer" placeholder="请录入手机或名称" autocomplete="off" />

                </td>
            </tr>
        </table>
    </div>

    <div class="panel-body">
        <table class="table table-bordered">
            <tr>
                <td colspan="4" class="bg-info">客户故障描述</td>
            </tr>
            <tr>
                <td colspan="4">
                    <?php foreach($userSelectFault as $fault): ?>
                        <span class="btn btn-danger btn-sm"><?=$fault['name']?></span>
                    <?php endforeach; ?>
                    <?php if ($order['other_fault']){ ?>
                        <span class="btn btn-danger btn-sm"><?=$order['other_fault']?></span>
                    <?php }?>
                </td>
            </tr>
            <tr >
                <?php if (sizeof($imgList) > 0){ ?>
                    <style>
                        #img_alert {
                            width: 100%;
                            height: 100%;
                            display: none;
                            position: absolute;
                            top: 0px;
                            left: 0px;
                            background-color: rgba(0, 0, 0, 0.42);
                        }

                        #img_alert .img_content {
                            width: 604px;
                            height: auto;
                            position: relative;
                            left: 50%;
                            margin-left: -200px;
                            opacity: 0;
                            top: 50%;
                            border: 2px solid #ffffff;
                        }

                        #img_alert .img_content .closed {
                            width: 25px;
                            height: 25px;
                            background-color: #636363;
                            display: inline-block;
                            position: absolute;
                            top: -13px;
                            right: -10px;
                            text-align: center;
                            border-radius: 100%;
                            color: #fff;
                            cursor: pointer;
                        }

                        #img_alert .img_content img {
                            width: 600px;
                            display: inherit;
                            height: auto;
                        }
                    </style>

                    <?php foreach($imgList as $img): ?>
                        <td width="25%"><img src="<?=  ImageManager::getUrl($img['img_path']) ?>" height="200px" name="show_img" /></td>
                    <?php endforeach; ?>
                    <?php
                    $tmpSize = 4 - sizeof($imgList);
                    for($i=0;$i<$tmpSize;$i++){
                        echo "<td></td>";
                    }
                    ?>
                    <div id="img_alert" style="z-index: 999;">
                        <div class="img_content">
                            <span class="closed">x</span>
                            <img src="" />
                        </div>
                    </div>
                <?php } ?>
            </tr>
        </table>
    </div>

    <table class="table" style="border-top:none;">
        <tr>
            <td class="col-sm-12">
                <table class="table table-bordered">
                    <tr>
                        <td class="bg-info">后台备注</td>
                    </tr>
                    <tr>
                        <td width="100%"><textarea class="form-control" style="width:100%;" rows="3" id="remark" name="remark"><?=$order['remark'] ?></textarea></td>
                    </tr>

                </table>
            </td>
        </tr>
    </table>

    <div class="panel-footer text-center">
        <input type="hidden" value="<?=$order['id'] ?>" name="order_id" id="order_id" >
        <button type="button" class="btn btn-primary" id="save">提&nbsp;&nbsp;交</button>&nbsp;&nbsp;&nbsp;&nbsp;

    </div>

</div>
<script type="text/javascript" src="<?=Url::toRoute('/exts/base/1.0.0/ui/typeahead/bootstrap3-typeahead.min.js')?>" ></script>
<script>
    var searchItemUrl = "<?=Url::toRoute('/trade/order/search-engineer')?>";
    var search_engineer_count = '<?=$search_engineer_count ?>';
    $(document).ready(function () {
        var orderId = $("#order_id").val();
        $("#save").bind("click", function () {

            var remark = $("#remark").val();
            var engineer_id = $("#engineer_id").val();
            var engineer = $("#engineer").val();
            if ( null == orderId || "" == orderId ){
                alert("丢失标记信息，无法提交备注");
                return false;
            }
            if ("" == engineer){
                $("#engineer_id").val(0);
                alert("请选择接单工程师");
                return false;
            }
            if (engineer_id == "" || 0 == engineer_id){
                alert("请选择接单工程师");
                return false;
            }
            $.ajax({
                type: "post",
                url: "do-allot",
                dataType:"json",
                data: $.csrf({"id":orderId,"remark":remark,"engineer":engineer_id}),
                success:function(msg){
                    alert(msg['msg']);
                    if (msg['status'] == 1){
                        location.href = "<?=Url::toRoute(["/trade/order/index","status"=>0])?>"
                    }else{
                    }
                },
                error:function(msg){
                }
            });
        });

        $("img[name='show_img']").click(function() {
            var imgsrc = $(this).attr('src');
            $('#img_alert .img_content img').attr('src', imgsrc);
            $('#img_alert').show();
            var height = $('#img_alert .img_content').height();
            $('#img_alert .img_content').css({
                'margin-top': -(height / 2),
                'opacity': '1'
            })
        })

        $('#img_alert .img_content .closed').click(function(){
            $(this).parents('.img_content').css({
                'opacity': '0'
            })
            $('#img_alert').hide();
        })

        $('#engineer').typeahead({
            minLength: 1,
            items:25,
            source: function(query, process) {

                var parameter = $.csrf({query: query,orderId: orderId});
                $.post(searchItemUrl, parameter, function (res) {
                    var data = [];
                    var iList = res.list;
                    for(i in iList){
                        var tItem = iList[i];
                        data.push(JSON.stringify(tItem));
                    }
                    process(data);
                },'json');
            },
            highlighter: function(item) {
                var itemObject = JSON.parse(item);
                var title = itemObject.name +' ' + itemObject.phone + '（'+ formatDistance(itemObject.distance) +'）';
                return  title ;
            },

            updater: function(item) {

                var itemObject = JSON.parse(item);
                var title = itemObject.name + ' ' + itemObject.phone + '（'+ formatDistance(itemObject.distance) +'）';
                $('#engineer_id').val(itemObject.id);
                return title;
            }
        });
        $('#engineer').change(function(){
            var currV = $(this).val();
            if ('' == $.trim(currV)){
                $('#engineer_id').val(0);
            }
        })
        function formatDistance(distance )
        {
            if ( distance < 1000){
                return distance +'米'
            } else if (distance >= 1000) {
                var realDistance = distance/1000;
                realDistance = realDistance.toFixed(3);
                return realDistance + '公里';
            }
        }
    });

</script>