<template>
  <div class="page-test page-body">
    <div class="page-search">
      <div class="title">搜索：</div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--表格-->
    <el-table
        :data="tableData"
        :header-row-style="table.layout.header"
        :row-style="table.layout.row"
        :highlight-current-row=true
        style="width: 100%">
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
        class="page-pagination"
        background
        layout="prev, pager, next"
        :total="1000">
    </el-pagination>

  </div>
</template>

<script>
  export default {
    name: 'Test',
    data () {
      return {
        table: {
          layout: {
            header: {
              height: '60px',
              fontSize: '14px'
            },
            row: {
              height: '60px'
            }
          }
        },
        formInline: {
          user: '',
          region: ''
        },
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      onSubmit () {
        console.log('submit!')
      }
    }
  }
</script>

<style lang="less" scoped>
  .page-body {
    .title {
      font-size: 20px;
      font-weight: normal;
      margin-bottom: 10px;
    }
  }

  .page-table {
    .el-card__body {
      padding-top: 0;
    }
  }

  .page-search {
    background: #F7F7F7;
    box-sizing: border-box;
    padding: 22px 10px 0;
    margin-bottom: 10px;

    .title {
      display: none;
    }
  }
  .page-pagination{
    text-align: center;
    margin: 20px auto;
  }
</style>
