@extends('layouts.app')

@section('content')
    @component('client.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">
                        <select    class="form-control form-control-sm " style="vertical-align: middle;max-width: 100px" >
                            <option value="" class="text-secondary">子项目</option>
                        </select>
                    </td>
                    <td style="width: 300px">
                        <select   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 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 style="background-color: #D2B48C">项目小组</th>
                <th style="background-color: #D2B48C">客户(货主)</th>
                <th style="background-color: #D2B48C">子项目</th>
                <th style="background-color: #D2B48C">状态</th>
                <th style="background-color: #D2B48C">创建日期</th>
                <th style="background-color: #D2B48C">在库时长</th>
                <th style="background-color: #6A5ACD">结算月</th>
                <th style="background-color: #6A5ACD">日均单量</th>
                <th style="background-color: #6A5ACD">上月盘点面积</th>
                <th style="background-color: #6A5ACD">本月盘点面积</th>
                <th style="background-color: #FF7F50">初始账单金额</th>
                <th style="background-color: #FF7F50">账单确认金额</th>
                <th style="background-color: #FF7F50">账单确认日期</th>
            </tr>
            <tr>
                <td >
                    <input class="checkItem" type="checkbox" >
                </td>
                <td rowspan="4" class="text-center" style="vertical-align: middle;background-color: #D2B48C" >项目小组A</td>
                <td style="background-color: #D2B48C">货主A</td>
                <td style="background-color: #D2B48C">子项目1</td>
                <td style="background-color: #D2B48C">激活</td>
                <td style="background-color: #D2B48C">2018.07.06</td>
                <td style="background-color: #D2B48C">458天</td>
                <td style="background-color: #6A5ACD">202003</td>
                <td style="background-color: #6A5ACD">55</td>
                <td style="background-color: #6A5ACD">695</td>
                <td style="background-color: #6A5ACD">695</td>
                <td style="background-color: #FF7F50"></td>
                <td style="background-color: #FF7F50">100000</td>
                <td style="background-color: #FF7F50"></td>
            </tr>
            <tr>
                <td >
                    <input class="checkItem" type="checkbox" >
                </td>
                <td rowspan="2"  style="vertical-align: middle;background-color: #D2B48C">货主B</td>
                <td style="background-color: #D2B48C">子项目1</td>
                <td style="background-color: #D2B48C">激活</td>
                <td style="background-color: #D2B48C">2018.07.06</td>
                <td style="background-color: #D2B48C">458天</td>
                <td style="background-color: #6A5ACD">202003</td>
                <td style="background-color: #6A5ACD">778</td>
                <td style="background-color: #6A5ACD">7878</td>
                <td style="background-color: #6A5ACD">45</td>
                <td style="background-color: #FF7F50"></td>
                <td style="background-color: #FF7F50"></td>
                <td style="background-color: #FF7F50"></td>
            </tr>
            <tr>
                <td >
                    <input class="checkItem" type="checkbox" >
                </td>
                <td style="background-color: #D2B48C">子项目2</td>
                <td style="background-color: #D2B48C">冻结</td>
                <td style="background-color: #D2B48C">2018.07.06</td>
                <td style="background-color: #D2B48C">458天</td>
                <td style="background-color: #6A5ACD">258</td>
                <td style="background-color: #6A5ACD">98</td>
                <td style="background-color: #6A5ACD">456</td>
                <td style="background-color: #6A5ACD">45</td>
                <td style="background-color: #FF7F50"></td>
                <td style="background-color: #FF7F50"></td>
                <td style="background-color: #FF7F50"></td>
            </tr>
            <tr>
                <td >
                    <input class="checkItem" type="checkbox" >
                </td>
                <td style="background-color: #D2B48C">货主C</td>
                <td style="background-color: #D2B48C">子项目1</td>
                <td style="background-color: #D2B48C">冻结</td>
                <td style="background-color: #D2B48C">2018.07.06</td>
                <td style="background-color: #D2B48C">458天</td>
                <td style="background-color: #6A5ACD">8</td>
                <td style="background-color: #6A5ACD">75</td>
                <td style="background-color: #6A5ACD">12</td>
                <td style="background-color: #6A5ACD">24</td>
                <td style="background-color: #FF7F50"></td>
                <td style="background-color: #FF7F50"></td>
                <td style="background-color: #FF7F50"></td>
            </tr>
        </table>
    </div>
@endsection