<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.searchUscc" clearable size="mini" 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_2">除名原因：</label> <!-- clearable 可以清空选项  -->
              <el-select
                v-model="searchForm.specause"
                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-row>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12" class="mb10">
            <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-col :span="12">
            <el-row class="mb10">
              <label class="label-name">除名日期：</label> <!-- value-format="yyyy-MM-dd" 指定日期发送格式  -->
              <el-date-picker
                v-model="searchForm.searchDate"
                size="mini"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11" :offset="1">
            <div class="btn-box">
              <el-button size="mini" type="primary" @click="search">查询</el-button>
              <el-button size="mini" @click="searchForm.searchUscc = '';searchForm.searchName='';searchForm.reportYear='';searchForm.searchDate='';searchForm.specause=''">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </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 prop="index" label="序号" min-width="30" align="center" />
          <el-table-column label="统一社会信用代码/注册号" min-width="100" align="left">
            <template slot-scope="scope">
              {{ scope.row.uniscid ||scope.row.regno }}
            </template>
          </el-table-column>
          <el-table-column prop="entname" :show-overflow-tooltip="true" label="主体名称" min-width="150" align="left" />
          <el-table-column prop="enttypeName" :show-overflow-tooltip="true" label="主体类型" min-width="60" align="left" />
          <el-table-column prop="abntime" label="除名日期" min-width="50" align="left" />
          <el-table-column prop="specause" :show-overflow-tooltip="true" label="除名原因" min-width="150" align="left" :formatter="reasonFormat" />
          <el-table-column label="操作" min-width="60" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="check(scope.row.abnlistid,scope.row.specause,scope.row.pripid,scope.row.abntime)">办理</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-box">
          <el-row class="bl0">
            <el-col :span="24">
              <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="提示"
      :visible.sync="templateDialog1"
      width="30%"
    >
      <span>{{ prompt }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="details.length>0" type="primary" @click="showDetails = true">查看详情</el-button>
        <el-button type="primary" :loading="subloading" @click="startTask(abnlistidParam)">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="showDetails" title="市场主体一年内因实地查无的除名记录">
      <el-table :data="details" tooltip-effect="dark" size="mini" style="width: 100%; min-height: 380px" :fit="true">
        <el-table-column prop="entname" :show-overflow-tooltip="true" label="主体名称" min-width="150" align="left" />
        <el-table-column prop="specause" :show-overflow-tooltip="true" label="除名原因" min-width="180" align="left" :formatter="reasonFormat" />
        <el-table-column prop="remdate" :show-overflow-tooltip="true" label="除名日期" min-width="80" align="left" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { commonPage, bizRemListValidateBiz } from '@/api/abnormal'
import { startBizRemove } from '@/api/abnormal'
import { getConstant } from '@/api/system'
export default {
  components: {
  },
  data() {
    return {
      subloading: false,
      abnlistidParam: '',
      templateDialog1: false,
      showDetails: false,
      prompt: '',
      details: [],
      selection: [],
      searchForm: {
        entertype: 'individual'
      },
      reasonList: [], // 几种列入原因
      reason: '',
      loading: false,
      showMore: false,
      showFixed: false,
      tableData: [],
      pageParam: {
        customParamMap: { entertype: 'individual' },
        curPage: 1,
        total: 0,
        pageSize: 10
      }
    }
  },
  watch: {
  },
  mounted() {
    // 加载个体户列入原因
    getConstant('CD75').then(res => {
      if (res.code === 0) {
        const list = []
        res.data.forEach(each => {
          list.push({
            value: each.code,
            label: each.name
          })
        })
        this.reasonList = list
      }
    })
    // this.loadPage()
    window.addEventListener('scroll', this.handleScroll, true)
  },
  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
      }
    },
    // 列入原因
    reasonFormat(row) {
      let name = ''
      this.reasonList.forEach(each => {
        if (each.value === row.specause) {
          name = each.label
        }
      })
      return name
    },
    check(abnlistid, specause, pripid, abntime) {
      return bizRemListValidateBiz(abnlistid).then(({ code, data }) => {
        if (data.length > 0) {
          this.$message.error(data[0].reason)
        } else {
          this.abnlistidParam = abnlistid
          this.templateDialog1 = true
          this.prompt = '是否确认启动待办'
        }
      })
    },
    // 启动待办
    startTask(abnlistid) {
      this.subloading = true
      startBizRemove('', abnlistid, 'individual').then(res => {
        this.subloading = false
        if (res.code === 0) {
          this.$router.push({ path: '/credit/company/removeaccept', query: { tasklistid: res.data.tasklistid, bizseq: res.data.bizseq, type: 'individual' }})
        } else if (res.code === 3002) {
          this.subloading = false
          this.prompt = res.msg
          this.templateDialog1 = true
        } else {
          this.subloading = false
          this.$message.error(res.msg)
        }
      })
    },
    // 搜索
    search() {
      this.pageParam.customParamMap = this.searchForm
      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
      commonPage(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++
          list.push(each)
        })
        this.tableData = list
        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.pripid === selection[j].pripid) {
                this.$refs.multipleTable.toggleRowSelection(each, true)
              }
            }
          }
        })
      })
    }
  }
}
</script>

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