<template>
  <ai-list class="Learning">
    <ai-title
      slot="title"
      title="金币流水"
      isShowBottomBorder>
    </ai-title>
    <template slot="content">
      <ai-search-bar>
        <template #left>
          <div class="search-item">
            <label style="width:80px">分类：</label>
            <ai-select :selectList="$dict.getDict('coin_change_type')" :clearable="true" v-model="search.category" @change="search.current =1, getList()"></ai-select>
          </div>
          <div class="search-item">
            <label style="width:80px">类型：</label>
            <ai-select :selectList="$dict.getDict('coin_type')" :clearable="true" v-model="search.type" @change="search.current =1, getList()"></ai-select>
          </div>
        </template>
        <template #right>
          <el-button type="primary" @click="search.current =1, getList()">查询</el-button>
        </template>
      </ai-search-bar>
      <ai-table
        :tableData="tableData"
        :col-configs="colConfigs"
        :total="total"
        :current.sync="search.current"
        :size.sync="search.size"
        style="margin-top: 8px;"
        @getList="getList">
        <el-table-column slot="coin" label="金币" align="left">
          <template slot-scope="scope">
            <div v-if="scope.row.category == '0'" style="color: green">{{ scope.row.coin }}</div>
            <div v-else style="color: red">{{ -scope.row.coin }}</div>
          </template>
        </el-table-column>
      </ai-table>
    </template>
  </ai-list>
</template>

<script>
  export default {
    data () {
      return {
        colConfigs: [
          { prop: 'category', label: '分类', align: 'left',format: v => this.$dict.getLabel('coin_change_type', v), },
          { prop: 'type', label: '类型', align: 'left',format: v => this.$dict.getLabel('coin_type', v), },
          { slot: 'coin', label: '金币', align: 'left' },
          { prop: 'createTime', label: '时间', align: 'center' },
        ],
        tableData: [],
        total: 0,
        search: {
          current: 1,
          size: 10,
          category: '',
          type: ''
        }
      }
    },

    created () {
      this.$dict.load('coin_change_type', 'coin_type');
      this.getList()
    },

    methods: {
      getList () {
          this.$http.post('/api/coinFlow/myPage', null, {
          params: {
            ...this.search
          }
        }).then(res => {
          if (res.code === 0) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
</style>
