<template>
  <div class="main-content m20">
    <!--头部-查询-->
    <div class="content-header">
      <div class="body search-body">
        <el-row class="mb10">
          <el-col :span="12">
            <el-row>
              <label class="label-name_2">企业名称：</label>
              <div class="search-input-box_2">
                <el-input v-model="searchForm.searchName" clearable type="text" class="search-input" placeholder="请输入名称（精确）" @keyup.enter.native="search"/>
              </div>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <label class="label-name_1">倒计时工作日：</label>
              <el-switch
                v-model="searchForm.gzrNumSwitch"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
              <el-input-number v-model="searchForm.gzrNum" size="mini" :min="-1" :max="4" />
            </el-row>
          </el-col>
        </el-row>
        <el-row v-if="showMore" style="margin-bottom:10px">
          <el-row style="margin-bottom:10px">
            <el-col :span="12">
              <el-row>
                <label class="label-name_3">业务类型：</label>
                <el-select
                  v-model="searchForm.busType"
                  clearable
                  class="custom"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in bustypeOptions"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row>
                <label class="label-name_3">受理时间：</label>
                <el-date-picker
                  v-model="searchForm.createTime"
                  size="mini"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  class="custom"
                />
              </el-row>
            </el-col>
          </el-row>
          <el-row style="margin-bottom:10px">
            <el-col :span="12">
              <el-row>
                <label class="label-name_1">办理机关：</label>
                <el-select v-model="searchForm.orgNumber" clearable size="mini" placeholder="请选择" class="custom">
                  <el-option
                    v-for="item in orgList"
                    :key="item.orgNumber"
                    :label="item.orgUnitName"
                    :value="item.orgNumber"
                  />
                </el-select>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row>
                <label class="label-name_3">发送时间：</label>
                <el-date-picker
                  v-model="searchForm.searchDate"
                  size="mini"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  class="custom"
                />
              </el-row>
            </el-col>
          </el-row>
        </el-row>
        <el-col :span="6" :offset="1">
          <div class="btn-box" style="font-size: 14px">
            <span v-if="!showMore" style="margin-right:20px;color:#409EFF;cursor:pointer" @click="showMoreCriteria">
              展开<i class="el-icon-d-arrow-right"/>
            </span>
            <span v-if="showMore" style="margin-right:20px;color:#409EFF;cursor:pointer" @click="showMoreCriteria">
              <i class="el-icon-d-arrow-left"/>隐藏
            </span>
            <el-button size="mini" type="primary" @click="search" :loading="loading">查询</el-button>
            <el-button size="mini" @click="searchForm.acceptno = '';searchForm.searchName='';searchForm.reportYear='';searchForm.busType='';searchForm.busStatus=''">
              重置
            </el-button>
          </div>
        </el-col>
      </div>
    </div>
    <!--body-查询结果-->
    <div class="content-body">
      <div class="body">
        <el-row>
          <el-col :span="24" :offset="1">
            <el-button type="primary" size="mini" @click="exportRepairTask">导出</el-button>
          </el-col>
        </el-row>
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 95%;margin:0 auto"
          :fit="true"
          :row-class-name="tableRowClassName"
          :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="index" label="序号" min-width="30" align="center"/>
          <el-table-column prop="busname" :show-overflow-tooltip="true" label="业务名称" min-width="120" align="left"/>
          <el-table-column prop="busTypeName" label="业务类型" min-width="100" align="left"/>
          <el-table-column prop="busStatusName" label="业务状态" min-width="60" align="left" :formatter="busStatusNameFmt"/>
          <el-table-column prop="orgName" label="受理单位" min-width="120" align="left"/>
          <el-table-column prop="signtime" label="受理时间" min-width="60" align="left"/>
          <el-table-column prop="sendertime" label="发送时间" min-width="60" align="left" :formatter="dateFormat"/>
          <el-table-column sortable="custom" label="剩余时间" min-width="100" align="left" :formatter="deadlineCalculate"/>
          <el-table-column label="操作" min-width="120" align="left">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="showInfo(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"
            :current-page="pageParam.curPage"
            :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 { repairTaskQuery, queryAllOrg } from '@/api/comprehensive'
import {exportRepairTask} from "@/api/task";

export default {
  data() {
    return {
      currentData: [],
      orgList: [],
      showMore: false,
      searchNameP: '',
      busyTypes: [],
      searchForm: {
        createTime: '',
        searchName: '',
        busType: '',
        busStatus: '',
        searchDate: '',
        orgNumber: '',
        gzrNum: 0,
        gzrNumSwitch: false
      },
      loading: false,
      tableData: [],
      busstatusOptions: [{
        value: '9',
        label: '待受理'
      }, {
        value: '1',
        label: '审批中'
      }],
      bustypeOptions: [{
        value: '33',
        label: '严重违法失信信用修复'
      }, {
        value: '7',
        label: '企业经营异常名录信用修复'
      }, {
        value: '12',
        label: '个体户经营异常状态信用修复'
      }, {
        value: '14',
        label: '农专社经营异常名录信用修复'
      }],
      user: JSON.parse(sessionStorage.getItem('user')),
      pageParam: {
        customParamMap: {},
        curPage: 1,
        total: 0,
        pageSize: 10
      }
    }
  },
  mounted() {
    // 加载办理机关
    this.getOrgList()
  },
  methods: {
    // 导出信用修复待办
    exportRepairTask() {
      this.loading = true
      exportRepairTask(this.pageParam).then((response) => {
        this.loading = false
        const blob = new Blob([response], { type: 'application/vnd.ms-excel' })
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', '信用修复待办名单.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
      }).catch(() => {
        this.loading = false
      })
    },
    // 业务状态fmt
    busStatusNameFmt(row) {
      let busStatusName = ''
      const status = row.status
      if (status === '9') {
        busStatusName = '待受理'
      } else if (status === '1') {
        busStatusName = '审批中'
      }
      return busStatusName
    },
    // 信用修复剩余时间计算
    deadlineCalculate(row) {
      if (this.$util.isEmpty(row.deadlineDate)) return ''
      return `${row.deadlineDay}天`
    },
    getOrgList() {
      queryAllOrg().then(res => {
        if (res.code === 0) {
          res.data.forEach(each => {
            this.orgList.push(each)
          })
        }
      })
    },
    showMoreCriteria() {
      this.showMore = !this.showMore
    },
    dateFormat(row) {
      if (this.$util.isEmpty(row.sendertime)) return ''
      return this.$util.formatDate.format(new Date(Date.parse(row.sendertime)), 'yyyy-MM-dd')
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    // 搜索
    search() {
      this.pageParam.customParamMap = this.searchForm
      // 判断是否填写了条件
      let flag = false
      // obj的遍历
      Object.keys(this.pageParam.customParamMap).forEach(key => {
        if (this.pageParam.customParamMap[key] !== '' && this.pageParam.customParamMap[key] !== null) {
          flag = true
        }
      })
      if (!flag) {
        this.$message({
          message: '请至少填写一个查询条件！',
          type: 'warning'
        })
        return
      }
      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
      repairTaskQuery(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.busTypeName = this.$util.getTaskBusinessTypeName(each.bustype)
          each.busStatusName = this.$util.getTaskNodeName(each.currentNodeOrBizStatus)
          list.push(each)
        })
        this.tableData = list
        this.pageParam.total = res.data.total
        if (this.searchForm.searchName !== '') {
          this.searchNameP = this.searchForm.searchName
        } else {
          this.searchNameP = ''
        }
      })
    },
    // 查看详情跳转
    showInfo(row) {
      if (this.searchNameP === '') {
        switch (row.bustype) {
          case '7':
            this.$router.push({
              path: '/abnormal/company/repairInfo',
              query: {bizseq: row.bizseqid, workflowId: row.workflowid, tasklistid: row.tasklistid}
            })
            break
          // 个体工商户恢复
          case '12':
            this.$router.push({
              path: '/abnormal/company/repairInfo',
              query: {bizseq: row.bizseqid, workflowId: row.workflowid, tasklistid: row.tasklistid}
            })
            break
          // 信用修复管理-严重违法信用修复
          case '33':
            this.$router.push({
              path: '/comprehensive/creditDetails',
              query: {bizseq: row.bizseqid, workflowId: row.workflowid, tasklistid: row.tasklistid, searchName: '1'}
            })
            break
        }
      } else {
        switch (row.bustype) {
          // 信用修复管理-严重违法信用修复
          case '33':
            this.$router.push({
              path: '/comprehensive/creditDetails',
              query: {bizseq: row.bizseqid, workflowId: row.workflowid, tasklistid: row.tasklistid, searchName: '1'}
            })
            break
          // 异常名录移出
          case '7':
            this.$router.push({
              path: '/abnormal/company/repairInfo',
              query: {
                bizseq: row.bizseqid,
                workflowId: row.workflowid,
                tasklistid: row.tasklistid,
                searchName: this.searchNameP,
                type: 'company'
              }
            })
            break
          // 个体工商户恢复
          case '12':
            this.$router.push({
              path: '/abnormal/company/repairInfo',
              query: {
                bizseq: row.bizseqid,
                workflowId: row.workflowid,
                tasklistid: row.tasklistid,
                searchName: this.searchNameP,
                type: 'individual'
              }
            })
            break
          // 农民专业合作社移出
          case '14':
            this.$router.push({
              path: '/abnormal/company/repairInfo',
              query: {
                bizseq: row.bizseqid,
                workflowId: row.workflowid,
                tasklistid: row.tasklistid,
                searchName: this.searchNameP,
                type: 'farmer'
              }
            })
            break
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main-content {
  background: #fff;
  padding: 10pt;

  .content-header {
    background: white;

    .label-name_1 {
      text-align: right;
      display: inline-block; //转成行内快，才可定义宽度
      width: 140px;
      font-size: $table-content-font-size;
    }

    .search-input-box_1 {
      display: inline-block;
      width: calc(100% - 230px);
    }

    .label-name_2 {
      text-align: right;
      display: inline-block; //转成行内快，才可定义宽度
      width: 140px;
      font-size: $table-content-font-size;
    }

    .search-input-box_2 {
      display: inline-block;
      width: calc(100% - 230px);
    }

    .label-name_3 {
      text-align: right;
      display: inline-block; //转成行内快，才可定义宽度
      width: 140px !important;
      font-size: $table-content-font-size;
    }

    .custom {
      width: calc(100% - 150px);
    }

    .search-input {
      cursor: pointer;
    }

    .body {
      padding: 20px 0;
      border-top: none;
      margin-bottom: 40PX;
    }
  }

  .content-body {
    background: white
  }

  .header {
    .title {
      font-weight: 600;
      font-size: 1.2rem;
    }
  }

  .page-box {
    margin: 10PX;
    text-align: right
  }

  .mb10 {
    margin-bottom: 10px;
  }

  .btn-box {
    display: inline-block;
    padding-left: 10px;
  }
}

/deep/ .el-input__inner {
  height: 28px;
}
</style>
