<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.entity.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.entity.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">企业名称</label>
            <div class="search-input-box">
              <el-input v-model="searchForm.entity.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 class="body">
        <FeedBackList
          title=""
          default-height="900"
          :table-info="tableInfo"
          :show-pagination="true"
          @pageSizeChangeTable="pageSizeChangeTable"
          @pageIndexChangeTable="pageIndexChangeTable"
        />
      </div>
    </div>
    <ImplementFeedback />
  </div>
</template>

<script>
import { entLockMeasureFeedBackLogPage } from '@/api/search'
import FeedBackList from './components/反馈措施列表'
export default {
  components: {
    FeedBackList
  },
  data() {
    return {
      searchForm: {
        curPage: 1,
        total: 0,
        pageSize: 10,
        entity: {
          xxztlb: '',
          xxztmc: '',
          xxzthm: ''
        }
      },
      loading: false,
      tableInfo: {},
      objectTypeOptions: [
        { label: '法人', value: '0' },
        { label: '自然人', value: '1' }
      ],
      tableHeader: [],
      fileIds: []
    }
  },
  watch: {},
  mounted() {
    this.loadPage()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    // 重置搜索表单
    resetSearchForm() {
      this.searchForm.entity = {
        xxztlb: '',
        xxztmc: '',
        xxzthm: ''
      }
      this.loadPage()
    },
    // 搜索
    search() {
      this.searchForm.curPage = 1
      this.loadPage()
    },
    // 分页大小改变
    pageSizeChangeTable(pageSize) {
      this.searchForm.pageSize = pageSize
      this.loadPage()
    },
    // 加载分页
    loadPage() {
      if (this.loading) return
      this.loading = true
      entLockMeasureFeedBackLogPage(this.searchForm).then(res => {
        this.loading = false
        this.tableInfo = res.data
      })
    },
    pageIndexChangeTable(pageSize) {
      this.searchForm.curPage = pageSize
      this.loadPage()
    }
  }
}
</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;
      }
    }
    .custom{
      width: calc(100% - 150px);
    }
    .search-input{
      cursor: pointer;
    }
    .body{
      padding: 20px 0 ;
      border-top:none;
    }
  }
  .content-body{
    background:white;
    .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>
