<template>
  <div class="main-content m20">
    <!--头部-查询-->
    <div class="content-header">
      <div class="body search-body">
        <el-row>
          <el-col :span="12">
            <el-row class="mb10">
              <label class="label-name_1">统一社会信用代码/注册号：</label>
              <div class="search-input-box_1">
                <el-input v-model="searchForm.uscc" clearable size="mini" type="text" class="search-input" placeholder="请输入统一社会信用代码/注册号" @keyup.enter.native="loadPage" />
              </div>
            </el-row>
          </el-col>
          <el-col :span="12" class="mb10">
            <label class="label-name">主体名称：</label>
            <div class="search-input-box">
              <el-input v-model="searchForm.entName" clearable size="mini" type="text" class="search-input" placeholder="请输入主体名称（模糊）" @keyup.enter.native="loadPage" />
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11" :offset="1">
            <div class="btn-box">
              <el-button size="mini" type="primary" @click="loadPage">查询</el-button>
              <el-button size="mini" @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="margin-bottom: 20px;">
      <el-row>
        <el-col :span="11" :offset="1">
          <div class="btn-box">
            <el-button size="primary" type="primary" @click="startObjectionApply">发起除名决定申请</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--body-查询结果-->
    <div class="content-body">
      <div class="body">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          size="mini"
          :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 type="selection" min-width="5%" />
          <el-table-column prop="index" label="序号" min-width="5%" align="center" />
          <el-table-column prop="bizNo" label="除名告知业务号" min-width="15%" align="left" />
          <el-table-column prop="uscc" label="统一社会信用代码/注册号" min-width="15%" align="left" />
          <el-table-column prop="entName" label="主体名称" min-width="20%" align="left" />
          <el-table-column prop="lerepName" label="法定代表人（负责人、经营者）" min-width="15%" align="left" />
          <el-table-column prop="address" label="住所（经营场所）" min-width="30%" align="left" />
        </el-table>
        <div class="page-box">
          <el-row class="bl0">
            <el-col :span="24">
              <el-pagination
                :disabled="loading"
                :page-size="pageParam.size"
                :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"
              >
                <span>
                  第 {{ pageParam.current }} 页 /
                  共 {{ (pageParam.total !== 0 ? parseInt((pageParam.total + pageParam.size - 1)/pageParam.size) : 1) }} 页
                </span>
              </el-pagination>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listTodoNoticeInfo, expelledAuditStartBiz } from '@/api/除名公告'
export default {
  components: {
  },
  data() {
    return {
      bizInfos: [],
      busName: '',
      searchForm: {
        uscc: '',
        entName: ''
      },
      loading: false,
      tableData: [],
      pageParam: {
        current: 1,
        total: 0,
        size: 10
      }
    }
  },
  mounted() {
    this.loadPage()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    // 当前分页改变
    pageIndexChange(current) {
      this.pageParam.current = current
      this.loadPage()
    },
    // 分页大小改变
    pageSizeChange(size) {
      this.pageParam.size = size
      this.loadPage()
    },
    // 加载分页
    loadPage() {
      if (this.loading) return
      this.loading = true
      listTodoNoticeInfo({
        current: this.pageParam.current,
        size: this.pageParam.size,
        entity: {
          ...this.searchForm
        }
      }).then(res => {
        this.loading = false
        const list = []
        let i = 1
        const pageStart = (this.pageParam.current - 1) * this.pageParam.size
        res.data.records.forEach(each => {
          each.index = pageStart + i++
          list.push(each)
        })
        this.tableData = list
        this.pageParam.total = res.data.total
      }).catch(() => {
        this.loading = false
      })
    },
    reset() {
      this.searchForm.uscc = ''
      this.searchForm.entName = ''
      this.loadPage()
    },
    startObjectionApply() {
      if (!this.bizInfos || this.bizInfos.length === 0) {
        return this.$message.error('请至少勾选一个主体名单')
      }
      this.$confirm('是否确认启动待办', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.loading) return
        this.loading = true
        return expelledAuditStartBiz({
          bizInfos: this.bizInfos,
          busName: this.busName
        }).then(({ code, data }) => {
          this.loading = false
          if (code === 0) {
            this.$message.success('除名决定业务启动成功')
            this.$router.push({ path: '/entManage/expelled/removeAuditAccept', query: { bizId: data.bizId }})
          } else {
            this.$message.error('除名决定业务启动失败')
          }
        }).catch(() => {
          this.loading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 选项变更事件
    handleSelectionChange(datas) {
      this.bizInfos = []
      this.busName = ''
      for (let i = 0; i < datas.length; i++) {
        this.bizInfos.push(datas[i])
        if (i >= 3) {
          continue
        }
        this.busName += datas[i].entName + '、'
      }
      this.busName = this.busName.substring(0, this.busName.length - 1) + '等拟除名企业决定执行'
    }
  }
}
</script>

<style lang="scss" scoped>
.main-content{
  background: #fff;
  padding: 20px;
  .content-header{
    background: white;
    .search-body{
      /deep/ .el-date-editor *{
        font-size: 16px!important;
      }
      /deep/ .el-date-editor .el-range-separator{
        width: 8%!important;
      }
    }
    .label-name_1{
      text-align: right;
      display: inline-block;//转成行内快，才可定义宽度
      width: 220px;
      font-size: $table-content-font-size;
    }
    .search-input-box_1{
      display: inline-block;
      width: calc(100% - 220px);
    }
    .label-name_2{
      text-align: right;
      display: inline-block;//转成行内快，才可定义宽度
      width: 220px;
      font-size: $table-content-font-size;
    }
    .search-input-box_2{
      display: inline-block;
      width: calc(100% - 220px);
    }
    .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;
    }
    .custom{
      width: 60%
    }
    .search-input{
      cursor: pointer;
    }
    .body{
      padding: 20px 0 ;
      border-top:none;
      margin-bottom: 20PX;
    }
  }
  .content-body{
    background:white;
    margin-bottom: 100px;
  }
  .header{
    height:50PX;
    padding:15PX 10PX;
    .title{
      font-weight: 600;
      font-size: 1.2rem;
    }
  }
  .page-box{
    margin:10PX;
    .el-pagination{
      text-align: right;
    }
  }
  .mb10{
    margin-bottom: 10px;
  }
}
.fixed-bottom {
  position: fixed;
  width: 100%;
  bottom: -10px;
  right: 0;
  z-index: 99;
  padding: 10px;
  /* background: #8bbef6; */
  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;
// }
.fixed-bottom {
  .el-pagination {
    text-align: right!important;
  }
}
</style>
