<template>
  <el-card class="box">
    <content-box :loading="loading" :showButtons="showButtons" :tableData="tableAllData" :pagination="pagination" @getData="getAllData"></content-box>
  </el-card>
</template>
<script>
  import contentBox from "./components/content";
  import {
    mapState
  } from "vuex";
  export default {
    data() {
      return {
        params: {},
        menuId: ""
      };
    },
    computed: {
      ...mapState({
        tableAllData: state => state.approvalManagement.tableAllData,
        pagination: state => state.approvalManagement.pagination,
        showButtons: (state) => state.approvalManagement.showButtons,
      }),
      loading: {
        get() {
          return this.$store.state.approvalManagement.loading;
        },
        set(val) {
          this.$store.state.approvalManagement.loading = val;
        }
      }
    },
    components: {
      contentBox
    },
    methods: {
      getAllData() {
        this.loading = true;
        this.params = {
          page: this.pagination.pageNum,
          limit: this.pagination.pageSize,
          //userId: sessionStorage.getItem("userid")
        };
        this.$store
          .dispatch("approvalManagement/getAllData", this.params)
          .catch(err => {
            this.loading = false;
          });
      }
    },
    created() {
      this.getAllData();
      this.menuId = this.$getMenuId(
        sessionStorage.getItem("routerIdList"),
        this.$route.path
      );
      let btnData = {
        menuid: this.$getMenuId(sessionStorage.getItem("routerIdList"), this.$route.path),
        roleid: sessionStorage.getItem("roleid")
      }
      this.$store.dispatch("approvalManagement/getButtonList", btnData);
    }
  };

</script>
<style lang="scss" scoped>
  .box {
    background: #f6f8fc;
    height: 1000px;
  }

</style>
