@extends('layouts.app')

@section('content')
    @component('client.areaCheck.menu')@endcomponent
    <div class="card m-2">
        <form>
            <table class="table table-sm table-bordered  text-nowrap mb-0" style="background: #fff;min-width: 1500px">
                <tr>
                    <td colspan="10">
                        <select name="paginate"  class="form-control-sm" style="vertical-align: middle">
                            <option value="50">每页显示50行</option>
                            <option value="100">每页显示100行</option>
                            <option value="200">每页显示200行</option>
                            <option value="500">每页显示500行</option>
                            <option value="1000">每页显示1000行</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td style="width: 300px">
                        <div class="form-inline">
                            <select name="owner_id"    class="form-control form-control-sm tooltipTarget "   style="vertical-align: middle;max-width: 100px" :class="filterData.owner_id?'bg-warning':''">
                                <option value="" class="text-secondary">货主 </option>
                                <option  class="font-weight-bold"></option>
                            </select>
                            <div style="position: relative;">
                                <button type="button"  style=" max-width: 100px" class="btn btn-sm btn-outline-dark container pull-left">多货主查询</button>
                            </div>
                        </div>
                    </td>
                    <td style="width: 300px">
                            <input class="form-control form-control-sm" placeholder="结算月(示例：202001)" style="max-width: 200px">
                    </td>
                    <td style="width: 300px">
                        <input class="form-control form-control-sm" type="date" style="max-width: 200px">
                    </td>
                    <td style="width: 300px">
                        <select name="status"  class="form-control form-control-sm " style="vertical-align: middle;max-width: 100px" >
                            <option value="" class="text-secondary">用仓类型</option>
                        </select>
                    </td>
                    <td colspan="6"></td>
                </tr>
                <tr>
                    <td>
                        <select  name="status"  class="form-control form-control-sm " style="vertical-align: middle;max-width: 100px" >
                            <option value="" class="text-secondary">子项目</option>
                        </select>
                    </td>
                    <td>
                        <select name="status"  class="form-control form-control-sm " style="vertical-align: middle;max-width: 100px" >
                            <option value="" class="text-secondary">项目组</option>
                        </select>
                    </td>
                    <td>
                        <input class="form-control form-control-sm" type="date" style="max-width: 200px">
                    </td>
                    <td colspan="7"></td>
                </tr>
                <tr>
                    <td colspan="10">
                        <span class="dropdown">
                            <button class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle "
                                    data-toggle="dropdown" >
                                导出Excel
                            </button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" @click="waybillExport(1)" href="javascript:">导出勾选内容</a>
                                <a class="dropdown-item" @click="waybillExport(2)" href="javascript:">导出所有页</a>
                            </div>
                        </span>
                    </td>
                </tr>
            </table>
        </form>
        <table class="table table-sm table-hover table-bordered table-striped text-nowrap m-2">
            <tr>
                <th>
                    <label for="all">
                        <input id="all" type="checkbox" >全选
                    </label>
                </th>
                <th>序号</th>
                <th>项目组</th>
                <th>货主</th>
                <th>子项目</th>
                <th>结算月</th>
                <th>录入日期</th>
                <th>用仓类型</th>
                <th>货物整托</th>
                <th>货物半托</th>
                <th>平面区面积</th>
                <th>结算面积</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>
                    <input class="checkItem" type="checkbox" >
                </td>
                <td>1</td>
                <td>XXX</td>
                <td>BS</td>
                <td>东浩子项目1</td>
                <td class="text-muted">202006</td>
                <td>2020-06-15 15:06:32</td>
                <td>整租</td>
                <td>20</td>
                <td>20</td>
                <td>20</td>
                <td>20</td>
                <td><button class="btn btn-sm btn-outline-info">修改</button></td>
            </tr>
            <tr class="text-success">
                <td>
                    <input class="checkItem" type="checkbox" >
                </td>
                <td>2</td>
                <td>XXX</td>
                <td>BS</td>
                <td>东浩子项目2</td>
                <td class="text-muted">202006</td>
                <td>2020-06-15 15:06:32</td>
                <td>整租</td>
                <td>20</td>
                <td>20</td>
                <td>20</td>
                <td>20</td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <input class="checkItem" type="checkbox" >
                </td>
                <td>3</td>
                <td>XXX</td>
                <td>BS</td>
                <td>
                    <select class="form-control form-control-sm" >
                        <option>东浩子项目3</option>
                    </select></td>
                <td class="text-muted">202006</td>
                <td>2020-06-15 15:06:32</td>
                <td>
                    <select class="form-control form-control-sm" style="max-width: 100px">
                        <option>整租</option>
                    </select>
                </td>
                <td><input value="20" class="form-control form-control-sm" style="max-width: 100px"></td>
                <td><input value="20" class="form-control form-control-sm" style="max-width: 100px"></td>
                <td><input value="20" class="form-control form-control-sm" style="max-width: 100px"></td>
                <td>20</td>
                <td>
                    <button class="btn btn-sm btn-outline-success">确定</button>
                    <button class="btn btn-sm btn-outline-danger">取消</button>
                </td>
            </tr>
        </table>
    </div>
@endsection