<template>
    <div class="app-container">
      <SearchBoxVue class="filter-list-form" ref="SearchBoxRef" @search="handleSearch" @reset="handleReset" />
      <div class="filter-list-action">
        <el-row type="flex" justify="space-between" align="middle">
          <mPagination v-if="tableData && tableData.length !== 0" :data="paginationData" @pageChangeEvent="pageHasChanged"></mPagination>
          <el-row type="flex" justify="end" style="flex:1">
            <el-button @click="openAddPlanModal" type="primary">新建计划</el-button>
          </el-row>
        </el-row>
        <TableBoxVue :loading="loading" :data="tableData" ref="tableRef"/>
      </div>
      <AddPlanModalBoxVue ref="AddPlanModalBoxVueRef" @onUpdate="getList"/>
    </div>
  </template>
  
  <script>
  import mPagination from '@/components/m-pagination';
  import SearchBoxVue from '@/views/recordsRoom/qc/components/qualityControlPlan/SearchBox.vue'
  import TableBoxVue from '@/views/recordsRoom/qc/components/qualityControlPlan/TableBox.vue'
  import AddPlanModalBoxVue from '@/views/recordsRoom/qc/components/qualityControlPlan/AddPlanModal.vue'
  import pagination from '@/components/Pagination/index2.vue'
  import { getCaseAppealList } from '@/api/admin'
  
  export default {
    components: {
      mPagination,
      SearchBoxVue,
      TableBoxVue,
      pagination,
      AddPlanModalBoxVue
    },
    data() {
      return {
        loading: false,
        tableData: [],
        paginationData: {
          total: 0,
          currentPage: 1,
          pageSize: 10
        },
      }
    },
    created() {
    },
    mounted() {
      this.getList()
    },
    methods: {
      getList() {
        this.loading = true
        getCaseAppealList({
          ...this.$refs.SearchBoxRef.formData,
          page: this.paginationData.currentPage,
          page_size: this.paginationData.pageSize
        }).then(res => {
          this.paginationData.total = res.data.count
          this.tableData = res.data.list
          this.$refs.tableRef.selectedArray = []
        }).catch(error => {
          console.log(error)
        }).finally(() => {
          this.loading = false
        })
      },
  
      pageHasChanged() {
        this.getList()
      },
      handleSearch() {
        this.paginationData.currentPage = 1
        this.getList()
      },
      handleReset() {
        this.handleSearch()
      },
      openAddPlanModal() {
        this.$refs.AddPlanModalBoxVueRef.openModal()
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  </style>
  