<template>
  <div class="app-container">
    <div class="filter-list-form">
      <el-radio-group v-model="currentTab" @input="handleReset" style="margin-bottom:15px">
        <el-radio-button label="审核列表"></el-radio-button>
        <el-radio-button label="审核明细"></el-radio-button>
      </el-radio-group>
      <SearchBoxVue v-if="currentTab === '审核列表'" ref="SearchBoxRef" @search="handleSearch" @reset="handleReset" />
      <CorrectionSearchBoxVue v-else ref="SearchBoxRef" @search="handleSearch" @reset="handleReset" />
    </div>
    <TableBoxVue v-if="currentTab === '审核列表'" :loading="loading" :data="tableData" />
    <CorrectionTableBoxVue v-else :loading="loading" :data="tableData"/>
    <div class="filter-list-table-pagination">
      <mPagination v-if="tableData && tableData.length !== 0" :data="paginationData" @pageChangeEvent="pageHasChanged"></mPagination>
    </div>
  </div>
</template>

<script>
import mPagination from '@/components/m-pagination';
import CorrectionSearchBoxVue from '@/views/recordsRoom/qc/components/correction/SearchBox.vue'
import CorrectionTableBoxVue from '@/views/recordsRoom/qc/components/correction/TableBox.vue'
import SearchBoxVue from '@/views/recordsRoom/qc/components/SearchBox.vue'
import TableBoxVue from '@/views/recordsRoom/qc/components/TableBox.vue'
import pagination from '@/components/Pagination/index2.vue'
import { getBlZkList, getCorrectionList } from '@/api/qc'
let current = ''

export default {
  components: {
    mPagination,
    SearchBoxVue,
    TableBoxVue,
    pagination,
    CorrectionSearchBoxVue,
    CorrectionTableBoxVue
  },
  data() {
    return {
      currentTab: '审核列表',
      loading: false,
      tableData: [],
      paginationData: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      current: ''
    }
  },
  created() {},
  activated() {
    this.getList()
  },
  beforeRouteEnter(to, from, next) {
    current = from.query.ZYH || ''
    // console.log('>>>>>>>>>111', a, b)
    next()
  },
  methods: {
    getList() {
      this.loading = true;
      (this.currentTab === '审核列表' ? getBlZkList : getCorrectionList)({
        ...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
         // 切换选中状态
        Array.isArray(this.tableData) && this.tableData.map(item => {
          item.selected = item.ZYH == current ? true : false
        })
      }).catch(error => {
        console.log(error)
      }).finally(() => {
        this.loading = false
      })
    },
   
    pageHasChanged(params) {
      this.getList()
    },
    handleSearch() {
      this.$nextTick(() => {
        this.paginationData.currentPage = 1
        this.getList()
      })
    },
    handleReset() {
      this.handleSearch()
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination-container {
  background-color: rgba(244,244,244,1);
  padding: 0 20px;
  display: flex;
  justify-content: flex-end;
  .cus-total {
    float: none;
    line-height: 28px;
  }
  .el-pagination {
    float: none;
  }
}
</style>
