<template>
  <!-- 我的积分 -->
  <el-card>
    <div class="myCredits">
      <div class="creditsDiv" v-for="(item, index) in listData" :key="index">
        <div class="credits-list">
          <div class="left">
            <div>
              <span style="font-size: 12px; color: #8083a3">{{
                item.jl_datetime
              }}</span>
            </div>
            <div style="font-weight: 600; margin-top: 20px">
              {{ item.jl_name }}
            </div>
          </div>
          <div class="right">+{{ item.jl_score }}分</div>
        </div>
        <el-divider border-style="dashed" />
      </div>
      <div class="footer">
        <div
          style="
            width: 1400px;
            height: 50px;
            position: relative;
            margin: 0 auto;
          "
        >
          <el-pagination
            background
            layout="total,prev, pager, next"
            :total="total"
            style="position: absolute; top: 0; right: 0"
            @current-change="handleCurrentChange"
            :page-size="limit"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import { jsjf_list } from "./api";
export default {
  data() {
    return {
      listData: [],
      limit: 10,
      total: 0,
      cur_page: 1,
    };
  },
  methods: {
    getListData() {
      let data = {
        page: this.cur_page,
        limit: this.limit,
        keyword: this.keyword,
      };

      jsjf_list(data).then((res) => {
        this.listData = res.data.page_data;
        this.cur_page = Number(res.data.page_now);
        this.total = Number(res.data.total_rows);
      });
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.listData();
    },
  },
  mounted() {
    this.getListData();
  },
};
</script>

<style lang="scss" scoped>
.myCredits {
  padding: 20px;
  .creditsDiv {
    .credits-list {
      padding: 0 30px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      font-size: 14px;
      .left {
      }
      .right {
        color: #00a3ff;
        margin-right: 100px;
      }
    }
    .el-divider--horizontal {
      margin: 15px 0;
    }
  }
}
.footer {
  width: 100%;
  height: 50px;
  margin-top: 100px;
  display: inline-block;
}
</style>