<script>
import { reactive , watch,ref,getCurrentInstance} from 'vue'
export default{
  props: ['data','rowKey','style','primaryKey','pageInfo','filterOptions','showFilter','hidePagenation','pageSelection'],
  setup(props,context){
    const doDefaultSelect = () => {
      if(props.pageSelection){
        let currentData = selection[page.base.current]
        currentData && props.data.map(item=>{
          currentData.find(i=>i[props.primaryKey]===item[props.primaryKey]) && table.value.toggleRowSelection(item,true)
        })
      }
    }
    const table = ref(null)
    let page = reactive(props.pageInfo)
    watch(page.base,(newVal,oldVal)=>{
      context.emit('pageChange',newVal)
    })
    watch(props.data,()=>{doDefaultSelect()},{deep: true})
    const formateData = (data) => {
      if(props.pageSelection){
        let data = [];
        let ids = [];
        for(let page in selection){
          let pageItem = selection[page];
          pageItem.map(item=>{
            data.push(item);
            ids.push(item[props.primaryKey]);
          })
        }
        return {
          data,
          ids
        }
      }else{
        return {
          data,
          ids: data.map(item=>item[props.primaryKey])
        }
      }
    }
    let selection  = props.pageSelection?{}:[];
    const customSelection = (val) => {
      if(props.pageSelection){//开启跨页码保存选中的值
        selection[page.base.current] = JSON.parse(JSON.stringify(val));
      }else{
        selection = val;
      }
      context.emit('doSelection',formateData(selection))
    }
    const doFilter = (searchData) => {
      context.emit('doFilter',searchData)
    }
    const handleSelectionChange = (selection) =>{
      context.emit('selection-change',selection)
    };
    const instance = getCurrentInstance();
    
    const autoScrollTop = instance.appContext.app.config.globalProperties.$autoScrollTop;
    const autoScrollHeight = instance.appContext.app.config.globalProperties.$autoScrollHeight;
    function createHandler(methodName) {
      return function(...args) {
        if (props.pageInfo[methodName]) {
          props.pageInfo[methodName](table, ...args);
        }
        if(autoScrollTop){
          //获取vue实例
          table.value.setScrollTop(0)
        }
      }
    }

    const sizeChange = createHandler('sizeChange');
    const currentChange = createHandler('currentChange');
    const prevClick = createHandler('prevClick');
    const nextClick = createHandler('nextClick');


    return {
      page,
      doFilter,
      autoScrollTop,
      autoScrollHeight,
      handleSelectionChange,
      customSelection,
      table,
      sizeChange,
      currentChange,
      prevClick,
      nextClick
    }
  },
}


</script>

<template>
  <div>
    <el-table :row-key="rowKey" 
    ref="table"
    :data="data" 
    stripe 
    @selection-change="handleSelectionChange"
    @select-all="customSelection"
    @select="customSelection"
    :style="style?style:{width:'100%',marginTop:'20px',height:(autoScrollTop?autoScrollHeight:'')}">
      <slot></slot>
    </el-table>
    <el-pagination 
      v-if="!hidePagenation" 
      style="margin-top:10px;" 
      v-model:current-page="page.base.current" 
      v-model:page-size="page.base.limit" 
      @size-change="sizeChange"
      @current-change="currentChange"
      @prev-click="prevClick"
      @next-click="nextClick"
      layout="total,sizes,prev, pager, next" 
      :page-sizes="[8,10, 20,30, 40, 50]" 
      :total="page.total" 
    />
  </div>
</template>

<style scoped>
</style>
