<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <div class="result-filter">
      <ListFilterForm @filter="onFilter" />
    </div>
    <!-- 表格内容 -->
    <div class="result-table">
      <!-- 表格按钮 -->
      <div class="result-table-btns">
        <el-button
          type="primary"
          @click="onAdd"
        >新增</el-button>
      </div>
      <!-- 表格 -->
      <ListTable
        :loading="loading"
        :data="tableData"
        :pagination="pagination"
        :selected-rows.sync="selectedRows"
        @filter="onFilter"
        @onShow="onShow"
        @onEdit="onEdit"
        @onDelete="onDelete"
        @onAudit="onAudit"
      />
    </div>
  </div>
</template>

<script>
import { contractsPageApi, contractsManageApi } from '@/api/contracts'
import ListTable from './components/ListTable.vue'
import ListFilterForm from './components/ListFilterForm.vue'
export default {
  components: {
    ListTable,
    ListFilterForm
  },
  data() {
    return {
      tableData: [],
      pagination: {
        pageIndex: 0,
        total: 0,
        pageSize: 10
      },
      filter: {
        pageIndex: 1,
        pageSize: 10
      },
      selectedRows: [],
      loading: false
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    onFilter(filter = {}) {
      this.loadData(filter)
    },
    loadData(filtter = {}) {
      const params = {
        ...this.filter,
        ...filtter
      }
      this.loading = true
      contractsPageApi(params).then(res => {
        const { data } = res
        this.filter = params
        this.tableData = data.result
        this.pagination = {
          ...this.pagination,
          pageIndex: params.pageIndex,
          pageSize: params.pageSize,
          total: data.total
        }
        this.loading = false
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    // 添加
    onAdd() {
      console.log('onAdd')
    },
    // 详情
    onShow(row) {
      console.log(row)
    },
    // 修改
    onEdit(row) {
      console.log(row)
    },
    // 删除
    onDelete(row) {
      console.log(row)
    },
    // 审核
    onAudit(row) {
      console.log(row)
      const params = {
        id: [row.id],
        operateType: 3
      }
      this.loading = true
      contractsManageApi(params).then(res => {
        this.loading = false
        this.$message({
          type: 'success',
          message: res.msg
        })
      }).catch(err => {
        this.loading = false
        console.log(err)
        this.$message({
          type: 'danger',
          message: err.msg
        })
      })
    }
  }
}
</script>

<style scoped>
.result-table{
  background-color: #ffffff;
}
.result-table-btns{
  text-align: right;
  margin-bottom: 15px;
}
</style>
