<template>
  <div class="main-content m20">
    <!--头部-查询-->
    <div class="content-header">
      <div class="body search-body">
        <el-row class="mb10">
          <el-col :span="7">
            <label class="label-name">对象类型</label>
            <div class="search-input-box">
              <el-select
                v-model="searchForm.xxztlb"
                size="mini"
                filterable
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in objectTypeOptions"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </el-col>
          <el-col :span="7">
            <label class="label-name">统一社会信用代码</label>
            <div class="search-input-box">
              <el-input v-model="searchForm.xxzthm" size="mini" clearable type="text" class="search-input" placeholder="请输入主体名称" @keyup.enter.native="search" />
            </div>
          </el-col>
          <el-col :span="7">
            <label class="label-name">{{ searchForm.xxztlb === '0'?'法人':'自然人' }}名称</label>
            <div class="search-input-box">
              <el-input v-model="searchForm.xxztmc" size="mini" clearable type="text" class="search-input" placeholder="请输入主体名称" @keyup.enter.native="search" />
            </div>
          </el-col>
          <el-col :span="3" style="text-align:right">
            <el-button type="primary" size="mini" @click="search">查询</el-button>
            <el-button size="mini" @click="resetSearchForm">重置</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--body-查询结果-->
    <div class="content-body">
      <div v-if="tableInfoArr.length > 0" class="body">
        <div v-for="item in tableInfoArr" :key="item.tableName">
          <PunishmentList :title="item.tableName" :table-info="item" :show-pagination="false" />
          <incentivesTable title="奖惩措施" :table-a-r-r="item.css" :search-info="searchForm" />
        </div>
      </div>
      <div v-else style="text-align: center;font-size: 16px;margin-top: 100px">
        <img src="../../../assets/images/暂无数据.png">
        <div style="text-align: center">
          暂无数据
        </div>
      </div>
    </div>
    <ImplementFeedback />
  </div>
</template>

<script>
import { entLockNameListSearch } from '@/api/search.js'
import incentivesTable from './components/奖励措施'
import PunishmentList from './components/奖惩名单名称'
import ImplementFeedback from './components/实施反馈'
// import resultJson from '@/assets/api.json'
export default {
  components: {
    incentivesTable,
    PunishmentList,
    ImplementFeedback
  },
  data() {
    return {
      searchForm: {
        xxztlb: 0,
        xxzthm: '',
        xxztmc: '',
        busiNo: ''
      },
      loading: false,
      tableInfoArr: [],
      objectTypeOptions: [
        { label: '法人', value: 0 },
        { label: '自然人', value: 1 }
      ]
    }
  },
  watch: {},
  mounted() {
    // this.loadPage()
    // this.tableInfoArr = resultJson.data
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    // 重置搜索表单
    resetSearchForm() {
      this.searchForm = {
        xxztlb: '',
        xxzthm: '',
        xxztmc: ''
      }
    },
    // 搜索
    search() {
      this.loadPage()
    },
    // 加载分页
    loadPage() {
      if (this.loading) return
      this.loading = true
      entLockNameListSearch(this.searchForm).then(res => {
        this.loading = false
        if (res.code === 0) {
          const data = res.data || {}
          this.tableInfoArr = data.result || []
          this.searchForm.busiNo = data.busiNo || ''
        }
      }).catch(_ => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-content{
  background: #fff;
  padding: 10px;
  .content-header{
    background: white;
    .search-body{
      /deep/ .el-date-editor *{
        font-size: 16px!important;
      }
      /deep/ .el-date-editor .el-range-separator{
        width: 8%!important;
      }
      width: 95%;
      margin: 0 auto;
    }
    .label-name {
      text-align: right;
      display: inline-block;
      width: 150px;
      padding: 0 10px;
      font-size: $table-content-font-size;
    }
    .search-input-box{
      display: inline-block;
      width: calc(100% - 150px);
      & > *{
        width: 100%!important;
      }
    }
    .search-input{
      cursor: pointer;
    }
    .body{
      padding: 20px 0 ;
      border-top:none;
      /* margin-bottom: 40PX; */
    }
  }
  .content-body{
    background:#fff;
    min-height: 400px;
    .header{
      width: 95%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      color: #000;
      img{
        margin-right:10px;
      }
    }
  }
  .header{
    height:50PX;
    padding:15PX 10PX;
    .title{
      font-weight: 600;
      font-size: 1.2rem;
    }
  }
  .icon{
    font-size: 50px;
    color: rgb(24, 144, 255);
  }
  .page-box{
    margin:10PX;
    .el-pagination{
      text-align: right;
    }
  }
  .mb10{
    margin-bottom: 10px;
  }
}
</style>
