<template>
  <el-card class="box">
    <content-box
      :loading="loading"
      :tableData="tableData"
      :pagination="pagination"
      @getData="getData"
    />
  </el-card>
</template>
<script>
import contentBox from "./components/content";
import { mapState } from "vuex";
export default {
  data() {
    return {
      params: {}
    };
  },
  computed: {
    ...mapState({
      tableData: state => state.approvalRecord.tableData,
      pagination: state => state.approvalRecord.pagination
    }),
    loading: {
      get() {
        return this.$store.state.approvalRecord.loading;
      },
      set(val) {
        this.$store.state.approvalRecord.loading = val;
      }
    }
  },
  components: {
    contentBox
  },
  methods: {
    getData() {
      this.loading = true;
      this.params = {
        page: this.pagination.pageNum,
        limit: this.pagination.pageSize,
        userId: sessionStorage.getItem("userid")
      };
      this.$store.dispatch("approvalRecord/getData", this.params).catch(err => {
        this.loading = false;
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>
<style lang="scss" scoped>
.box {
  background: #f6f8fc;
  height: 1000px;
}
</style>
