<template>
  <div id="newsInfo">
    <el-row>
      <el-col :span="24" class="search">
        <el-col :span="5">
          <span>筛选条件：</span>
          <el-select v-model="search.status" placeholder="请选择审核状态">
            <el-option label="审核中" value="0"></el-option>
            <el-option label="审核通过" value="1"></el-option>
            <el-option label="审核拒绝" value="2"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <span>输入条件：</span>
          <el-input v-model="search.company_name" :placeholder="placeholder" class="input"></el-input>
        </el-col>
        <!--<el-col :span="7">
            <span>时间选择：</span>
            <el-date-picker v-model="search.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
          </el-col>-->
        <el-col :span="8">
          <el-button class="btnSearch" @click="toQuery">查询</el-button>
          <el-button class="btnSearch qing" @click="toClear">清空</el-button>
        </el-col>
      </el-col>
      <el-col :span="24">
        <el-table
          ref="debtTable"
          :data="debtTable"
          tooltip-effect="dark"
          :default-sort="{ prop: 'date', order: 'descending' }"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" align="center"> </el-table-column>
          <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
          <el-table-column property="company_name" label="企业名称" align="center"> </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.status === '0' ? '审核中' : scope.row.status === '1' ? '审核通过' : '审核拒绝' }}</span>
            </template>
          </el-table-column>
          <el-table-column property="contacts" label="融资联系人" align="center"> </el-table-column>
          <el-table-column property="contact_position" label="联系人职位" align="center"> </el-table-column>
          <el-table-column property="contact_email" label="联系人邮箱" align="center"> </el-table-column>
          <el-table-column property="telephone" label="固定电话" align="center"> </el-table-column>
          <el-table-column label="操作" align="center" width="300px">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleClick(scope.row)" class="view" icon="el-icon-view"></el-button>
            </template>
          </el-table-column>
          <!-- 
                <el-table-column label="操作" align="center" width="300px">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" class="view" icon="el-icon-view"></el-button>
                  </template>
                </el-table-column> -->
        </el-table>
        <el-col class="page" :span="24">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            background
            layout="total,  prev, pager, next, jumper"
            :total="total"
            :page-size="pageSize"
          >
          </el-pagination>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'newsInfo',
  props: {
    debtTable: null,
    total: null,
  },
  components: {},
  data: () => ({
    placeholder: '请输入企业名称',
    search: {},
    currentPage: 1,
    currentPage: 0,
    pageSize: 10,
  }),
  created() {},
  computed: {
    status() {
      return this.$route.params.status;
    },
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },

    handleCurrentChange(currentPage) {
      console.log(currentPage);
      this.$emit('handleCurrentChange', { skip: (currentPage - 1) * this.pageSize, limit: this.pageSize, currentPage });
    },
    handleCurrentChanges(currentPage) {
      console.log(currentPage);
      this.$emit('handleCurrentChanges', { skip: (currentPage - 1) * this.pageSize, limit: this.pageSize, currentPage });
    },
    handleCurrentChangess(currentPage) {
      console.log(currentPage);
      this.$emit('handleCurrentChangess', { skip: (currentPage - 1) * this.pageSize, limit: this.pageSize, currentPage });
    },

    handleClicks(tab, event) {
      console.log(tab, event);
    },
    handleClick(id) {
      let newid = id.id;

      this.$emit('handleClick', newid);
    },
    toQuery() {
      this.$set(this, `currentPage`, 1);
      this.$emit('select', { skip: 0, limit: this.limit, ...this.search });
    },
    toClear() {
      let keys = Object.keys(this.search);
      this.search = {};
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: red;
  border-color: red;
}
/deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: red;
  border-color: red;
}
/deep/.el-table th {
  background-color: #f5f6fa;
  padding: 8px 0;
}
/deep/.el-table td {
  padding: 11px 0;
}
.other {
  color: #f36302;
}
.view {
  color: #f36302;
}
.edit {
  color: #2ccc02;
}
.delete {
  color: #e9021d;
}
/deep/.el-pagination {
  padding: 26px 20px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: red;
}
.input {
  width: 150px;
}

/deep/ .el-input__inner {
  height: 35px;
}
.search {
  background: #ffffff;
  width: 97%;
  height: 35px;
  margin: 20px;
  margin-left: 0px;
}
.btnSearch {
  width: 80px;
  height: 34px;
  background: rgba(233, 2, 29, 1);
  border-radius: 4px;
  padding: 0;
  color: #fff;
}

.qing {
  background: rgba(185, 185, 185, 1);
}
</style>
