<template>
  <div class="page-wrap">
    <ui-loading :show="page_loading.show"></ui-loading>
    <div class="product-content">
      <div class="nav">
        <div class="search umar-t5">
          <Input v-model="inputValue" placeholder="输入名称进行过滤"></Input>
        </div>
        <div class="box">
          <CellGroup @on-click="index" v-for="item in companies" :key="item.id">
            <Cell
              :name="item.id"
              :selected="item.id == params.company_id ? true : false"
              :title="item.name"
            />
          </CellGroup>
        </div>
      </div>
      <div class="info-wrap">
        <div class="page-handle-wrap">
          <ul class="handle-wraper bd-b">
            <li class="f-l">
              <div class="text-exp">
                <b>{{company.name}}</b>
              </div>
            </li>
          </ul>

          <div class="search-wrap">
            <ul class="handle-wraper">
              <li class="handle-item lh-32">查询时间</li>

              <li class="handle-item">
                <DatePicker
                  :editable="false"
                  placeholder="开始时间"
                  placement="bottom-start"
                  type="month"
                  v-model.trim="params.starttime"
                ></DatePicker>
              </li>

              <li class="handle-item lh-32">-</li>

              <li class="handle-item">
                <DatePicker
                  :editable="false"
                  placeholder="结束时间"
                  placement="bottom-start"
                  type="month"
                  v-model.trim="params.endtime"
                ></DatePicker>
              </li>

              <li class="f-r">
                <div class="handle-item" v-if="data.length">
                  <Button @click="exportData" type="warning">导出</Button>
                </div>
                <div class="handle-item">
                  <Button @click="index()" 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 ? data : []" ref="table"></Table>
        </div>
      </div>
    </div>
  </div>
</template>

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

<style lang="less" scoped>
.page-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0;
  .product-content {
    display: flex;
    height: 100%;
    .nav {
      width: 20%;
      background: #fff;
      padding: 10px;
      .box {
        margin-top: 10px;
        overflow-x: hidden;
        overflow-y: auto;
        height: calc(100% - 5px);
      }
    }
    .info-wrap {
      width: 80%;
    }
  }
}
</style>
