<template>
  <div class="page-wrap">
    <ui-loading :show="page_loading.show"></ui-loading>

    <div class="page-handle-wrap">
      <ul class="handle-wraper bd-b">
        <li class="f-l">
          <div class="text-exp">
            <b>全部信息</b>
          </div>
        </li>
        <li class="f-r">
          <div class="handle-item">
            <Button @click="search.show=!search.show" ghost icon="ios-search" type="primary">搜索</Button>
          </div>

          <div class="handle-item">
            <Button @click="index(1)" icon="md-refresh">刷新</Button>
          </div>

          <div class="handle-item">
            <Button @click="exportExcel" icon="md-download">导出</Button>
          </div>
        </li>
      </ul>

      <div class="search-wrap" v-show="search.show">
        <ul class="handle-wraper">
          <li class="handle-item w-250">
            <AutoComplete
              @on-search="handleCompleteCompanies"
              icon="ios-search"
              placeholder="企业名称"
              v-model.trim="options.name"
            >
              <Option
                :key="item.id"
                :value="item.name"
                v-for="item in completeHandledCompanies"
              >{{ item.name }}</Option>
            </AutoComplete>
          </li>

          <li class="handle-item w-250">
            <DatePicker
              :editable="false"
              placeholder="请选择时间"
              placement="bottom-start"
              type="daterange"
              v-model.trim="options.time"
              :options="datePickerOptionsMonth"
            ></DatePicker>
          </li>
        </ul>

        <ul class="handle-wraper">
          <li class="f-r">
            <div class="handle-item">
              <Button @click="index(1)" ghost type="primary">立即搜索</Button>
            </div>
            <div class="handle-item">
              <Button @click="resetSearch" ghost type="warning">重置搜索</Button>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="page-list-wrap">
      <Table
        :columns="columns"
        :data="data"
        :height="page.limit > 12 ? 610 : ''"
        ref="table"
        stripe
      >
        <template class="table-footer" slot="footer">
          <colgroup class="table-footer-colgroup"></colgroup>
          <thead class="ivu-table">
            <tr>
              <th>
                <div class="ivu-table-cell">总计</div>
              </th>
              <th>
                <div class="ivu-table-cell"></div>
              </th>
              <th>
                <div class="ivu-table-cell">{{stats.total}}</div>
              </th>
              <th>
                <div class="ivu-table-cell">{{stats.counts}}</div>
              </th>
              <th>
                <div class="ivu-table-cell">{{stats.renewed_counts}}</div>
              </th>
              <th v-if="page.limit > 12" rowspan="1"></th>
            </tr>
          </thead>
        </template>
      </Table>
    </div>

    <div class="page-turn-wrap">
      <Page
        :current="Number(page.page)"
        :page-size="Number(page.limit)"
        :page-size-opts="[10, 20, 100, Infinity]"
        :total="Number(page.total)"
        @on-change="changePage"
        @on-page-size-change="changeLimit"
        show-elevator
        show-sizer
        show-total
      ></Page>
    </div>
  </div>
</template>

<script src="./js/index.js"></script>
