<template>
  <div>
    <Card>
      <tables
        ref="tables"
        editable
        searchable
        search-place="top"
        v-model="tableData"
        :columns="columns"
        @on-rapid-query="doquery"
        @on-exec="doexec"
      />
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
      <Forms :fminfo="forminfo"></Forms>
    </Card>
  </div>
</template>

<script>
import Tables from "_c/tables";
import Forms from "./forms/forms";
import { getTableData } from "@/api/data";
export default {
  name: "tables_page",
  components: {
    Tables,
    Forms
  },
  props: {
    metaName: String,
    default: "user_info"
  },
  data() {
    this.metaName = "user_info";
    return {
      forminfo: this.metaName ? this.$store.getters[this.metaName]["form"] : {},
      columns: this.metaName ? this.$store.getters[this.metaName]["list"] : [],
      authbtns: this.metaName
        ? this.$store.getters[this.metaName]["auths"]
        : [],
      tableData: []
    };
  },
  methods: {
    doexec(key, row) {
      console.log(key, row);
    },
    doquery(q) {
      console.log(q);
    },
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`
      });
    }
  },
  mounted() {
    getTableData().then(res => {
      this.tableData = res.data;
    });
  },
  computed: {
    formbtns() {
      return this.authbtns.filter(bt => {
        return bt.isOnForm;
      });
    },
    onlistbtns() {
      return this.authbtns.filter(bt => {
        return bt.isOnGrid;
      });
    },
    inrowbtns() {
      return this.authbtns.filter(bt => {
        return bt.isInRow;
      });
    }
  }
};
</script>

<style>
</style>
