<template>
  <div id="list">
    <list-normal>
      <template v-slot:batch>
        <el-row type="flex" justify="end">
          <el-col :span="4"></el-col>
          <el-col :span="3">
            <el-dropdown>
              <el-button size="small" style="width:6.5rem" type="success" plain icon="el-icon-s-check">批量审核</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>审核成功</el-dropdown-item>
                <el-dropdown-item>审核失败</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!-- <el-button style="width:100%" size="small" type="success" plain icon="el-icon-s-check">批量审核</el-button> -->
          </el-col>
          <el-col :span="3">
            <el-dropdown>
              <el-button style="width:6.5rem" size="small" type="primary" plain icon="el-icon-document-copy" @click="test">批量导出</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>审核成功</el-dropdown-item>
                <el-dropdown-item>审核失败</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
          <el-col :span="3"><el-button style="width:6.5rem" size="small" type="info" plain icon="el-icon-refresh">同步数据</el-button></el-col>
          <el-col :span="3"><el-button style="width:6.5rem" size="small" type="warning" plain icon="el-icon-printer">批量打印</el-button></el-col>
          <el-col :span="3"><el-button style="width:6.5rem" size="small" type="danger" plain icon="el-icon-delete">批量删除</el-button></el-col>
        </el-row>
      </template>
      <template v-slot:main>
        <el-table :data="dataList" :stripe="true" :border="true" @select="selectInfo" @select-all="selectInfo">
          <el-table-column align="center" type="selection" width="40"> </el-table-column>
          <el-table-column align="center" label="姓名" sortable prop="name"></el-table-column>
          <el-table-column align="center" label="年龄" sortable prop="age"></el-table-column>
          <el-table-column align="center" label="电话" prop="tel"></el-table-column>
          <el-table-column align="center" label="操作">
            <template v-slot="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-row class="row_pagination">
          <el-col :span="24">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="15"
              layout="total, prev, pager, next, jumper"
              :total="totalRow"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </template>
    </list-normal>
  </div>
</template>

<script>
import listNormal from '@/layout/list-normal.vue';
export default {
  name: 'list',
  props: {
    type: { type: String, defalut: 'none' },
    dataList: { type: Array, defalut: () => [] },
    totalRow: { type: Number, defalut: 0 },
  },
  components: {
    listNormal,
  },
  data: () => ({
    currentPage: 1,
  }),
  created() {},
  computed: {},
  methods: {
    selectInfo(selection) {
      //选择/全选方法,删除或者其他批量操作使用
      let ids = [];
      selection.map(item => {
        ids.push(item.id);
      });
      this.$emit('selectInfo', { type: this.type, ids: ids });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.$emit('changePage', { type: this.type, currentPage: this.currentPage });
    },
  },
};
</script>

<style lang="less" scoped>
.row_pagination {
  text-align: right;
  margin-top: 1rem;
}
</style>
