<template>
  <div class="main-content m20">
    <!--头部-查询-->
    <div class="content-header">
      <searchHeader title="查询" />
      <div class="body search-body">
        <el-row style="margin-bottom:10px">
          <el-col :span="12">
            <label class="label-name" style="width: 220px">统一社会信用代码/注册号：</label>
            <div class="search-input-box" style="width: calc(100% - 220px)">
              <el-input v-model="searchForm.searchUscc" clearable size="mini" type="text" class="search-input" placeholder="请输入统一社会信用代码/注册号" @keyup.enter.native="search" />
            </div>
          </el-col>
          <el-col :span="12">
            <label class="label-name">主体名称（模糊）：</label>
            <div class="search-input-box">
              <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 style="margin-bottom:10px">
          <el-col :span="12">
            <label class="label-name" style="width: 220px">列异日期：</label>
            <div class="search-input-box">
              <el-date-picker
                v-model="searchForm.abnTime"
                size="small"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width:100%"
              />
            </div>
          </el-col>
          <el-col :span="12">
            <label class="label-name">列异原因：</label>
            <el-select v-model="searchForm.speCause" style="width: calc(100% - 220px)" clearable size="mini" placeholder="请选择列异原因" class="custom">
              <el-option
                v-for="item in reasonList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <!-- <el-col :span="6">
            <label class="label-name">未报年报年度：</label>
            <div class="search-input-box">
              <el-input v-model="searchForm.reportYear" size="mini" type="text" class="search-input" placeholder="请输入未报年报年度" @keyup.enter.native="search" />
            </div>
          </el-col> -->

        </el-row>
        <el-row>
          <el-col :span="12" :offset="1">
            <div class="btn-box">
              <!-- <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">查询</el-button>
              <el-button size="mini" @click="searchForm.searchUscc = '';searchForm.searchName='';searchForm.speCause='';searchForm.abnTime = ''">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--body-查询结果-->
    <div class="content-body">
      <div class="header" />
      <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 class="no" type="selection" width="30" align="center" />
          <el-table-column prop="index" label="序号" min-width="50" align="center" />
          <el-table-column prop="uscc" label="统一社会信用代码/注册号" min-width="100" align="left" />
          <el-table-column prop="entName" :show-overflow-tooltip="true" label="主体名称" min-width="100" align="left" />
          <el-table-column prop="abnTime" :show-overflow-tooltip="true" label="列异日期" min-width="50" align="left" />
          <el-table-column prop="speCauseStr" :show-overflow-tooltip="true" label="列异原因" min-width="150" align="left" />
          <!-- <el-table-column prop="speReasons" :show-overflow-tooltip="true" label="列入事实理由" min-width="150" align="left" /> -->
          <!-- <el-table-column prop="abnTime" :show-overflow-tooltip="true" label="公示日期" min-width="50" align="left">2021-6-30</el-table-column> -->
        </el-table>
        <div class="page-box">
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-button size="mini" @click="selectAll">全选</el-button>
              <el-button size="mini" @click="$util.toggleSelect($refs.multipleTable)">反选</el-button>
              <!--              <el-button size="mini" type="danger" icon="el-icon-delete-solid" @click="removeList">删除</el-button>-->
              <el-button size="mini" type="primary" @click="startTask" v-loading="startTaskLoading">批量办理</el-button>
              <el-button size="mini" type="primary" @click="handleClickIndividual">个案办理</el-button>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
              <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>
            </el-col>
          </el-row>
        </div>
        <!-- 个案办理 -->
        <el-dialog
          title="个案办理"
          :visible.sync="dialogVisible"
          width="60%"
        >
          <div class="dialog_content content-header">
            <el-row>
              <el-col :span="10">
                <label class="label-name" style="padding-left:20px">统一社会信用代码/注册号：</label>
                <div class="search-input-box">
                  <el-input v-model="dialogSearchForm.searchUscc" size="mini" type="text" class="search-input" placeholder="请输入统一社会信用代码/注册号" @keyup.enter.native="search" />
                </div>
              </el-col>
              <el-col :span="8">
                <label class="label-name">主体名称（模糊）：</label>
                <div class="search-input-box">
                  <el-input v-model="dialogSearchForm.searchName" size="mini" type="text" class="search-input" placeholder="请输入主体名称（模糊）" @keyup.enter.native="search" />
                </div>
              </el-col>
              <el-col :span="4" :offset="2">
                <div class="btn-box">
                  <el-button size="mini" type="primary" @click="dialogSearch">查询</el-button>
                  <el-button size="mini" @click="dialogSearchForm.searchUscc = '';dialogSearchForm.searchName=''">重置</el-button>
                </div>
              </el-col>
            </el-row>
            <el-table
              v-loading="loading"
              :data="dialogTableData"
              tooltip-effect="dark"
              style="width: 100%;padding: 0;margin-top:12px;"
              :fit="true"
              :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
              :row-class-name="tableRowClassName"
              @selection-change="handleSelectionChange"
            >
              <!-- <el-table-column class="no" type="selection" min-width="5%" align="center" /> -->
              <el-table-column type="index" label="序号" min-width="5%" align="center" />
              <el-table-column prop="uniscid" label="统一社会信用代码/注册号" min-width="20%" align="left" />
              <el-table-column prop="entname" :show-overflow-tooltip="true" label="主体名称" min-width="15%" align="left" />
              <el-table-column prop="enttypeCn" :show-overflow-tooltip="true" label="类型" min-width="15%" align="left" />
              <el-table-column prop="name" :show-overflow-tooltip="true" label="法定代表人" min-width="15%" align="left" />
              <el-table-column prop="dom" :show-overflow-tooltip="true" label="地址" min-width="18%" align="left" />
              <el-table-column label="操作" min-width="12%">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="handleClickIndividual(scope.row)">办理</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-row style="text-align:right;">
              <el-pagination
                :page-size="10"
                layout="total, prev, pager, next"
                :total="dialog.total"
                @current-change="handleCurrentDialogChange"
              />
            </el-row>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
        <!--分页多选组件-->
        <!-- <pageSelector :selection="selection" :columns="selectionColumn" @removeCallback="removeCallback" /> -->
      </div>
    </div>
  </div>
</template>

<script>
import searchHeader from '@/components/searchHeader'
import pageSelector from '@/components/PageSelector'
import { saveIllegalAccept, getForIllListPage, removeForIllList, entInfoPage } from '@/api/illegal'
import { getDataType } from '@/api/constant'
import { getConstant } from '@/api/system'
export default {
  components: {
    pageSelector: pageSelector,
    searchHeader
  },
  data() {
    return {
      startTaskLoading: false,
      selection: [],
      selectionColumn: [{ label: '统一社会信用代码/注册号', prop: 'uscc' }, { label: '主体名称', prop: 'entName' }, { label: '主体类型', prop: 'typeName' }],
      searchForm: {
        searchUscc: '',
        searchName: ''
      },
      loading: false,
      showFixed: false,
      showMore: false,
      tableData: [],
      pageParam: {
        curPage: 1,
        total: 0,
        pageSize: 10,
        paramMap: {
          operationStatus: '0'
        },
        customParamMap: {
          isCompany: '1',
          year3: '1'
        }
      },
      entTypeOptions: {},
      dialogVisible: false,
      dialogTableData: [],
      dialogSearchForm: {
        searchUscc: '',
        searchName: ''
      },
      dialog: {
        total: 0,
        currentPage: 1
      },
      reasonList: []
    }
  },
  mounted() {
    // this.loadPage()
    getDataType('enterpries').then(res => {
      if (res.code === 0) {
        this.entTypeOptions = res.data
        this.renderEntType()
      }
    })
    window.addEventListener('scroll', this.handleScroll, true)
    // 加载企业列入经营异常原因
    getConstant('CD71').then(res => {
      if (res.code === 0) {
        const list = []
        res.data.forEach(each => {
          list.push({
            value: each.code,
            label: each.name
          })
        })
        this.reasonList = list
      }
    })
  },
  methods: {
    showMoreCriteria() {
      this.showMore = !this.showMore
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      if (scrollTop > 80) {
        this.showFixed = true
      } else {
        this.showFixed = false
      }
    },
    // 渲染主体类型名称
    renderEntType() {
      if (this.tableData.length > 0) {
        this.tableData.forEach(each => {
          if (each.entType) {
            for (let i = 0; i < this.entTypeOptions.length; i++) {
              const type = this.entTypeOptions[i]
              if (type.code === each.entType) {
                each.typeName = type.name
                break
              }
            }
          }
        })
      }
    },
    // 删除信息
    removeList() {
      if (this.selection.length === 0) return this.$message.error('请至少选择一个企业才能进行删除')
      this.$confirm('是否确认删除', '提示').then(() => {
        let ids = ''
        this.selection.forEach(each => {
          ids += (each.serialId + ',')
        })
        removeForIllList(ids.substring(0, ids.length - 1)).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功')
            this.loadPage()
            const length = this.selection.length
            for (let i = 0; i < length; i++) {
              this.selection.splice(i, 1)
            }
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    // 启动待办
    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/inclusion/accept', query: { batch: batch }})
      // const { href } = this.$router.resolve({ path: '/abnormal/company/accept', query: { batch: batch }})
      // window.open(href, '_blank')
      this.$confirm('是否确认启动待办', '提示').then(() => {
        let ids = ''
        this.selection.forEach(each => {
          ids += (each.serialId + ';')
        })
        console.log(this.selection.length + '=========yazai')
        const params = {
          serialIds: ids.substring(0, ids.length - 1),
          type: 'timeout',
          batchAndCase: '0',
          bustype: '0' // 0表示拟列入严重违法
        }
        this.startTaskLoading = true
        saveIllegalAccept(params).then(res => {
          this.startTaskLoading = false
          if (res.code === 0) {
            this.$router.push({ path: '/illegal/inclusion/accept', query: { tasklistid: res.data.tasklistid, bizseq: res.data.bizseq, workflowId: res.data.workflowId, isAbnormal: '1', batchAndCase: '0' }})
            // const { href } = this.$router.resolve({ path: '/abnormal/company/inclusion/accept', query: { tasklistid: res.data.tasklistid, bizseq: res.data.bizseq, workflowId: res.data.workflowId }})
            // window.open(href, '_blank')
          } else {
            this.$message.error(res.msg)
          }
        }).catch(req => {
          console.log(req)
          this.startTaskLoading = false
        })
      })
    },
    // 搜索
    search() {
      for (const key in this.searchForm) {
        this.pageParam.customParamMap[key] = this.searchForm[key]
      }
      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.abnlistid === each.abnlistid) {
              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.abnlistid === each.abnlistid) {
            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.abnlistid === each.abnlistid) {
            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
      getForIllListPage(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.uscc = each.uniscid || each.regNo
          list.push(each)
        })
        this.tableData = list
        this.renderEntType()
        this.pageParam.total = res.data.total
        const selection = JSON.parse(JSON.stringify(this.selection))
        this.$nextTick(() => {
          for (const i in list) {
            const each = list[i]
            for (const j in selection) {
              if (each.abnlistid === selection[j].abnlistid) {
                this.$refs.multipleTable.toggleRowSelection(each, true)
              }
            }
          }
        })
      })
    },
    //  个案办理查询
    dialogSearch() {
      if (this.dialogSearchForm.searchUscc || this.dialogSearchForm.searchName) {
        const data = {
          curPage: this.dialog.currentPage,
          pageSize: 10,
          paramMap: {
            entName: this.dialogSearchForm.searchName,
            uniscid: this.dialogSearchForm.searchUscc
          }
        }
        entInfoPage(data).then(res => {
          if (res.code === 0) {
            this.dialogTableData = res.data.records
            this.dialog.total = res.data.total
          }
        })
      }
    },
    handleCurrentDialogChange(val) {
      this.dialog.currentPage = val
      this.dialogSearch()
    },
    // 个案办理
    handleClickIndividual(row) {
      if (this.selection.length === 0) return this.$message.error('请选择一个企业以开启待办')
      if (this.selection.length > 1) return this.$message.error('您选择了多条数据进行业务办理，请使用批量办理！')
      this.$confirm('是否确认启动待办', '提示').then(() => {
        const params = {
          serialIds: this.selection[0].serialId,
          type: 'timeout',
          batchAndCase: '0',
          bustype: '0' // 0表示拟列入严重违法
        }
        saveIllegalAccept(params).then(res => {
          if (res.code === 0) {
            this.$router.push({ path: '/illegal/inclusion/accept', query: { tasklistid: res.data.tasklistid, bizseq: res.data.bizseq, workflowId: res.data.workflowId, isAbnormal: '1', batchAndCase: '1' }})
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-content{
  background: #fff;
  padding: 0;
  font-size: $table-content-font-size;
  .content-header{
    font-size: $table-content-font-size;
    background: white;
    .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);
      // width: 300px;
    }
    .search-input{
      cursor: pointer;
    }
    .body{
      padding: 20px 0;
      border-top:none;
      margin-bottom: 40PX;
    }
  }
  .content-body{
    background:white;
    margin-bottom: 100px;
  }
  .header{
    .title{
      font-weight: 700;
      font-size: $font-size-sub-title;
    }
  }
  .page-box{
    margin:10PX;
    .el-pagination{
      text-align: right;
    }
  }
}
.fixed-bottom {
  position: fixed;
  width: 100%;
  bottom: -10px;
  right: 0;
  z-index: 99;
  padding: 10px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(to bottom, #fff 0%,#8bbef6 100%);
  box-shadow:  1px -4px 4px rgba(0, 21, 41, 0.08);
}
.content-body{
  background: #fff;
  /deep/.el-table .warning-row {
    background: #eaf4fe!important;
  }
}
</style>
<style lang="scss">
.content-body .el-table-column--selection .cell{
  padding-right: 0px;
}
.label-1{
  padding-left: 20px;
}
</style>
