<template>
  <div class="page">
    <el-card>
      <div slot="header" class="header">
        <span>质检</span>
        <el-button type="primary" @click="goBack" icon="el-icon-back" size="mini">返回</el-button>
      </div>
      <content-box
        :loading="tableLoading"
        :tableData="tableData"
        :pagination="pagination"
        @getData="getData"
        @delete="handleDelete"
      />
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { message } from "@/utils/common";
import contentBox from "./content";
import { deleteRecord } from "@/api/dataManagement/qualityCheck";

export default {
  data() {
    return {};
  },
  components:{
    contentBox
  },
  computed: {
    ...mapState({
      tableData: state => state.qualityCheck.tableData,
      pagination: state => state.qualityCheck.pagination,
      entityId: state => state.qualityCheck.entity.entityId,
    }),
    tableLoading: {
      get() {
        return this.$store.state.qualityCheck.tableLoading;
      },
      set(val) {
        this.$store.state.qualityCheck.tableLoading = val;
      }
    }
  },
  methods: {
    goBack(){
      this.$store.commit("qualityCheck/SET_PAGE_TYPE", 1);
    },
    // 获取表格数据
    getData() {
      this.tableLoading = true;
      const reqParams = {
        params: { entityId: this.entityId },
        data: {
          page: this.pagination.pageNum,
          limit: this.pagination.pageSize
        }
      };
      this.$store
        .dispatch("qualityCheck/getData", reqParams)
        .catch(err => {
          this.tableLoading = false;
        });
    },
    handleDelete(id){
      const params = { id };
      deleteRecord(params).then(res => {
        if (res.code === "100") {
          message("success", "删除成功", 2000);
          this.getData();
        }
      });
    }
  },
  created(){
    this.getData()
  },
};
</script>

<style lang="scss" scoped>
.page {
  .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
