<template>
  <my-crumb-slot index="2">
    <my-button size="mini" :loading="state.loading">测试排序2</my-button>
    <my-button type="primary" size="mini" :loading="state.loading" @click="handleReload">更新</my-button>
  </my-crumb-slot>
  <my-crumb-slot index="1">
    <a-button type="primary" size="mini">测试排序1</a-button>
  </my-crumb-slot>
  <my-table ref="table" history load v-model:loading="state.loading" :columns="columns" :api="GET_PAGE" @change="handleChange">
    <template #search="{ loading , onClick }">
      <my-crumb-slot index="0">
        <a-button size="mini" type="primary" :loading="loading" @click="onClick">搜索</a-button>
      </my-crumb-slot>
    </template>
    <template #params="{ params }">
      <my-input v-model="params.keyword" placeholder="关键字"/>
      <my-input v-model="params.keyword" placeholder="关键字2"/>
      <my-input v-model="params.keyword" placeholder="关键字3"/>
      <my-input v-model="params.keyword" placeholder="关键字4"/>
      <my-input v-model="params.keyword" placeholder="关键字5" allow-clear/>
      <my-select v-model="params.type" :options="[{label:'选项',value:'1'}]" placeholder="类型" allow-clear/>
    </template>
  </my-table>
</template>
<script lang="jsx">

export default {
  name : 'MemberList' ,

}
</script>
<script lang="jsx" setup>
import { getCurrentInstance , reactive } from 'vue'
import { useRouter } from 'vue-router'
import { columns } from './columns'

const router = useRouter()
const state = reactive({ loading : false })

const page = getCurrentInstance()

const handleChange = (items,params) => {
  console.log('handleChange',items,params)
}

const handleReload = () => {
  return page.refs.table.doSearch()
}


</script>

<style lang="less">
.my-input,.my-select{
  width: 200px;
}
.fix-wrap{
  padding: 20px;
  overflow: hidden;

}
.page-bar{
  height: 50px;
  flex-shrink: 0;
}
</style>