<template>
  <div class="winner_list">
    <table>
      <tbody>
      <tr v-for="(row, idx) in rows" :key="idx" :style="{height: 100 / rows.length + '%'}">
        <td><div class="col_number">{{ idx + 1 }}</div></td>
        <td class="winner_span" @click="goWinnerList">{{ row.title }}</td>
        <td v-for="(col, idz) in row.column" :key="idz">
          <p class="key_span">{{ col.key }}</p>
          <p class="value_span">{{ col.value }}</p>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import DisplayBoard from "../container/display-board.vue";

export default {
  name: "WinnersList",
  components: {DisplayBoard},
  props: {},
  data() {
    return {
      rows: [
        {
          title: "XX有限公司",
          column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
        },
        {
          title: "XXXX有限公司",
          column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
        },
        {
          title: "XXXXX有限公司",
          column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
        },
        {
          title: "XXX有限公司",
          column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
        },
        {
          title: "XXXXXX有限公司",
          column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
        }
      ]
    };
  },
  methods: {
    goWinnerList() {
      this.$router.push({path: '/winner_list'})
    }
  }
};
</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>
