<template>
  <div>
    <Card>
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :rowtotal="rowtotal" :columns="columns"  @on-search-data="searchData"    @on-delete="handleDelete"/>
    </Card>
  </div>
</template>
<script>
import Tables from '_c/tables'
import { getTableData } from '@/api/data'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        { title: 'Name', key: 'name', sortable: true },
        { title: 'Email', key: 'email', editable: true },
        { title: 'Create-Time', key: 'createTime' },
        {
          title: 'Handle',
          key: 'handle',
          options: ['delete','edit'],
          button: [
            (h, params, vm) => {
              return h('Poptip', {
                props: {
                  confirm: true,
                  title: '你确定要删除吗?'
                },
                on: {
                  'on-ok': () => {
                    vm.$emit('on-delete', params)
                    vm.$emit('input', params.tableData.filter((item, index) => index !== params.row.initRowIndex))
                  }
                }
              }, [
                h('Button', '自定义删除')
              ])
            }
          ]
        }
      ],
      tableData: [],
      rowtotal:0
    }
  },
  methods: {
    fetchdata(searchinfo){
       getTableData(searchinfo).then(res => {
          console.log(res);
          this.tableData = res.data.results.rows
          this.rowtotal= res.data.results.count
       })

    },
    searchData(searchinfo){
      console.log("searchinfo");
      this.fetchdata(searchinfo);
    },
    handleDelete (params) {
      console.log(params)
    },
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    }
  },
  created(){
      //获取列的元数据
  },
  mounted () {
      var searchInfo=this.$refs.tables.searchInfo
      this.fetchdata(searchInfo)
  }
}
</script>
<style>
</style>
