<template>
  <div class="score-block">
    <div class="btn-block">
      <SoreBtn v-audio :class="{active: index === 0}" class="btn" style="width: 100px; flex: none;" text="终览" @click="index = 0"/>
      <SoreBtn v-audio :class="{active: index === 1}" class="btn" text="游戏交易" @click="index = 1"/>
      <SoreBtn v-audio :class="{active: index === 2}" class="btn" text="代理人交易" @click="index = 2"/>
      <SoreBtn v-audio :class="{active: index === 3}" class="btn" text="活动与奖励" @click="index = 3"/>
    </div>
    <div class="header">
      <div class="date">日期</div>
      <div class="start">开始余额</div>
      <div class="change">转账额</div>
      <div class="end">结束金额</div>
      <div class="remark">备注</div>
    </div>
    <div
      v-loading="loading"
      element-loading-background="#00293785"
      element-loading-spinner="el-icon-loading"
      class="table">
      <ScoreRow v-for="(item, index) in list" :key="index" :data="item" :index="index"/>
    </div>
  </div>
</template>

<script>
import SoreBtn from './score-log-btn'
import ScoreRow from './score-data-row'
export default {
  components: {
    SoreBtn,
    ScoreRow,
  },
  data() {
    return {
      index: 0,
      list: [], // 消息列表
      loading: false,
    }
  },
  watch: {
    index() {
      this.network().getData(this.index)
    },
  },
  created() {
    this.network().getData(this.index)
  },
  methods: {
    network() {
      return {
        getData: (type) => {
          const params = {}
          if (type) {
            params.filterType = type
          }
          this.list = []
          this.loading = true
          this.$request({
            url: '/api/player/user/creditTransferLog',
            method: 'get',
            params,
          }).then(({ rows }) => {
            this.list = rows
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        },
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.score-block {
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 100%;
  .btn-block {
    display: flex;
    position: relative;
    z-index: 100;
    flex: 1;
    gap: 4px;
    flex: none;
    .btn {
      flex: 1;
      &.active {
        border-color: #25f4e3;
      }
    }
  }
  .header {
    display: flex;
    text-align: center;
    background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/%E7%9F%A9%E5%BD%A2%202.png);
    background-size: 100% 100%;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    color: #102829;
    font-weight: bold;
    margin-top: 4px;
    .date {
      width: 180px;
    }
    .start {
      width: 160px;
    }
    .change {
      width: 160px;
    }
    .end {
      width: 160px;
    }
    .remark {
      width: 160px;
    }
  }
  .table {
    flex: 1;
    overflow: auto;
  }
}

</style>
