<form class="form-horizontal">
    <div class="form-group">
        <rt-datetime ng-model="vm.startDate"
                     rt-type="month"
                     rt-title="开始年月" rt-required="true" rt-col="3" rt-label-col="2"></rt-datetime>
        <rt-datetime ng-model="vm.endDate"
                     rt-type="month"
                     rt-title="结束年月" rt-required="true" rt-col="3" rt-label-col="2"></rt-datetime>

        <div class="col-sm-1">
            <button class="btn btn-primary" ng-click="vm.showReport()">查询</button>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label"><span style="color:red;">*</span>药品名称</label>

        <div class="col-sm-3">
            <ui-select allow-clear ng-model="vm.productSelected" theme="bootstrap">
                <ui-select-match>{{ $select.selected.Name }}</ui-select-match>
                <ui-select-choices repeat="item in vm.productList|filter:$select.search">
                    <span ng-bind-html="item.Name | highlight: $select.search"></span>
                </ui-select-choices>
            </ui-select>
        </div>
        <label class="col-sm-2 control-label"><span style="color:red;">*</span>Top</label>

        <div class="col-sm-3">
            <ui-select allow-clear ng-model="vm.topsSelected" theme="bootstrap">
                <ui-select-match>{{$select.selected}}</ui-select-match>
                <ui-select-choices repeat="item in vm.topsList | filter: $select.search">
                    <span ng-bind-html="item| highlight: $select.search"></span>
                </ui-select-choices>
            </ui-select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label"><span style="color:red;">*</span>事业部</label>

        <div class="col-sm-8">
            <ui-select allow-clear ng-model="vm.buidSelected" theme="bootstrap">
                <ui-select-match>{{ $select.selected.name }}</ui-select-match>
                <ui-select-choices repeat="item in vm.buidList|filter:$select.search">
                    <span ng-bind-html="item.name | highlight: $select.search"></span>
                </ui-select-choices>
            </ui-select>
        </div>
        <div class="col-sm-1">
            <button class="btn btn-clear btn-small"
                    ng-click="vm.isShowMoreSearch = !vm.isShowMoreSearch;complateTableheight();">
                <i ng-if="!vm.isShowMoreSearch" class="fa fa-angle-double-down" style="color:#0099ff;"
                   title="更多查询条件"></i>
                <i ng-if="vm.isShowMoreSearch" class="fa fa-angle-double-up" style="color:#0099ff;" title="隐藏"></i>
            </button>
        </div>
    </div>
    <div class="form-group" ng-hide="!vm.isShowMoreSearch">
        <label class="col-sm-2 control-label"><span style="color:red;"></span>业务线/大区</label>

        <div class="col-sm-8">
            <ui-select allow-clear ng-model="vm.bigDepSelected" theme="bootstrap">
                <ui-select-match>{{ $select.selected.name }}</ui-select-match>
                <ui-select-choices repeat="item in vm.bigDepList |filter:$select.search">
                    <span ng-bind-html="item.name | highlight: $select.search"></span>
                </ui-select-choices>
            </ui-select>
        </div>
    </div>
    <div class="form-group" ng-hide="!vm.isShowMoreSearch">
        <label class="col-sm-2 control-label">省区/地区</label>

        <div class="col-sm-8">
            <ui-select class="form" multiple allow-clear sortable="true" theme="bootstrap" close-on-select="false"
                       ng-model="vm.businessUnitSelected">
                <ui-select-match>{{$item.name}}</ui-select-match>
                <ui-select-choices repeat="item in vm.businessUnitList | filter: {name: $select.search}">
                    <span ng-bind-html="item.name | highlight: $select.search"></span>
                </ui-select-choices>
            </ui-select>
        </div>
    </div>
</form>
<ul class="nav nav-tabs">
    <li class="active" ng-click="selectTab('tab1')">
        <a href="#c1"
           onclick="return false;"
           data-toggle="tab">批发/纯销分布</a>
    </li>
    <li ng-click="selectTab('tab2')">
        <a href="#c2"
           onclick="return false;"
           data-toggle="tab">终端类型分布</a>
    </li>
    <li ng-click="selectTab('tab3')">
        <a href="#c3"
           onclick="return false;"
           data-toggle="tab">正常/窜货分布</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="c1">
        <div class="row" style="border-top: 1px dotted #d5c4c4; padding-top: 20px">
            <div class="col-sm-12">
                <div id="report1" style="height:800px;" ng-style="{width: chartWidth + 'px'}"/>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="c2">
        <div class="row" style="border-top: 1px dotted #d5c4c4; padding-top: 20px">
            <div class="col-sm-12">
                <div id="report2" style="height:800px;" ng-style="{width: chartWidth + 'px'}"/>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="c3">
        <div class="row" style="border-top: 1px dotted #d5c4c4; padding-top: 20px">
            <div class="col-sm-12">
                <div id="report3" style="height:800px;" ng-style="{width: chartWidth + 'px'}"/>
            </div>
        </div>
    </div>
</div>
<!--以下为表格数据Start-->
<div class="row" style="border-top: 1px dotted #d5c4c4; padding-top: 20px">
    <div class="col-sm-6">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#c1"
                   onclick="return false;"
                   data-toggle="tab">终端销量</a>
            </li>
        </ul>
        <table class="table table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>商业名称</th>
                <th>商业批发销量</th>
                <th>医疗终端销量</th>
                <th>零售终端销量</th>
                <th>第三终端销量</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="row in vm.reportData.NormalSaleTab">
                <td>
                    {{ $index+1 }}
                </td>
                <td>
                    {{ row.EntInfoName }}
                </td>
                <td>
                    {{ row.BusiSaleCount}}
                </td>
                <td>
                    {{ row.MedicalCount}}
                </td>
                <td>
                    {{ row.RetailCount}}
                </td>
                <td>
                    {{ row.ThirdCount }}
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="col-sm-6">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#c2"
                   onclick="return false;"
                   data-toggle="tab">窜货明细</a>
            </li>
        </ul>
        <!--<rt-data-grid rt-page-record-count="vm.reportData.CrossOutsTotalCount"-->
        <!--rt-page-index="vm.pageIndex" rt-page-size="vm.pageSize"-->
        <!--rt-get-data="vm.getCrossOutByPage()"-->
        <!--rt-rows="vm.reportData.CrossOuts"-->
        <!--rt-auto-height="240">-->
        <table class="table table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>上传年月</th>
                <th>上游发货企业</th>
                <th>上游省市</th>
                <th>窜货数量</th>
                <th>下游企业</th>
                <th>下游省市</th>
                <th>下游类型</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="row in vm.reportData.CrossOuts">
                <td>
                    {{$index+1}}
                </td>
                <td>
                    {{row.BillDate}}
                </td>
                <td>
                    {{row.FromEntName}}
                </td>
                <td>
                    {{row.FromProvName}}
                </td>
                <td>
                    {{row.CrossOut}}
                </td>
                <td>
                    {{row.ToEntName}}
                </td>
                <td>
                    {{row.ToProvName}}
                </td>
                <td>
                    {{row.ToEntType}}
                </td>
            </tr>
            </tbody>
        </table>
        <!--</rt-data-grid>-->

    </div>
</div>


