<template>
  <div class="main-content revoke m20">
    <!--头部-查询-->
    <div class="content-header">
      <div class="body search-body" style="padding:20px 0">
        <el-row class="mb10">
          <el-col :span="12">
            <!-- <el-row class="mb5"> -->
            <label class="label-name_1">受理编号：</label>
            <div class="search-input-box_1">
              <el-input v-model="searchForm.acceptno" clearable size="mini" type="text" class="search-input" placeholder="请输入受理编号" @keyup.enter.native="search" />
            </div>
            <!-- </el-row> -->
            <!-- <el-row> -->

            <!-- </el-row> -->
            <!-- <el-row>
              <label class="label-name_1">未报年报年度：</label>
              <div class="search-input-box_1">
                <el-input v-model="searchForm.reportYear" size="mini" type="text" class="search-input" placeholder="请输入未报年报年度" @keyup.enter.native="search" />
              </div>
            </el-row> -->
          </el-col>
          <el-col :span="12">
            <label class="label-name_1">案件名称：</label>
            <div class="search-input-box_1">
              <el-input v-model="searchForm.searchName" clearable size="mini" type="text" class="search-input" placeholder="请输入名称（模糊）" @keyup.enter.native="search" />
            </div>
          </el-col>
        </el-row>
        <el-row v-if="showMore" class="mb10">
          <el-col :span="12">
            <label class="label-name_2">业务状态：</label>
            <el-select v-model="searchForm.bizStatus" size="mini" clearable placeholder="请选择" class="custom">
              <el-option
                v-for="item in busstatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="12">
            <label class="label-name_2">业务类型：</label>
            <el-select v-model="searchForm.bustype" size="mini" clearable placeholder="请选择" class="custom">
              <el-option
                v-for="item in bustypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-row>
        <el-row class="mb10">
          <el-col :span="12" :offset="1">
            <div class="btn-box">
              <span v-if="!showMore" style="margin-right:20px;color:#409EFF;cursor:pointer;font-size: 16px;" @click="showMoreCriteria">
                展开<i class="el-icon-d-arrow-right" />
              </span>
              <span v-if="showMore" style="margin-right:20px;color:#409EFF;cursor:pointer;font-size: 16px;" @click="showMoreCriteria">
                <i class="el-icon-d-arrow-left" />隐藏
              </span>
              <el-button size="mini" type="primary" @click="search">查询</el-button>
              <el-button size="mini" @click="searchForm.acceptno = '';searchForm.searchName='';searchForm.bizStatus='';searchForm.bustype='';">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--body-查询结果-->
    <div class="content-body">
      <div class="body">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="tableData"
          tooltip-effect="dark"
          class="table-style"
          :fit="true"
          :row-class-name="tableRowClassName"
          :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" min-width="30" align="center" />
          <el-table-column prop="index" label="序号" min-width="40" align="center" />
          <el-table-column prop="acceptno" label="受理编号" min-width="100" align="left" />
          <el-table-column prop="busname" :show-overflow-tooltip="true" label="案件名称" min-width="120" align="left" />
          <el-table-column prop="busTypeName" label="业务类型" min-width="70" align="left" />
          <el-table-column prop="bizStatusName" label="业务状态" min-width="100" align="left" />
          <el-table-column prop="signtime" label="受理时间" min-width="60" align="left" />
          <el-table-column prop="sendertime" label="发送时间" min-width="60" align="left" />
          <el-table-column prop="sendername" label="发送人" min-width="50" align="left" />

          <el-table-column label="操作" min-width="80" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="gotoHandle(scope.row)">处理</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-box">
          <el-pagination
            :disabled="loading"
            :page-size="pageParam.pageSize"
            :total="pageParam.total"
            :page-sizes="[10, 20, 30, 40,50,100,200]"
            layout="slot,total, sizes, prev, pager, next, jumper"
            @size-change="pageSizeChange"
            @current-change="pageIndexChange"
          >
            <!-- <batchFunction :options="options" style="float:left" /> -->
            <span>
              第 {{ pageParam.curPage }} 页 /
              共 {{ (pageParam.total !== 0 ? parseInt((pageParam.total + pageParam.pageSize - 1)/pageParam.pageSize) : 1) }} 页
            </span>
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { todoListPage } from '@/api/revoke'
export default {
  data() {
    return {
      searchForm: {
        acceptno: '',
        bizStatus: '',
        searchName: '',
        bustype: ''
      },
      loading: false,
      showMore: false,
      tableData: [],
      busstatusOptions: [{
        value: '0',
        label: '名单导入'
      }, {
        value: '1',
        label: '立案-经办'
      }, {
        value: '2',
        label: '立案-审核'
      }, {
        value: '3',
        label: '立案-审批'
      }, {
        value: '4',
        label: '调查-经办'
      }, {
        value: '5',
        label: '调查-审核'
      }, {
        value: '6',
        label: '调查-审批'
      }, {
        value: '7',
        label: '听证告知-经办'
      }, {
        value: '8',
        label: '听证告知-审核'
      }, {
        value: '9',
        label: '听证告知-审批'
      }, {
        value: '10',
        label: '决定-经办'
      }, {
        value: '11',
        label: '决定-审核'
      }, {
        value: '12',
        label: '决定-法规部门审查'
      }, {
        value: '13',
        label: '决定-审批'
      }, {
        value: '14',
        label: '送达-经办'
      }, {
        value: '15',
        label: '送达-审核'
      }, {
        value: '16',
        label: '送达-审批'
      }],
      bustypeOptions: [{
        value: '1',
        label: '批量吊销'
      }],
      pageParam: {
        customParamMap: {},
        curPage: 1,
        total: 0,
        pageSize: 10
      }
    }
  },
  mounted() {
    this.loadPage()
  },
  methods: {
    showMoreCriteria() {
      this.showMore = !this.showMore
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    // 启动待办
    startTask() {
      if (this.selection.length === 0) return this.$message.error('请至少选择一个企业以开启待办')
      const batch = 'companyTask' + new Date().getTime()
      sessionStorage.setItem(batch, JSON.stringify(this.selection))
      this.$router.push({ path: '/abnormal/company/create', query: { batch: batch }})
      // const { href } = this.$router.resolve({ path: '/abnormal/company/create', query: { batch: batch }})
      // window.open(href, '_blank')
    },
    // 搜索
    search() {
      this.pageParam.customParamMap = this.searchForm
      this.pageParam.curPage = 1
      this.loadPage()
    },
    // 分页多选插件回调
    removeCallback(index, row) {
      this.$refs.multipleTable.toggleRowSelection(row, false)
    },
    // 全选按钮事件
    selectAll() {
      const table = this.$refs.multipleTable
      for (const i in table.data) {
        const each = table.data[i]
        table.toggleRowSelection(each, true)
      }
    },
    // 选项变更事件
    handleSelectionChange(selectData) {
      const cancel = []
      if (selectData.length !== this.tableData.length) {
        // 找出没有选中的内容
        this.tableData.forEach(each => {
          for (const i in selectData) {
            const atom = selectData[i]
            if (atom.pripid === each.pripid) {
              return
            }
          }
          cancel.push(each)
        })
      }
      // 取消选中的内容
      for (const i in cancel) {
        const each = cancel[i]
        let index
        for (const j in this.selection) {
          const select = this.selection[j]
          if (select.pripid === each.pripid) {
            index = parseInt(j)
            break
          }
        }
        if (index !== undefined) {
          this.selection.splice(index, 1)
        }
      }
      // 增加选中内容
      for (const i in selectData) {
        const each = selectData[i]
        let exist = false
        for (const j in this.selection) {
          const select = this.selection[j]
          if (select.pripid === each.pripid) {
            exist = true
            break
          }
        }
        if (!exist) {
          this.selection.push(each)
        }
      }
    },
    // 当前分页改变
    pageIndexChange(curPage) {
      this.pageParam.curPage = curPage
      this.loadPage()
    },
    // 分页大小改变
    pageSizeChange(pageSize) {
      this.pageParam.pageSize = pageSize
      this.loadPage()
    },
    // 加载分页
    loadPage() {
      if (this.loading) return
      this.loading = true
      todoListPage(this.pageParam).then(res => {
        this.loading = false
        const list = []
        let i = 1
        const pageStart = (this.pageParam.curPage - 1) * this.pageParam.pageSize
        res.data.records.forEach(each => {
          each.index = pageStart + i++
          each.uniscid = each.uniscid || each.regno
          each.busTypeName = this.busTypeFormat(each.bustype)
          each.bizStatusName = this.bizStatusFormat(each.bizStatus)
          list.push(each)
        })
        this.tableData = list
        this.pageParam.total = res.data.total
      })
    },
    bizStatusFormat(statusCode) {
      switch (statusCode) {
        case '0' : return '线索录入中'
        case '1' : return '立案-经办中'
        case '2' : return '立案-审核中'
        case '3' : return '立案-审批中'
        case '4' : return '调查-经办中'
        case '5' : return '调查-审核中'
        case '6' : return '调查-审批中'
        case '7' : return '听证告知-经办中'
        case '8' : return '听证告知-审核中'
        case '9' : return '听证告知-审批中'
        case '10' : return '决定-经办中'
        case '11' : return '决定-审核中'
        case '12' : return '决定-法规部门审查中'
        case '13' : return '决定-审批中'
        case '14' : return '送达-经办中'
        case '15' : return '送达-审核中'
        case '16' : return '送达-审批中'
        case '20' : return '结束'
        case '22' : return '案件终结'

        default: return '未知业务状态'
      }
    },
    // 业务类型枚举
    busTypeFormat(typeCode) {
      switch (typeCode) {
        case '1': return '批量吊销'
        default: return '未知业务类型'
      }
    },
    gotoHandle(row) {
      switch (row.bizStatus) {
        // 批量吊销线索录入
        case '0': this.$router.push({ path: '/revoke/BatchRevoke/', query: { active_top: 0, active: 3, bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
          // active_top: 1 立案环节
        case '1': this.$router.push({ path: '/revoke/register/accept', query: { active_top: 1, active: 3, bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
        case '2': this.$router.push({ path: '/revoke/register/review', query: { active_top: 1, active: 3, bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
        case '3': this.$router.push({ path: '/revoke/register/examine', query: { active_top: 1, active: 3, bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
          // active_top: 2 调查环节
        case '4': this.$router.push({ path: '/revoke/investigate/accept', query: { active_top: 2, active: 3, bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
        case '5': this.$router.push({ path: '/revoke/investigate/review', query: { active_top: 2, active: 3, bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
        case '6': this.$router.push({ path: '/revoke/investigate/examine', query: { active_top: 2, active: 3, bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
          // active_top: 3 听证告知环节
        case '7': this.$router.push({ path: '/revoke/hearing/accept', query: { active_top: 3, active: 3, bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
        case '8': this.$router.push({ path: '/revoke/hearing/review', query: { active_top: 3, active: 3, bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
        case '9': this.$router.push({ path: '/revoke/hearing/examine', query: { active_top: 3, active: 3, bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
          // active_top: 4 决定环节
        case '10': this.$router.push({ path: '/revoke/decision/accept', query: { active_top: 4, active: 3, bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
        case '11': this.$router.push({ path: '/revoke/decision/review', query: { active_top: 4, active: 3, bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
        case '12': this.$router.push({ path: '/revoke/decision/department', query: { active_top: 4, active: 3, bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
        case '13': this.$router.push({ path: '/revoke/decision/examine', query: { active_top: 4, active: 3, bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
          // active_top: 5 送达与结束环节
        case '14': this.$router.push({ path: '/revoke/send/accept', query: { active_top: 5, active: 3, bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
        case '15': this.$router.push({ path: '/revoke/send/review', query: { active_top: 5, active: 3, bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
        case '16': this.$router.push({ path: '/revoke/send/examine', query: { active_top: 5, active: 3, bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
        case '22': this.$router.push({ path: '/revoke/noRegister/', query: { bizStatus: row.bizStatus, bizseq: row.bizseqid, workflowid: row.workflowid, tasklistid: row.tasklistid }})
          break
      }
    // },
    // 跳转处理
    // gotoHandle(row) {
    //   switch (row.bustype) {
    //     //企业经营异常企业列入
    //     case '5': this.$router.push({ path: '/abnormal/company/inclusion/' + (row.parameterMap.currentNode === 'exptlistEnter' ? 'accept' : row.parameterMap.currentNode === 'handleExptlist' ? 'review' : 'examine'), query: { bizseq: row.bizseqid, workflowId: row.workflowid, tasklistid: row.tasklistid }})
    //       break
    //   }
    // }
    }
  }
}
</script>

<style lang="scss" scoped>
.revoke{
  background: #fff;
  padding: 10px;
  .content-header{
    background: white;
    .label-name_1 {
      text-align: right;
      display: inline-block;//转成行内快，才可定义宽度
      width: 120px;
      font-size: $table-content-font-size;
    }
    .search-input-box_1{
      display: inline-block;
      width: calc(100% - 130px);
    }
    .label-name_2 {
      text-align: right;
      display: inline-block;//转成行内快，才可定义宽度
      width: 120px;
      font-size: $table-content-font-size;
    }
    .search-input-box_2{
      display: inline-block;
      width: calc(100% - 130px);
    }
    .label-name_3 {
      text-align: right;
      display: inline-block;//转成行内快，才可定义宽度
      width: 120px;
      font-size: $table-content-font-size;
    }
    .custom{
      width: calc(100% - 128px) !important;
    }
    .search-input{
      cursor: pointer;
    }
    .body{
      padding: 5PX;
      border-top:none;
      margin-bottom: 40PX;
    }
  }
  .content-body{
    background:white
  }
  .header{
    .title{
      font-weight: 700;
      font-size: 0.8rem;
    }
  }
  .page-box{margin:10PX;text-align:right}
  .mb5{
    margin-bottom: 5px;
  }
  .btn-box{
    display: inline-block;
    padding-left: 10px;
    margin-top: 10px;
  }
}
.mb10{
  margin-bottom: 10px;
}
.content-body{
  background: #fff;
  /deep/.el-table .warning-row {
    background: #eaf4fe!important;
  }
}
</style>
