<template>
  <div id="home">
    <list-normal>
      <template v-slot:title>
        <!-- 此处v-slot:title后可以加="data",data代表将slot传来的参数再次封装后的key=>{data:params}(data可以随意替换),
        也就是说,想取到最后的数据集,我们需要解开1层object,(template声明的名称).(slot :xxx绑定名称的 xxx)才能取到数据 -->
        <!-- 当然,我们现在没涉及用上述功能,只是就想搞明白而已╮(╯▽╰)╭ -->
        <!-- 如果组件文件夹下的needOrNot文件夹的组件可以使用,那么这部分就应该需要理解了,因为操作按钮部分是需要自己写 -->
        测试普通列表标题
      </template>
      <template v-slot:functionBar>
        <el-col :span="6">
          <search v-model="select" type="select" :dataList="testList"></search>
        </el-col>
        <el-col :span="6">
          <search v-model="select"></search>
        </el-col>
        <el-col :span="2">
          <el-button type="info" circle icon="el-icon-search icons"></el-button>
        </el-col>
      </template>
      <template v-slot:addBtn>
        <el-button type="success" icon="el-icon-plus">新增</el-button>
      </template>
      <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 search from '@/components/search.vue';
import listNormal from '@/layout/list-normal.vue';
import _ from 'lodash';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'home',
  components: {
    listNormal,
    search,
  },
  data: () => ({
    testList: [{ label: 'test', value: 1 }, { label: 'name', value: 2 }, { label: 'lock', value: 3 }, { label: 'not', value: 4 }],
    dataList: [],
    select: '',
    listSelect: [],
    currentPage: 1,
    totalRow: 60,
  }),
  created() {
    this.search();
  },
  methods: {
    ...mapActions(['getList']),
    test() {
      console.log('in function:');
    },
    async search() {
      let result = await this.getList();
      this.$set(this, `dataList`, result);
    },
    selectInfo(selection) {
      //选择/全选方法,删除或者其他批量操作使用
      let ids = [];
      selection.map(item => {
        ids.push(item.id);
      });
      this.$set(this, `listSelect`, ids);
      console.log(ids);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.search();
    },
  },
};
</script>

<style lang="less" scoped>
.row_pagination {
  text-align: right;
  margin-top: 1rem;
}
.icons {
  zoom: 2;
  position: relative;
  top: 0.5rem;
}
</style>
