<template>
  <div class="app-container">
    <TableExhibitionQuery :headers="headers" />
    <el-row>
      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
        <TableExhibitionHeader :headers.sync="headers" />
      </el-col>
      <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
        <TableExhibitionBody :headers="headers" :list="list" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TableExhibitionBody from "./TableExhibitionBody";
import TableExhibitionQuery from "./TableExhibitionQuery";
import TableExhibitionHeader from "./TableExhibitionHeader";
import { genTableSnippet } from "./snippetTable.js";

export default {
  components: {
    TableExhibitionBody,
    TableExhibitionHeader,
    TableExhibitionQuery,
  },
  props: {
    tableData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      list: [],
      code: "",
      headers: [],
      query: {
        limit: 20,
        cursor: 1,
      },
      total: 0,
    };
  },
  watch: {
    tableData: {
      handler(val) {
        this.list = val.data && val.data.slice(0, 3);
        if (this.list) {
          this.headers = Object.keys(this.list[0]).map((item) => {
            // opt 为需要对 字段的操作，''空就不操作，'time' 处理时间，'template' 将字段放在template 里面，方便后续操作
            return {
              value: this.list[0][item],
              key: item,
              label: item,
              show: true,
              opt: "",
              query: false,
            };
          });
        }
      },
      immediate: true,
    },
    headers: {
      handler(val) {
        this.code = genTableSnippet(val, this.getTableAPI);
        this.$store.dispatch("table/setTableCode", this.code);
      },
      deep: true,
    },
  },
  created() {},
  methods: {
    editdata() {},
    test(val) {},
  },
};
</script>