<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <link rel="stylesheet" type="text/css" href="css/common/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="css/common/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/common/module.css"/>
    <link rel="stylesheet" type="text/css" href="css/order_list.css"/>
    <style>
        .combo-input {
            padding-top: 6px !important;
            padding-bottom: 6px !important;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="iframe_box">
        <ul id="myTabs" class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active" href="#order_list" data-toggle="tab">
                <a>订单列表</a>
            </li>
        </ul>
        <div class="tab-content table_box">
            <div role="tabpanel" class="tab-pane active order_list" id="order_list">
                <div class="dis_search" id="dis_search">
                    <div class="form-inline search_list_1">
                        <span class="search_name">订单编号：</span>
                        <div class="form-group">
                            <input type="text" class="form-control input_width" v-model="order_id" placeholder="订单编号">
                        </div>
                        <span class="search_name">订单类型：</span>
                        <select class="form-control input_width" v-model="select_order_type" @change="orderTypeChange">
                            <option v-for="item in order_type_list" v-bind:value="item.order_type_id"
                                    v-html="item.order_type_des"></option>
                        </select>
                        <span class="search_name" id="">下单开始时间：</span>
                        <div class="form-group">
                            <div class="input-group date form_date input_width">
                                <input class="form-control" size="16" type="text" v-model="start_time" id="start_time"
                                       readonly>
                                <span class="input-group-addon"><span
                                        class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                        <span class="search_name" id="">下单结束时间：</span>
                        <div class="form-group">
                            <div class="input-group date form_date input_width">
                                <input class="form-control" size="16" type="text" v-model="end_time" id="end_time"
                                       readonly>
                                <span class="input-group-addon"><span
                                        class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-inline search_list_1">
                        <span class="search_name">订单状态：</span>
                        <select class="form-control input_width" v-model="select_order_status"
                                @change="orderStatusChange">
                            <option v-for="item in order_status_list" v-bind:value="item.order_status_id"
                                    v-html="item.order_status_des"></option>
                        </select>
                        <span class="search_name">订单来源：</span>
                        <select class="form-control input_width order_come" style="padding: 0;">
                            <option v-for="item in order_come_list" v-bind:value="item.fx_uid"
                                    v-html="item.wechat_name"></option>
                        </select>
                        <span class="search_name" id="">出游开始时间：</span>
                        <div class="form-group">
                            <div class="input-group date form_date input_width">
                                <input class="form-control" size="16" type="text" v-model="start_date_start"
                                       id="start_date_start">
                                <span class="input-group-addon"><span
                                        class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                        <span class="search_name" id="">出游结束时间：</span>
                        <div class="form-group">
                            <div class="input-group date form_date input_width">
                                <input class="form-control" size="16" type="text" v-model="start_date_end"
                                       id="start_date_end">
                                <span class="input-group-addon"><span
                                        class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-inline">
                        <span class="search_name">运营负责人：</span>
                        <select class="form-control input_width main_search">
                            <option v-for="item in main_corp_list" v-bind:value="item.id"
                                    v-html="item.user_name"></option>
                        </select>
                        <span class="search_name">分销商区域：</span>
                        <select class="form-control input_width user_area">
                            <option v-for="item in user_area_list" v-bind:value="item.area_id"
                                    v-html="item.area_name"></option>
                        </select>
                        <span class="search_name">联系人：</span>
                        <div class="form-group">
                            <input type="text" class="form-control input_width" id="contacts_name" placeholder="联系人">
                        </div>
                        <span class="search_name">手机号：</span>
                        <div class="form-group">
                            <input type="text" class="form-control input_width" id="contacts_phone" placeholder="手机">
                        </div>
                    </div>
                </div>
                <div class="dis_middle">
                    <span class=" float_l">有效订单：<span style="font-size: large;"
                                                      v-html="order_validity_count"></span></span>
                    <span class=" float_l" style="margin-left:20px;">GMV总量：<span style="font-size: large;"
                                                                                 v-html="GMV"></span></span>
                    <button type="button" class="btn btn-primary mar_r" v-on:click="searchDidClick"><span
                            class="glyphicon glyphicon-search"></span> 搜索
                    </button>
                    <button type="button" class="btn btn-warning  mar_r" v-on:click="resetDidClick">重置</button>
                    <button type="button" class="btn btn-danger mar_r" v-on:click="exportOrderList"><span
                            class="glyphicon glyphicon-file"></span>导出
                    </button>
                </div>
                <div class="dis_table">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                            <tr>
                                <th>订单编号</th>
                                <th>预订时间</th>
                                <th>订单类型</th>
                                <th width="300">预订产品</th>
                                <th width="100">备注</th>
                                <th>支付金额</th>
                                <th>佣金</th>
                                <th>出发时间(点击修改)</th>
                                <th>联系人</th>
                                <th>状态</th>
                                <th>支付方式</th>
                                <th>订单来源</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="body_list" style="display: none;">
                            <!--<tr is="tr-item" v-for="dict in order_listinfo" v-bind:sigle_order="dict"></tr>-->
                            <tr v-for="(sigle_order,index) in order_listinfo">
                                <!--<td>{{sigle_order.order_id}}</td>
                                <td>{{sigle_order.create_order_time}}</td>
                                <td>{{sigle_order.order_type_des}}</td>
                                <td>{{sigle_order.book_product}}</br>({{sigle_order.prod_des}})</td>
                                <td>{{'¥'+sigle_order.total_money}}</td>
                                <td>{{sigle_order.start_time}}</td>
                                <td>{{sigle_order.contacts_name}}</br>{{sigle_order.contacts_phone}}</br>{{sigle_order.contacts_ID}}</td>
                                <td>{{sigle_order.order_status_des}}</td>
                                <td>{{sigle_order.pay_type_des}}</td>
                                <td>{{sigle_order.order_come}}</td>-->
                                <td class="order_id" v-html="sigle_order.order_id"></td>
                                <td v-html="sigle_order.create_order_time"></td>
                                <td v-html="sigle_order.order_type_des"></td>
                                <!--<td v-html="sigle_order.book_product"></td>-->
                                <!--<td v-html="sigle_order.book_product +'<br/>'+ sigle_order.prod_des"></td>-->
                                <!--<td ><div v-html="sigle_order.book_product"></div><div style="color: darkgray;">{{sigle_order.prod_des}}</div></td>-->
                                <td v-if="sigle_order.category_id == 5">
                                    <div>上:{{sigle_order.start_area}}</div>
                                    <div>下:{{sigle_order.end_area}}</div>
                                    <div style="color: darkgray;">购买数量：{{sigle_order.prod_cnt}}
                                        下车：{{sigle_order.end_time}}
                                    </div>
                                </td>
                                <!--<td v-html="filterReplace(sigle_order.total_money)"></td>-->
                                <td v-else>
                                    <div v-html="sigle_order.book_product"></div>
                                    <div style="color: darkgray;">{{sigle_order.prod_des}}</div>
                                </td>
                                <td  v-html="sigle_order.remark"> </td>
                                <td>{{sigle_order.total_money | filterReplace}}</td>
                                <td  v-html="sigle_order.commission_amount"> </td>
                                <td style="cursor: pointer;color:#428bca; " data-toggle="modal" data-target=".setStartTimeModel" @click="changStartTime(sigle_order,index)" v-html="sigle_order.start_time">
                                </td>
                                <!--<td>{{sigle_order.contacts_name}}<br/>{{sigle_order.contacts_phone}}<br/>{{sigle_order.contacts_ID}}</td>-->
                                <td>
                                    <div>{{sigle_order.contacts_name}}</div>
                                    <div>{{sigle_order.contacts_phone}}</div>
                                    <div>{{sigle_order.contacts_ID}}</div>
                                </td>
                                <!--<td v-html="sigle_order.contacts_name"></td>-->
                                <td v-html="sigle_order.order_status_des"></td>
                                <td v-html="sigle_order.pay_type_des"></td>
                                <td>
                                    <div v-html="sigle_order.order_come"></div>
                                    <div style="font-weight: 900;">{{sigle_order.system}}</div>
                                </td>
                                <td v-if="sigle_order.if_can_cancel == 0">
                                    <button type="button" class="btn btn-warning btn-xs"
                                            @click="cancelDidClick(sigle_order)">取消
                                    </button>
                                </td>
                                <td v-if="sigle_order.if_can_cancel == 1">
                                    -
                                </td>
                            </tr>
                            <tr v-if="order_listinfo.length<=0" style="text-align: center;">
                                <td style="color: red;" colspan="11" v-html="no_info"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="pageDiv"></div>
            </div>
        </div>
        <div class="modal fade setStartTimeModel" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm" style="border: 1px solid black;background-color: white;width: 350px;padding: 15px;">
                <div style="font-weight: 900;font-size: 16px;">
                    设置出发时间
                    <button type="button" id="setStartTimeModelDel" class="close" data-dismiss="modal" aria-hidden="true" @click="cancelChangeOrder()">&times;</button>
                </div>
                <div id="setStartTimeModelList"   style="margin-top: 15px;max-height:450px;overflow-x: hidden; ">
                    <table class="table" style="max-width: 100% !important;min-width: 100%;">
                        <tr>
                            <th>订单ID</th>
                            <th>订单名称</th>
                        </tr>
                        <tr>
                            <td  v-html="edit_obj.order_id"></td>
                            <td v-html="edit_obj.book_product"></td>
                        </tr>
                    </table>
                    <div style="margin-top: 10px;"><input type="text" v-model="edit_obj.start_time" v-bind:value="edit_obj.start_time" style="font-size: 16px;height: 30px;" /></div>

                </div>
                <div style="margin-top: 15px;height:30px;overflow-x: hidden; ">
                    <button type="button"  @click="changeOrder()" class="btn btn-warning  mar_r" style="color: #ffffff;background-color: #afe0dc;border-color: #9dd9d4;">确定</button>
                    <button type="button" class="btn btn-warning  mar_r" data-dismiss="modal" aria-hidden="true" @click="cancelChangeOrder()">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>



<script src="js/common/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common/bootstrap-datetimepicker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common/module.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common/base_path.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="js/order_list.js" type="text/javascript" charset="utf-8"></script>-->
<script src="js/common/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common/vue-resource.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/order_list.js" type="text/javascript" charset="utf-8"></script>
</body>
<script type="text/javascript">

    function start_s(obj) {
        $(obj).children(".start_show").css("display", "none");
        $(obj).children(".start_hidden").css("display", "block");
    }
    function start_h(obj) {
        $(obj).children(".start_hidden").css("display", "none");
        $(obj).children(".start_show").css("display", "block");
    }

</script>

</html>