<template>
  <div class="<%=className>">
    <Search @search="search"></Search>

    <ElTable
      class="table-part"
      :tableData="tableData"
      @look="look"
      @edit="edit"
      @remove="remove"
    ></ElTable>
    <ElPagination
      class="pagination-part"
      :paginationData="paginationData"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
    ></ElPagination>

    <EditDialog :dialogShow.sync="dialogShow" :dialogData="dialogData" @submit="submit"></EditDialog>
  </div>
</template>

<script>
// 数据模型JSON
import { tableData, paginationData, dialogData } from "./module";

// 组件
import Search from "./components/Search.vue";
import ElTable from "./components/Table.vue";
import ElPagination from "./components/Pagination.vue";
import EditDialog from "./components/EditDialog.vue";

export default {
  data() {
    return {
      tableData: tableData,
      paginationData: paginationData,

      // 编辑弹窗
      dialogShow: false,
      dialogData: dialogData
    };
  },
  components: {
    Search,
    ElTable,
    ElPagination,
    EditDialog,
  },
  methods: {
    search(searchParam) {
      console.log('搜索')
      console.log(searchParam)
    },
    look(row) {
      console.log("look", row);
      this.dialogData.title = '新建'
      this.dialogShow = true
    },
    edit(row) {
      console.log("edit", row);
      this.dialogData.title = '编辑'
      this.dialogShow = true
    },
    remove(row) {
      console.log("remove", row);
    },
    sizeChange(row) {
      console.log("改变每页的step为：", row);
    },
    currentChange(row) {
      console.log("改变当前页", row);
    },
    submit(form) {
      console.log("编辑数据", form);
    }
  },
};
</script>

<style lang="scss" scoped>
.<%=className> {
  padding-top: 20px;
  width: 920px;
  margin: 0 auto;
  .table-part {
    width: 920px;
    margin-bottom: 10px;
  }
}
// .<%=className> {
//   padding-top: 20px;
//   width: calc(100% );
//   padding: 20px;
//   // margin: 20px;
//   background: #fff;
//   box-sizing: border-box;
//   .table-part {
//     // padding: 10px;
//     margin-bottom: 10px;
//   }
// }
</style>
