<template>
  <el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab">

    <el-tab-pane label="延期待处理列表" name="listTab">
      <div class="block" style="padding-top:30px"/>
      <search-form :list-query="listQuery" @searchForm="searchForm"/>
      <case-list
        v-loading="listLoading"
        :case-list="caseList"
        :total="total"
        :list-query="listQuery"
        @changeQuery="changeQuery"
        @addDetail="addDetail"/>
    </el-tab-pane>

    <el-tab-pane
      v-for="(item) in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
      closable
    >
      <div class="block" style="padding-top:30px"/>
      <case-detail :id="item.index" :row="props[item.index]" @submitProcess="submitProcess"/>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import _ from 'lodash'
import CaseList from '@/components/CaseCommon/caseList'
import CaseDetail from '@/components/CaseCommon/caseDetail'
import SearchForm from '@/components/CaseCommon/searchForm'
import { delayedListPage } from '@/api/coorBusiness/case'

export default {
  name: 'Index',
  components: { CaseList, CaseDetail, SearchForm },
  data() {
    return {
      props: [], // 存储列表页传递的row
      editableTabsValue: 'listTab',
      editableTabs: [], // tab
      caseList: [], // 案卷列表，传递给子组件
      listQuery: {
        offset: 1,
        limit: 10,
        sort: '',
        order: ''
      }, // 筛选条件
      total: 0,
      listLoading: true // 加载动画
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      console.log(this.listQuery)
      this.listLoading = true
      const res = await delayedListPage(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) {
      if (!this.existTab(tabPane)) {
        console.log(tabPane, row)
        this.editableTabs.push(tabPane)
        this.editableTabsValue = tabPane.name
        this.props[tabPane.index] = row
      }
    },
    submitProcess(caseid) {
      this.removeTab('case' + caseid)
      this.fetchData()
    },
    existTab(tabPane) {
      const tab = _.find(this.editableTabs, ['index', tabPane.index])
      return tab
    },
    removeTab(targetName) {
      console.log('removeTab', targetName)
      const tabs = this.editableTabs
      let activeName = this.editableTabsValue
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }

      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter(tab => tab.name !== targetName)

      if (this.editableTabs.length === 0) {
        this.editableTabsValue = 'listTab'
      }
    }
  }

}
</script>

<style>
.el-tabs__nav-scroll {
    overflow: hidden;
    background-color: white;
    width: 100%;
    position: fixed;
    z-index: 10000;
    border-top: 1px #e4e7ed solid;
    border-bottom: 1px #e4e7ed solid;
}
</style>