<template>
  <div class="main-content market m20">
    <div class="search-box">
      <el-row class="mb10">
        <el-col :span="12">
          <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.searchName" clearable placeholder="请输入主体名称" />
          </div>
        </el-col>
        <el-col :span="12">
          <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" clearable placeholder="请输入注册码/统一社会信用代码" />
          </div>
        </el-col>
      </el-row>
      <el-row class="mb10">
        <el-col :span="12">
          <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.caseno" clearable size="mini" type="text" class="search-input" placeholder="请输入案件编号" @keyup.enter.native="search" />
          </div>
        </el-col>
        <el-col :span="12">
          <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.writsno" clearable 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">
            <el-button type="primary" size="mini" @click="search">查询</el-button>
            <el-button size="mini" @click="resetForm">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-body ">
      <div class="content">
        <el-row class="bl0" style="margin-bottom: 10px">
          <el-col :span="6">
            <el-button style="margin-left: 50px" size="mini" type="primary" @click="templateDialog = true">批量吊销勘误</el-button>
          </el-col>
        </el-row>
        <el-table
          v-loading="loading"
          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="writsno"
            label="处罚决定书文号"
            min-width="200"
            show-overflow-tooltip
          />
          <el-table-column
            prop="revokedate"
            label="吊销时间"
          />
          <el-table-column
            prop="caseno"
            label="案件编号"
            show-overflow-tooltip
          />
          <el-table-column prop="intosponsorname" :show-overflow-tooltip="true" label="经办人" min-width="80" align="left" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link type="primary" @click="createTask(scope.row)">发起勘误</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-box">
          <el-row class="bl0">
            <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"
              >
                <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>
    <el-dialog
      title="Excel导入"
      :visible.sync="templateDialog"
      width="30%"
    >
      <el-link
        style="font-size: medium"
        type="primary"
        @click="downLoadTemp"
      >下载模板</el-link>

      <el-upload
        :action="uploadPath"
        :on-success="uploadCallback"
        :on-error="errorCallback"
        :before-upload="beforeUpload"
        :show-file-list="false"
        accept=".xls,.xlsx"
        multiple
        :file-list="fileList"
        class="templateUpload"
      >
        <el-link
          style="font-size: medium;margin-top: 10px"
          type="primary"
        >上传文件</el-link>
      </el-upload>
      <FakeProgress v-if="showFakeProgress" ref="FakeProgress" style="margin-top: 10px;" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="templateDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { revokeListPage, createRevokeCorrectionsTask, createBatchRevokeCorrectionsTask } from '@/api/revoke'
import FakeProgress from '@/components/FakeProgress'
export default {
  components: {
    FakeProgress
  },
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem('user')),
      tableData: [],
      pageParam: {
        curPage: 1,
        pageSize: 10,
        total: 0,
        paramMap: {
        }
      },
      searchForm: {
        searchName: '',
        searchCode: '',
        caseno: '',
        writsno: ''
      },
      loading: false,
      showFixed: false,
      templateDialog: false,
      showFakeProgress: false,
      fileList: [],
      uploadPath: `${process.env.VUE_APP_BASE_API}/revokelist/fileParamExplain`,
    }
  },
  mounted() {
    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
      revokeListPage(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
        }
      })
    },
    // 当前分页改变
    pageIndexChange(curPage) {
      this.pageParam.curPage = curPage
      this.loadPage()
    },
    // 分页大小改变
    pageSizeChange(pageSize) {
      this.pageParam.pageSize = pageSize
      this.loadPage()
    },
    createTask(row) {
      if (row.punishOrgCn !== this.user.orgName) {
        this.$message.error('只能勘误本单位的吊销处罚记录')
        return
      }
      this.$confirm('是否确认发起勘误流程', '提示').then(_ => {
        createRevokeCorrectionsTask(row.revlistid).then(res => {
          if (res.code === 0) {
            this.$router.push({ path: '/revoke/revokeCorrectionsDetail', query: res.data })
          }
        })
      }).catch(_ => {})
    },
    // 重置表单
    resetForm() {
      this.searchForm = {
        entName: '',
        searchCode: '',
        entType: ''
      }
    },
    // 搜索
    search() {
      this.pageParam.customParamMap = {
        ...this.searchForm
      }
      this.pageParam.curPage = 1
      this.loadPage()
    },
    // 模板下载
    downLoadTemp() {
      const name = 'revokeImport.xls'
      window.open(process.env.NODE_ENV === '"development"' ? `/${name}` : `/aiccs/${name}`)
    },
    //上传文件
    uploadCallback(res, file) {
      if (res.code === 0) {
        this.$refs.FakeProgress.success()
        setTimeout(() => {
          this.templateDialog = false
          this.showFakeProgress = false
          var resData = {}
          this.$confirm(`可导数量：${res.data.enableSize} 不可导数量：${res.data.disableSize}`, '导入筛选结果', {
            confirmButtonText: '继续导入',
            cancelButtonText: '保存清单',
            distinguishCancelAndClose: true,
            beforeClose: (action, instance, done) => {
              if (action === 'confirm') {
                if (res.data.enableSize === 0) {
                  return this.$message.error('可导入数量为0，请重新上传')
                }
                instance.confirmButtonLoading = true
                instance.confirmButtonText = '正在导入，请稍后。'
                createBatchRevokeCorrectionsTask(res.data.enableListId).then(resp => {
                  if (instance.confirmButtonLoading) {
                    if (resp.code === 0) {
                      resData = resp.data
                      instance.confirmButtonText = '完成'
                      instance.confirmButtonLoading = false
                      done()
                    }
                  }
                }).finally(() => {
                  if (instance.confirmButtonLoading === false) {
                      this.$router.push({ path: '/revoke/revokeCorrectionsDetail', query: { tasklistid: resData.tasklistid, bizseq: resData.bizseq, workflowId: resData.workFlowId }})
                  }
                })
              } else if (action === 'cancel') {
                if (res.data.disableSize === 0) {
                  return this.$message.error('清单数据为0，无法保存')
                }
                const url = location.origin + process.env.VUE_APP_BASE_API + `/revokelist/failEntExport?disableListId=${encodeURIComponent(res.data.disableListId)}`
                window.open(url)
              } else if (action === 'close') {
                done()
              }
            }
          })
        }, 1000)
      }
    },
    errorCallback(file) {
      this.$refs.FakeProgress.error()
      this.showFakeProgress = false
      this.$message.warning('上传文件失败，请检查文件格式或数据，再重新上传，或联系管理员')
    },
     // 上传模板格式Excel之前校验
    beforeUpload(file) {
      this.showFakeProgress = true
      return new Promise((resolve, reject) => {
        var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
        const extension = testmsg === 'xls'
        const extension2 = testmsg === 'xlsx'
        if (!extension && !extension2) {
          this.uploadLoading = false
          this.$message({
            message: '上传文件只能是 xls、xlsx格式！',
            type: 'warning'
          })
          reject()
        } else {
          resolve()
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.main-content{
  padding: 0;
    >div:not(:first-child){
        margin-top:16px;
    }

    .btn-box{
        text-align:right;
    }
    .main-body{
      margin-bottom: 100px;
        .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;
  }
}
/deep/.el-input__inner{
  height: 28px !important;
}
.content{
  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;
  /* 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);
}
.search-box{
    padding:30px 50px 20px 50px;
    .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;
        }
    }
}
</style>
