<template>
  <div class="page_card">
    <div class="winner_list">
      <div class="list">
        <table class="lw_table">
          <tbody>
          <tr v-for="(row, idx) in leftDatas" :key="idx" :style="{height: 100 / leftDatas.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" :style="col.valStyle">
                {{ colFormatter['' + idz] ? colFormatter['' + idz](col.value) : col.value }}</p>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="list middle"></div>
      <div class="list">
        <table class="lw_table">
          <tbody>
          <tr v-for="(row, idx) in rightDatas" :key="idx" :style="{height: 100 / rightDatas.length + '%'}">
            <td v-if="showIcon">
              <div class="col_number">{{ idx + (pageSize/2) +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" :style="col.valStyle">
                {{ colFormatter['' + idz] ? colFormatter['' + idz](col.value) : col.value }}</p>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: "pagingList",
  props: {
    pageSize: {
      type: Number,
      default: 40
    },
    showIcon: {
      type: Boolean,
      default: true
    },
    columnsStyle: {
      type: Object,
      default: function () {
        return {};
      }
    },
    leftDatas: {
      type: Array,
      default: function () {
        return [
          {title: '标题列', column: [{key: '字段', value: '0'}]},
          {title: '标题列', column: [{key: '字段', value: '0'}]},
          {title: '标题列', column: [{key: '字段', value: '0'}]}
        ];
      }
    },
    rightDatas: {
      type: Array,
      default: function () {
        return [
          {title: '标题列', column: [{key: '字段', value: '0'}]},
          {title: '标题列', column: [{key: '字段', value: '0'}]},
          {title: '标题列', column: [{key: '字段', value: '0'}]}
        ];
      }
    },
    colFormatter: {
      type: Object,
      default: function () {
        return {};
      }
    }
  }
};
</script>
<style scoped>

.page_card {
  height: 95%;
}

.winner_list {
  text-align: center;
}

.page_card::-webkit-scrollbar {
  width: 0 !important
}

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

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

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

td {
  padding: 0 0 0 1rem;
}

.col_number {
  height: 10px;
  color: #19EBFF;
  font-weight: bold;
  text-align: center;
  line-height: 10px;
//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;
}


.list {
  display: inline-grid;
  width: 35%;
}

.middle {
  width: 15%;
}

.bottom {

}
</style>
