<template>
  <div class="winner_list">
    <table>
      <tbody>
      <tr v-for="(row, idx) in $props.rows" :key="idx" :style="{height: 100 / rows.length + '%'}">
        <td v-if="showIcon"><div class="col_number">{{ idx + 1 }}</div></td>
        <td class="winner_span" :style="columnsStyle['title']">{{ row.title }}</td>
        <td v-for="(col, idz) in row.column" :key="idz" :style="columnsStyle[col.key]">
          <p class="key_span">{{ col.key }}</p>
          <p class="value_span">{{ col.value }}</p>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<script>

export default {
  name: "WinnersList",
  props: {
    showIcon: {
      type: Boolean,
      default: true
    },
    columnsStyle:{
      type: Object,
      default: function () {
        return {};
      }
    },
    rows: {
      type: Array,
      default:function(){
        return [
          {title: '标题列', column: [{key: '字段', value: '0'}]},
          {title: '标题列', column: [{key: '字段', value: '0'}]},
          {title: '标题列', column: [{key: '字段', value: '0'}]}
        ];
      }
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>
<style scoped>

.winner_list {

}

table {
  height: 100%;
  font-size: 12px;
  color: white;
}

tr:nth-child(odd) {
  background-color: #0E5FFF20;
}

tr:nth-child(even) {
  background-color: #0E5FFF30;
}

td {
  padding: 0 0 0 1rem;
}

.col_number {
  height: 38px;
  min-width: 38px;
  color: #19EBFF;
  font-weight: bold;
  text-align: center;
  line-height: 38px;
  background: url(../../assets/img/number_bg.png) no-repeat center;
}

.winner_span {
  color: white;
  font-size: 14px;
}

.key_span {
}

.value_span {
  color: lightblue;
  font-weight: bold;
}
</style>
