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

    <!--<el-tab-pane label="综合查询" name="listTab">-->
    <!--<div class="block" style="padding-top:30px"/>-->
    <search-div @searchForm="searchForm"/>
    <case-list
      v-loading="listLoading"
      :case-list="caseList"
      :total="total"
      :list-query="listQuery"
      :table-columns="tableColumns"
      @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-->
      <!--&gt;-->
      <!--<div class="block" style="padding-top:30px"/>-->
      <!--<case-detail-read :id="item.index" :row="props[item.index]" @submitProcess="submitProcess"/>-->
      <!--</el-tab-pane>-->
      <!--</el-tabs>-->
  </div>
</template>

<script>
import _ from 'lodash'
import CaseList from '@/components/CaseCommon/caseList'
import CaseDetailRead from '@/components/CaseCommon/caseDetailRead'
import { seoSearch } from '@/api/seo/seo'
import SearchDiv from '@/views/seo/components/searchDiv'

export default {
  name: 'Seo',
  components: { SearchDiv, CaseList, CaseDetailRead },
  data() {
    return {
      props: [], // 存储列表页传递的row
      editableTabsValue: 'listTab',
      editableTabs: [], // tab
      caseList: [], // 案卷列表// ，传递给子组件
      tableColumns: [
        {
          text: '案卷编号',
          value: 'caseid'
        },
        {
          text: '监督员',
          value: 'user'
        },
        {
          text: '发生地点',
          value: 'position'
        },
        {
          text: '所剩时间',
          value: 'remainingTime'
        },
        {
          text: '信息来源',
          value: 'sourceName'
        },
        {
          text: '案卷类别',
          value: 'eorcName'
        },
        {
          text: '节点名称',
          value: 'caseStateName'
        },
        {
          text: '问题描述',
          value: 'description'
        },
        {
          text: '业务单位',
          value: 'onedeptName'
        },
        {
          text: '大类',
          value: 'casetypeName'
        },
        {
          text: '小类',
          value: 'casetypeDetailName'
        }],
      listQuery: {
        offset: 1,
        limit: 10,
        sort: '',
        order: ''
      }, // 筛选条件
      total: 0,
      listLoading: true // 加载动画
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      console.log(this.listQuery)
      this.listLoading = true
      seoSearch(this.listQuery).then(res => {
        this.caseList = res.data.rows
        this.total = parseInt(res.data.total)
        this.listLoading = false
      })
    },
    changeQuery(listQuery) {
      this.listQuery = listQuery
      this.fetchData()
    },
    searchForm(listQuery) {
      debugger
      this.listQuery = listQuery
      console.log('searchForm', this.listQuery)
      this.fetchData(listQuery)
    },
    addDetail(tabPane, row) {
      // if (!this.existTab(tabPane)) {
      //   console.log(tabPane, row)
      //   this.editableTabs.push(tabPane)
      //   this.editableTabsValue = tabPane.name
      //   this.props[tabPane.index] = row
      // } else {
      //   this.editableTabsValue = tabPane.name
      // }
      this.$router.push({ path: '/caseDetailRead/' + row.id })
    },
    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>