@layout("/common/_container.html"){
<style type="text/css">
    html, body, #container {
        height: 100%;
        width: 100%;
    }

    .input-card .btn{
        margin-right: 1.2rem;
        width: 9rem;
    }

    .input-card .btn:last-child{
        margin-right: 0;
    }
    table{
        width: 60%;
        margin-left: 5%;
    }
    td, th{
        border: 1px solid #eee;
        text-align: center;
        height: 40px;
        line-height: 40px;
    }
</style>
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div class="form-horizontal">
            <input type="hidden" id="id" name="id" value="${item.id}">
            <div class="row" style="margin-top: 30px;">
                <div class="col-sm-4">
                    <h2 class="h3Class" style="font-weight: 700;">订单详情</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 b-r">
                    <#label id="insertTimeStr" name="下单时间" value="${item.insertTimeStr}"/>
                    <#label id="orderSourceStr" name="订单来源" value="${item.orderSourceStr}"/>
                    <#label id="userName" name="下单用户昵称" value="${item.userName}"/>
                    <#label id="placementAddress" name="起点" value="${item.startAddress}"/>
                    <#label id="driver" name="接单司机" value="${item.driver}"/>
                    <#label id="car" name="接单车辆" value="${item.car}"/>
                    <#label id="boardingAddress" name="上车地点" value="${item.boardingAddress}"/>
                    <#label id="getoffAddress" name="下车地点" value="${item.getoffAddress}"/>
                    <#label id="serverCarModel" name="选择车型" value="${item.serverCarModel}"/>
                </div>

                <div class="col-sm-6">
                    <#label id="orderNum" name="订单编号" value="${item.orderNum}"/>
                    <#label id="travelTimeStr" name="乘车时间" value="${item.travelTimeStr}"/>
                    <#label id="userPhone" name="下单用户手机号" value="${item.userPhone}"/>
                    <#label id="endAddress" name="终点" value="${item.endAddress}"/>
                    <#label id="companyName" name="车辆所属机构" value="${item.companyName}"/>
                    <#label id="boardingTimeStr" name="上车时间" value="${item.boardingTimeStr}"/>
                    <#label id="getoffTimeStr" name="下车时间" value="${item.getoffTimeStr}"/>
                    <#label id="lineName" name="线路" value="${item.lineName}"/>
                </div>
            </div>
            <div class="row" style="margin-top: 30px;">
                <div class="col-sm-4">
                    <h2 class="h3Class" style="font-weight: 700;">乘车人明细</h2>
                </div>
            </div>
            <div class="row">
                <table>
                    <thead>
                        <tr><th style="width: 20%;">姓名</th><th style="width: 20%;">手机号</th><th style="width: 20%;">性别</th><th style="width: 40%;">身份证号码</th></tr>
                    </thead>
                    <tbody>
                    @for(u in frequentPassengers){
                        <tr><td>${u.name}</td><td>${u.phone}</td><td>${u.sex == 1 ? "男":"女"}</td><td>${u.idcode}</td></tr>
                    @}
                    </tbody>
                </table>
            </div>
            <div class="row" style="margin-top: 30px;">
                <div class="col-sm-4">
                    <h2 class="h3Class" style="font-weight: 700;">费用明细</h2>
                </div>
            </div>
            <div class="row">
                @if(isNotEmpty(item.orderMoney) && item.orderMoney > 0){
                <div class="col-sm-6 b-r">
                    <#label id="orderMoney" name="订单总价" value="${item.orderMoney}元"/>
                    <#label id="couponMoney" name="优惠券抵扣费用" value="${item.couponMoney}元"/>
                </div>
                <div class="col-sm-6">
                    @if(isNotEmpty(item.payMoney)){
                    <#label id="payMoney" name="实际支付费用" value="${item.payMoney}元"/>
                    @}else{
                    <#label id="payMoney" name="实际支付费用" value="0.00元"/>
                    @}
                    <#label id="payTypeStr" name="支付方式" value="${item.payTypeStr}"/>
                </div>
                @}else{
                <h4 style="margin-left: 10%">暂无费用明细</h4>
                @}
            </div>

            <div class="row" style="margin-top: 30px;">
                <div class="col-sm-4">
                    <h2 class="h3Class" style="font-weight: 700;">线路轨迹</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-10">
                    <div class="form-horizontal" id="container" style="margin-left: 50px;width: 100%; height: 500px;"></div>
                    <div class="input-card" style="margin-left: 50px;">
                        <h4>轨迹回放控制</h4>
                        <div class="input-item">
                            <input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()"/>
                            <input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()"/>
                            <input type="button" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()"/>
                            <input type="button" class="btn" value="停止动画" id="stop" onclick="stopAnimation()"/>
                        </div>
                        <div class="input-item">

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=5760dee49160a809b3bcfedcee9032f6"></script>
<script src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="${ctxPath}/static/modular/system/tOrderCrossCity/tOrderCrossCity_info.js"></script>
@}