<template>
  <div id="list">
    <el-row>
      <el-col :span="24">
        <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="name" label="机构名称" align="center"> </el-table-column>
            <el-table-column label="机构类型" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.type === '0' ? '发布债权产品' : scope.row.type === '1' ? '发布股权产品' : scope.row.type === '2' ? '发布债权产品和股权产品' : ''
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="机构logo" align="center">
              <template slot-scope="scope">
                <span>
                  <el-image v-if="scope.row.logo" :src="scope.row.logo" style="height:20px;width:20px " @click="showImage(scope.row.logo)"></el-image
                ></span>
              </template>
            </el-table-column>
            <el-table-column property="profession" label="所属行业" align="center"> </el-table-column>
            <el-table-column property="representative" label="法定代表人" align="center"> </el-table-column>
            <el-table-column label="产品状态" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.status === '1' ? '待审核' : scope.row.status === '2' ? '已上架' : scope.row.status === '3' ? '已下架' : ''
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="300px">
              <template slot-scope="scope">
                <!-- <el-button @click="handleClick(scope.row)" type="text"><i class="el-icon-edit"></i></el-button>
                <el-button @click.native.prevent="deleteRow(scope.$index, debtTable)" type="text"><i class="el-icon-delete"></i></el-button> -->
                <el-button size="mini" type="text" class="edit" icon="el-icon-view" @click="handleClick(scope.row)"></el-button>
                <el-button size="mini" type="text" class="delete" icon="el-icon-delete" @click.prevent="deleteRow(scope.row.id)"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row>
            <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-row>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialogVisible">
      <el-image :src="elImage" style="height:100%;width:100% "></el-image>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'list',
  props: {
    debtTable: null,
    total: null,
    totals: null,
    totalss: null,
  },
  components: {},
  data: () => ({
    currentPage: 0,
    pageSize: 10,
    dialogVisible: false,
    elImage: '',
  }),
  created() {},
  computed: {},
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    deleteRow(id) {
      this.$emit('deleteRow', id);
    },
    handleCurrentChange(currentPage) {
      console.log(currentPage);

      this.$emit('handleCurrentChange', { skip: (currentPage - 1) * this.pageSize, limit: this.pageSize, currentPage });
    },
    handleClick(id) {
      console.log(id.id);
      let newid = id.id;

      this.$emit('handleClick', newid);
    },
    showImage(image) {
      if (image) {
        this.$set(this, `elImage`, image);
        this.$set(this, `dialogVisible`, true);
      } else {
        this.$set(this, `dialogVisible`, false);
      }
    },
  },
};
</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;
}
</style>
