<template>
  <div class="main-content m20">
    <el-tabs v-model="type" type="card">
      <el-tab-pane label="撤销吊销待办" name="todo" />
      <el-tab-pane label="撤销吊销记录" name="history" />
    </el-tabs>

    <div class="content-header">
      <div class="body search-body">
        <el-row class="mb10">
          <el-col :span="12">
            <label class="label-name">统一社会信用代码/注册号：</label>
            <div class="search-input-box">
              <el-input v-model="searchForm.uniscid" clearable size="mini" placeholder="请输入统一社会信用代码/注册号" @keyup.enter.native="loadPage" />
            </div>
          </el-col>
          <el-col :span="12">
            <label class="label-name">主体名称：</label>
            <div class="search-input-box">
              <el-input v-model="searchForm.entname" clearable size="mini" placeholder="请输入主体名称" @keyup.enter.native="loadPage" />
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :offset="1">
            <div class="btn-box">
              <el-button v-if="type === 'todo'" type="primary" size="mini" @click="openSubjectDialog">个案办理</el-button>
              <el-button type="primary" size="mini" @click="loadPage">查询</el-button>
              <el-button size="mini" @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="content-body">
      <div class="body">
        <el-table
          v-loading="loading"
          size="mini"
          :data="tableData"
          :fit="true"
          :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
        >
          <el-table-column type="index" label="序号" width="70" align="center" />
          <el-table-column prop="bizSeq" label="业务编号" min-width="180" show-overflow-tooltip />
          <el-table-column prop="uniscid" label="统一社会信用代码" min-width="180" show-overflow-tooltip />
          <el-table-column prop="regno" label="注册号" min-width="140" show-overflow-tooltip />
          <el-table-column prop="entname" label="主体名称" min-width="220" show-overflow-tooltip />
          <el-table-column prop="revokeReason" label="吊销原因" min-width="220" show-overflow-tooltip />
          <el-table-column prop="currentNodeName" label="当前节点" min-width="120" show-overflow-tooltip />
          <el-table-column prop="createTime" label="创建时间" min-width="170" show-overflow-tooltip />
          <el-table-column label="操作" width="100" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="handleRow(scope.row)">{{ type === 'todo' ? '办理' : '查看' }}</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="page-box">
          <el-pagination
            :disabled="loading"
            :current-page="pageParam.current"
            :page-size="pageParam.size"
            :total="pageParam.total"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            layout="slot,total, sizes, prev, pager, next, jumper"
            @size-change="pageSizeChange"
            @current-change="pageIndexChange"
          >
            <span>
              第 {{ pageParam.current }} 页 /
              共 {{ pageParam.total !== 0 ? parseInt((pageParam.total + pageParam.size - 1) / pageParam.size) : 1 }} 页
            </span>
          </el-pagination>
        </div>
      </div>
    </div>

    <SubjectSelectDialog ref="subjectDialog" @started="onStarted" />
  </div>
</template>

<script>
import SubjectSelectDialog from './components/SubjectSelectDialog.vue'
import { apiCancelRevokeRecords, apiCancelRevokeTodoList } from '@/api/auto-baseapi'

export default {
  components: { SubjectSelectDialog },
  data() {
    return {
      type: this.$route.meta.type,
      loading: false,
      searchForm: {
        uniscid: '',
        entname: ''
      },
      tableData: [],
      pageParam: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  watch: {
    type(val) {
      this.$router.replace({ path: `/revoke/cancelRevoke/${val}` })
    },
    '$route.meta.type'(val) {
      this.type = val
      this.pageParam.current = 1
      this.loadPage()
    }
  },
  mounted() {
    this.loadPage()
  },
  methods: {
    openSubjectDialog() {
      this.$refs.subjectDialog.open()
    },
    onStarted(data) {
      this.$router.push({
        path: '/revoke/cancelRevoke/handle',
        query: {
          bizId: data.bizId,
          bizSeq: data.bizSeq,
          tasklistid: data.tasklistid,
          workflowid: data.workflowid,
          type: 'todo'
        }
      })
    },
    pageIndexChange(current) {
      this.pageParam.current = current
      this.loadPage()
    },
    pageSizeChange(size) {
      this.pageParam.size = size
      this.pageParam.current = 1
      this.loadPage()
    },
    reset() {
      this.searchForm.uniscid = ''
      this.searchForm.entname = ''
      this.pageParam.current = 1
      this.loadPage()
    },
    loadPage() {
      if (this.loading) return
      this.loading = true
      const params = {
        pageNum: this.pageParam.current,
        pageSize: this.pageParam.size,
        uniscid: this.searchForm.uniscid,
        entname: this.searchForm.entname
      }
      const request = this.type === 'todo' ? apiCancelRevokeTodoList : apiCancelRevokeRecords
      request(params).then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg || '查询失败')
          this.tableData = []
          this.pageParam.total = 0
          return
        }
        const data = res.data || {}
        this.tableData = data.list || []
        this.pageParam.total = data.total || 0
      }).finally(() => {
        this.loading = false
      })
    },
    handleRow(row) {
      this.$router.push({
        path: '/revoke/cancelRevoke/handle',
        query: {
          bizId: row.bizId,
          bizSeq: row.bizSeq,
          tasklistid: row.tasklistid,
          workflowid: row.workflowid,
          type: this.type
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-content {
  background: #fff;
  padding: 20px;
}
.label-name {
  text-align: right;
  display: inline-block;
  width: 220px;
  font-size: $table-content-font-size;
}
.search-input-box {
  display: inline-block;
  width: calc(100% - 220px);
}
.page-box {
  margin-top: 12px;
}
.mb10 {
  margin-bottom: 10px;
}
</style>
