<template>
  <div class="saga-audit-record">
    <div class="header">
     <span>时间段：
     <el-date-picker
       v-model="dataValue"
       type="daterange"
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
     />
     </span>
      <span style="margin-left: 20px">
          项目/集团：
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      </span>
      <span style="margin-left: 20px">
          对象类型：
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      </span>
      <span style="margin-left: 20px">
          审核状态：
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      </span>
    </div>
    <div class="content">
      <el-table :data="tableData" height="700" border style="width: 100%;" :header-cell-style="{background:'#eef1f6'}">
        <el-table-column prop="date" label="审核完成时间" align="center"/>
        <el-table-column prop="name" label="集团" align="center"/>
        <el-table-column prop="name" label="项目" align="center"/>
        <el-table-column prop="name" label="对象类型" align="center"/>
        <el-table-column prop="name" label="变更类型" align="center"/>
        <el-table-column prop="name" label="内容" align="center"/>
        <el-table-column prop="name" label="申请人" align="center"/>
        <el-table-column prop="name" label="审核状态" align="center"/>
        <el-table-column prop="name" label="不通过原因" align="center"/>
        <el-table-column prop="name" label="审核人" align="center"/>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      />
    </div>
  </div>
</template>

<script>

  export default {
    name: "auditRecord",
    components: {},
    data() {
      return {
        currentPage: 0,
        dataValue: '',
        value: '',
        options: [],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
        }, {
          date: '2016-05-04',
          name: '王小虎',
        }, {
          date: '2016-05-01',
          name: '王小虎',
        }, {
          date: '2016-05-03',
          name: '王小虎',
        }]
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<style scoped lang="scss">
  .saga-audit-record {
    background: #ffffff;
    border: 1px solid #eee;

    .header {
      margin: 20px;
      overflow: hidden;

      .search {
        float: left;
        width: 20%;
      }

      .button {
        float: right;
      }
    }

    .content {
      margin-top: 20px;

      .cursor {
        cursor: pointer;
      }
    }
    .footer{
      position: absolute;
      bottom: 30px;
      left: 40%;
    }
  }
</style>
