<template>
  <div class="main-content market m20">
    <!-- <CommonTitle label="列严勘误" /> -->
    <div class="search-box">
      <el-row>
        <el-row>
          <el-col :span="6">
            <label class="label-name" style="width: 90px;display: inline-block;">主体名称：</label>
            <div class="search-input-box" style="width: calc(100% - 100px);display: inline-block;">
              <el-input v-model="searchForm.entName" placeholder="请输入主体名称" />
            </div>
          </el-col>
          <el-col :span="10">
            <label class="label-name" style="width: 220px;display: inline-block;">注册码/统一社会信用代码：</label>
            <div class="search-input-box" style="width: calc(100% - 220px);display: inline-block;">
              <el-input v-model="searchForm.searchCode" placeholder="请输入注册码/统一社会信用代码" />
            </div>
          </el-col>
          <el-col :span="4">
            <div class="btn-box">
              <el-button size="mini" type="primary" icon="el-icon-search" @click="search">查询</el-button>
              <el-button size="mini" type="info" icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
            </div>
          </el-col>
        </el-row>
        <!-- <el-col :span="6">
          <div class="search-field">
            <p>主体名称</p>
            <el-input v-model="searchForm.entName" placeholder="请输入主体名称" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search-field">
            <p>注册码/统一社会信用代码</p>
            <el-input v-model="searchForm.searchCode" placeholder="请输入注册码/统一社会信用代码" />
          </div>
        </el-col> -->
      </el-row>
    </div>
    <!-- <div class="func-box"> -->
    <!-- <div class="btn-box" style="text-align:center">
        <el-button size="mini" type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button  size='mini' type="info" icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
      </div> -->
    <!-- </div> -->
    <div class="main-body ">
      <div class="header">
        <el-row>
          <el-col :span="12" />
          <el-col :span="12">
            <!-- <div class="btn-box">
              <el-button type="primary" icon="el-icon-plus" size="mini">新建</el-button>
            </div> -->
          </el-col>
        </el-row>
      </div>
      <div class="content">
        <el-table
          style="width:95%;margin:0 auto"
          :data="tableData"
          class="table-style"
          :row-class-name="tableRowClassName"
          :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
        >
          <el-table-column
            prop="index"
            label="序号"
            min-width="50"
          />
          <el-table-column
            prop="uscc"
            label="统一社会信用代码/注册号"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            prop="entname"
            label="主体名称"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="serillreaString"
            label="列入原因"
            min-width="200"
            show-overflow-tooltip
          />
          <el-table-column
            prop="abntime"
            label="列入时间"
          />
          <el-table-column
            prop="decorgCn"
            label="列入决定机关"
            min-width="180"
            show-overflow-tooltip
          />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="createTask(scope.row)">发起勘误</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-box">
          <el-row>
            <el-col :span="24" style="text-align:right">
              <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>
      </div>
    </div>
  </div>
</template>

<script>
import searchHeader from '@/components/searchHeader'
import { illegalListPage, createIllegalCorrectionsTask } from '@/api/corrections'
export default {
  components: {
    searchHeader
  },
  data() {
    return {
      tableData: [],
      pageParam: {
        curPage: 1,
        pageSize: 10,
        total: 0,
        paramMap: {
          operationStatus: '0'
        },
        customParamMap: {
          sourceType: '1'
        }
      },
      searchForm: {
        entName: '',
        searchCode: '',
        sourceType: '1'
      },
      loading: false,
      showFixed: false
    }
  },
  mounted() {
    this.loadPage()
    window.addEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    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
      }
    },
    // 加载分页
    loadPage() {
      if (this.loading) return
      this.loading = true
      illegalListPage(this.pageParam).then(res => {
        this.loading = false
        if (res.code === 0) {
          const data = res.data
          const list = []
          let index = (this.pageParam.curPage - 1) * this.pageParam.pageSize
          data.records.forEach(each => {
            each.index = ++index
            each.uscc = each.uniscid || each.regno
            list.push(each)
          })
          this.tableData = list
          this.pageParam.total = data.total
        }
      })
    },
    pageSizeChange1() {},
    pageIndexChange1() {},
    // 当前分页改变
    pageIndexChange(curPage) {
      this.pageParam.curPage = curPage
      this.loadPage()
    },
    // 分页大小改变
    pageSizeChange(pageSize) {
      this.pageParam.pageSize = pageSize
      this.loadPage()
    },
    createTask(row) {
      this.$confirm('是否确认发起勘误流程').then(_ => {
        createIllegalCorrectionsTask(row.illegallistid).then(res => {
          if (res.code === 0) {
            this.$router.push({ path: '/illegal/corrections/detail', query: res.data })
            // const { href } = this.$router.resolve({ path: '/illegal/corrections/detail', query: res.data })
            // window.open(href)
          }
        })
      }).catch(_ => {})
    },
    // 重置表单
    resetForm() {
      this.searchForm = {
        entName: '',
        searchCode: '',
        entType: ''
      }
    },
    // 搜索
    search() {
      this.pageParam.customParamMap = this.searchForm
      this.pageParam.curPage = 1
      this.loadPage()
    }
  }
}
</script>

<style lang="scss" scoped>
.main-content{
  font-size: $table-content-font-size;
    >div:not(:first-child){
        margin-top:16px;
    }
    .btn-box{
        text-align:right;
    }
    .main-body{
      margin-bottom: 100px;
        // padding:16px 0;
        // border-top: 1px dashed #70AEFF;
        .header{
            .header-label{
                font-size: 20PX;
                font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                font-weight: bold;
                color: #243668;
                line-height: 32px;
            }
        }
    }
  .label-name {
    font-size: $table-content-font-size;
  }
}
.search-box{
  background:#fff;
  padding: 10px;
  box-shadow: rgba(0, 21, 41, 0.08);
  margin-bottom: 40px;
  .search-field{
      display:inline-block;
      width:80%;
      >p{
          margin:0 0 10px 0;
          font-family: Microsoft YaHei, Microsoft YaHei-Bold;
          color: #5e5e7a;
          font-size:16PX;
      }
  }
}
/deep/.el-input__inner{
  height: 28px !important;
}
.content{
  font-size: 16px;
  background: #fff;
  /deep/.el-table .warning-row {
    background: #eaf4fe!important;
  }
}
.fixed-bottom {
  position: fixed;
  width: 100%;
  bottom: -10px;
  right: 0;
  z-index: 99;
  padding: 10px 10px 20px 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);
}
</style>
