<template>
  <div class="wrap-box" v-loading="viewLoding">
    <el-card class="box-card">
      <!-- 表格组件 -->
      <tableView
        :getTableData="tabledata"
        @pageTruning="changeTrunig"
        :getsearchData="searchData"
        @refreshData="parentGetDataMethod"
      ></tableView>
    </el-card>
  </div>
</template>
<script>
import tableView from "./tableView/index.vue";
import { selectMsgTmpl } from "@/api/system/configure-messages";
const pagaData = { current: 1, size: 10 };
export default {
  name: "wrapView",
  components: {
    tableView
  },
  data() {
    return {
      curetPage: 1, //表格当前在第几页
      size: 10, //表格一页有几条数据
      tabledata: {}, //接口请求到的表格数据
      viewLoding: false, //数据加载中loding
      searchData: {}
    };
  },
  created() {
    //刚进入页面请求数据
    this.getTableData(pagaData);
  },
  watch: {
    tabledata(newData) {
      console.log("BBBBBBB", newData);
    }
  },
  methods: {
    //获取表格数据接口
    getTableData(data) {
      this.viewLoding = true;
      selectMsgTmpl({ ...data })
        .then(res => {
          this.viewLoding = false;
          if (res.success === true) {
            this.tabledata = res.data;
            this.curetPage = data.current;
            this.size = data.size;
            this.$nextTick(() => {
              console.log("数据和DOM已更新");
            });
          }
        })
        .catch(error => {
          this.viewLoding = false;
          console.error("AAAAAAA", error);
        });
    },
    parentGetDataMethod() {
      this.getTableData({
        ...this.searchData,
        current: this.curetPage,
        size: this.size
      });
    },
    //分页器改变触发
    changeTrunig(pageTrunig) {
      this.getTableData({
        ...this.searchData,
        current: pageTrunig.current,
        size: pageTrunig.size
      });
    }
  }
};
</script>
<style scoped>
.wrap-box {
  padding: 5px;
}
</style>
