<template>
  <app-container>
    <search-form :list-query="listQuery" @searchForm="searchForm"/>
    <case-list
      v-loading="listLoading"
      :case-list="caseList"
      :total="total"
      :list-query="listQuery"
      :table-columns="tableColumns"
      show-cancel
      @changeQuery="changeQuery"
      @addDetail="addDetail"
      @cancel="cancel"/>
  </app-container>
</template>

<script>
import CaseList from '@/components/CaseCommon/caseList'
import SearchForm from '@/components/CaseCommon/searchForm'
import { completedListPage } from '@/api/coorBusiness/case'
import { cancelTask } from '@/api/coorBusiness/process'

export default {
  name: 'Index',
  components: { CaseList, SearchForm },
  data() {
    return {
      props: [], // 存储列表页传递的row
      editableTabsValue: 'listTab',
      editableTabs: [], // tab
      caseList: [], // 案卷列表，传递给子组件
      listQuery: {
        offset: 1,
        limit: 10,
        sort: '',
        order: ''
      }, // 筛选条件
      total: 0,
      listLoading: true, // 加载动画
      tableColumns: [
        {
          text: '案卷编号',
          value: 'caseid'
        },
        {
          text: '节点名称',
          value: 'caseStateName'
        },
        {
          text: '信息来源',
          value: 'sourceName'
        },
        {
          text: '案卷类别',
          value: 'eorcName'
        },
        {
          text: '案卷描述',
          value: 'description'
        }
      ]
    }
  },
  mounted() {
    this.fetchData()
  },
  activated() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      console.log(this.listQuery)
      this.listLoading = true
      const res = await completedListPage(this.listQuery)
      this.caseList = res.data.rows
      this.total = parseInt(res.data.total)
      this.listLoading = false
      console.log(this.caseList)
    },
    changeQuery(listQuery) {
      this.listQuery = listQuery
      this.fetchData()
    },
    searchForm(listQuery) {
      this.listQuery = listQuery
      console.log('searchForm', this.listQuery)
      this.fetchData()
    },
    addDetail(tabPane, row) {
      this.$router.push({
        path: '/caseDetaliProcess',
        query: {
          id: row.id,
          showProcess: false,
          showNeedVisit: true
        }
      })
    },
    cancel(row) {
      this.$confirm('确定撤销申请吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确定
        const cancelForm = {
          'bizId': row.id,
          'processId': row.processId,
          'caseState': row.caseState
        }
        cancelTask(cancelForm).then(res => {
          this.$message.success('请求成功')
          this.fetchData()
        })
      })
    }
  }
}
</script>