<template>
  <div id="test-list-tab">
    <list-tab :tab="tabsTitle">
      <template v-slot:title>
        测试标签页框架标题
      </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:main1>
        <list type="1" :dataList="dataList1" :totalRow="totalRow1" @changePage="changePage" @selectInfo="selectInfo"></list>
      </template>
      <template v-slot:main2>
        <list type="2" :dataList="dataList2" :totalRow="totalRow2" @changePage="changePage" @selectInfo="selectInfo"></list>
      </template>
      <template v-slot:main3>
        <list type="3" :dataList="dataList3" :totalRow="totalRow3" @changePage="changePage" @selectInfo="selectInfo"></list>
      </template>
    </list-tab>
  </div>
</template>

<script>
import search from '@/components/search.vue';
import list from './test-list-tab/list.vue';
import listTab from '@/layout/list-tab.vue';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'test-list-tab',
  props: {},
  components: {
    listTab,
    list,
    search,
  },
  data: () => ({
    testList: [{ label: 'test', value: 1 }, { label: 'name', value: 2 }, { label: 'lock', value: 3 }, { label: 'not', value: 4 }],
    tabsTitle: ['标签页1', '标签页2', '标签页3'],
    select: '',
    dataList1: [],
    totalRow1: 20,
    pageIds1: [],
    dataList2: [],
    totalRow2: 50,
    pageIds2: [],
    dataList3: [],
    totalRow3: 10,
    pageIds3: [],
  }),
  created() {
    this.search();
  },
  computed: {},
  methods: {
    ...mapActions(['getList']),
    test(data) {
      console.log(data);
    },
    async search() {
      let result = await this.getList();
      this.$set(this, `dataList1`, result);
      this.$set(this, `dataList2`, result);
      this.$set(this, `dataList3`, result);
    },
    changePage({ type, currentPage }) {
      //type=>哪个标签页
      //currentPage=>标签页的当前页,用来计算skip的
      console.log(type, currentPage);
      //根据type查询对应的数据
    },
    selectInfo({ type, ids }) {
      //type=>哪个标签页
      //ids,选择的id
      console.log(type, ids);
      //缓存在本组件中(this.$set在本组件中),为之后的批量操作使用
    },
  },
};
</script>

<style lang="less" scoped></style>
