<!--  -->
<template>
  <div class="main-content m20">
    <!--头部-查询-->
    <div class="content-header">
      <searchHeader title="查询" />
      <div class="body search-body">
        <el-row class="mb10">
          <el-col :span="10">
            <label class="label-name">姓名:</label>
            <div class="search-input-box">
              <el-input v-model="searchForm.name" type="text" class="search-input" placeholder="请输入姓名" @keyup.enter.native="loadPage" />
            </div>
          </el-col>
          <el-col :span="10">
            <label class="label-name">身份证号:</label>
            <div class="search-input-box">
              <el-input v-model="searchForm.cerNo" type="text" class="search-input" placeholder="请输入身份证号" @keyup.enter.native="loadPage" />
            </div>
          </el-col>
          <el-col :span="4">
            <div class="btn-box">
              <el-button size="mini" type="primary" @click="loadPage">查询</el-button>
              <el-button size="mini" @click="$utils.resetObj(searchForm)">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--body-查询结果-->
    <div class="content-body">
      <div class="body">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          style="width:95%;margin:0 auto"
          :data="tableData"
          tooltip-effect="dark"
          :fit="true"
          :row-class-name="tableRowClassName"
          :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
        >
          <el-table-column
            type="index"
            width="100px"
            :index="(index)=>{ return pageParam.pageSize * (pageParam.curPage - 1) + index + 1}"
          >
            <template slot="header">
              序号
            </template>
          </el-table-column>
          <el-table-column prop="姓名" :show-overflow-tooltip="true" label="姓名" align="left">
            <template slot-scope="scope">
              <span v-if="scope.row.身份证号码" style="color: #8cc3fb;cursor: pointer;" class="span-content" @click="showEntList(scope.row.身份证号码)">{{ scope.row.姓名 }}</span>
              <span v-else>{{ scope.row.姓名 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="身份证号码" :show-overflow-tooltip="true" label="身份证号码" align="left" />

          <el-table-column prop="状态" :show-overflow-tooltip="true" label="状态" align="left" />
        </el-table>
        <div class="page-box">
          <el-pagination
            :disabled="loading"
            :page-size="pageParam.pageSize"
            :total="pageParam.total"
            :current-page.sync="pageParam.curPage"
            :page-sizes="[10, 20, 30, 40,50,100,200]"
            layout="slot,total, sizes, prev, pager, next, jumper"
            @size-change="(pageSize)=>{ pageParam.pageSize = pageSize;loadPage() } "
            @current-change="(curPage)=>{ pageParam.curPage = curPage;loadPage() }"
          >
            <span>
              第 {{ pageParam.curPage }} 页 /
              共 {{ (pageParam.total !== 0 ? parseInt((pageParam.total + pageParam.pageSize - 1)/pageParam.pageSize) : 1) }} 页
            </span>
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="关联的企业信息"
      :visible.sync="dialogVisible"
      width="80%"
      center
    >
      <div class="content-body">
        <div class="body">
          <el-table
            ref="multipleTable"
            v-loading="dialogLoading"
            style="width:95%;margin:0 auto"
            :data="dialogTableData"
            tooltip-effect="dark"
            :fit="true"
            :row-class-name="tableRowClassName"
            :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
          >
            <el-table-column
              type="index"
              width="100px"
              :index="(index)=>{ return dialogPageParam.pageSize * (dialogPageParam.curPage - 1) + index + 1}"
            >
              <template slot="header">
                序号
              </template>
            </el-table-column>
            <el-table-column prop="统一社会信用代码" :show-overflow-tooltip="true" label="统一社会信用代码/注册号" align="left" />
            <el-table-column prop="企业名称" :show-overflow-tooltip="true" label="主体名称" align="left">
              <template slot-scope="scope">
                <span style="color: #8cc3fb;cursor: pointer;" class="span-content" @click="toEntDetail(scope.row.企业主键)">{{ scope.row.企业名称 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="状态" :show-overflow-tooltip="true" label="状态" align="left" />
          </el-table>
          <div class="page-box">
            <el-pagination
              :disabled="dialogLoading"
              :page-size="dialogPageParam.pageSize"
              :total="dialogPageParam.total"
              :current-page.sync="dialogPageParam.curPage"
              :page-sizes="[10, 20, 30, 40,50,100,200]"
              layout="slot,total, sizes, prev, pager, next, jumper"
              @size-change="(pageSize)=>{ dialogPageParam.pageSize = pageSize;dialogLoadPage() } "
              @current-change="(curPage)=>{ dialogPageParam.curPage = curPage;dialogLoadPage() }"
            >
              <span>
                第 {{ dialogPageParam.curPage }} 页 /
                共 {{ (dialogPageParam.total !== 0 ? parseInt((dialogPageParam.total + dialogPageParam.pageSize - 1)/dialogPageParam.pageSize) : 1) }} 页
              </span>
            </el-pagination>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import searchHeader from '@/components/searchHeader'
import { getBlackForPerson, getEntBlackForPerson } from '@/api/blacklist'
export default {
// import引入的组件需要注入到对象中才能使用
  components: {
    searchHeader
  },
  data() {
    // 这里存放数据
    return {
      searchForm: {},
      pageParam: {
        pageSize: 10,
        total: 0,
        curPage: 1
      },
      loading: false,
      tableData: [],
      dialogVisible: false,
      dialogLoading: false,
      dialogTableData: [],
      dialogPageParam: {
        cerNo: '',
        pageSize: 10,
        total: 0,
        curPage: 1
      }
    }
  },
  // 方法集合
  methods: {
    toEntDetail(pripid) {
      this.dialogVisible = false
      this.$router.push({
        path: '/comprehensive/details',
        query: {
          pripid
        }
      })
    },
    showEntList(cerno) {
      this.dialogTableData = []
      this.dialogVisible = true
      this.dialogPageParam.cerNo = cerno
      this.dialogLoadPage()
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    // 加载分页
    loadPage() {
      if (this.loading) return
      if (!this.searchForm.name && !this.searchForm.cerNo) {
        this.$message.warning('请输入姓名或身份证号')
        return
      }
      this.loading = true
      getBlackForPerson({
        ...this.searchForm,
        ...this.pageParam
      }).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.pageParam.total = res.data.total
        }
      }).finally(() => {
        this.loading = false
      })
    },
    dialogLoadPage() {
      if (this.dialogLoading) return
      this.dialogLoading = true
      getEntBlackForPerson(this.dialogPageParam).then(res => {
        if (res.code === 0) {
          this.dialogTableData = res.data.records
          this.dialogPageParam.total = res.data.total
        }
      }).finally(() => {
        this.dialogLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.main-content{
  background: #fff;
  padding: 10px;
  .content-header{
    background: white;
    .label-name_1 {
      text-align: right;
      display: inline-block;//转成行内快，才可定义宽度
      width: 200px;
      font-size: $table-content-font-size;
    }
    .search-input-box_1{
      display: inline-block;
    }
    .label-name_2 {
      text-align: right;
      display: inline-block;//转成行内快，才可定义宽度
      width: 200px;
      font-size: $table-content-font-size;
    }
    .search-input-box_2{
      display: inline-block;
    }
    .label-name_3 {
      text-align: right;
      display: inline-block;//转成行内快，才可定义宽度
      width: 120px;
      font-size: $table-content-font-size;
    }
    .custom{
      width: calc(100% - 120px);
    }
    .search-input{
      cursor: pointer;
    }
    .body{
      padding: 20px 0 ;
      border-top:none;
      margin-bottom: 40PX;
    }
  }
  .content-body{
    background:white
  }
  .header{
    .title{
      font-weight: 600;
      font-size: 1.2rem;
    }
  }
  .page-box{margin:10PX;text-align:right}
  .mb10{
    margin-bottom: 10px;
  }
  .btn-box{
    display: inline-block;
    padding-left: 10px;
  }
}
/deep/.el-input__inner{
  height: 28px;
}
.label-name{
  display: inline-block;
  text-align: right;
  padding: 0 10px;
  font-size: $table-content-font-size;
}
.search-body {
  .el-input,.el-select,.el-date-editor{
    width: 100%;
  }
  .search-input-box{
    display: inline-block;
    width: calc(100% - 220px);
  }
}
</style>
