<template>
  <div>
    <el-row>
      <el-col class="TT-header">
        <p>
          <span class="TT-label">您拥有金币：</span>
          <span class="TT-value">{{ userInfo.userBalance }}</span>
        </p>
      </el-col>
    </el-row>
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-select v-model="dataForm.key" placeholder="请选择流水类型">
          <el-option :label="item.label"
                     :value="item.value"
                     v-for="item in selectOption"
                     :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="sizeChangeHandle(pageSize)">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%">
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        width="100"
        label="流水号">
      </el-table-column>
      <el-table-column
        prop="logType"
        header-align="center"
        align="center"
        width="160"
        label="流水类型">
        <template slot-scope="scope">
          <span>{{ selectOption[scope.row.logType].label }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="logBalance"
        header-align="center"
        align="center"
        width="160"
        label="流水金额">
      </el-table-column>
      <el-table-column
        prop="createdAt"
        header-align="center"
        align="center"
        width="200"
        :show-overflow-tooltip="true"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="logRemark"
        header-align="center"
        align="center"
        :show-overflow-tooltip="true"
        label="流水备注">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'pay-wallet',
  data () {
    return {
      dataForm: {
        key: '0'
      },
      selectOption: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      selectionDataList: [],
      userInfo: {}
    }
  },
  activated () {
    if (!this.$route.meta.isUseCache) {
      this.dataForm = {
        key: '0'
      }
      this.selectOption = [
        {
          label: '消费',
          value: '0'
        },
        {
          label: '充值',
          value: '1'
        },
        {
          label: '奖励',
          value: '2'
        },
        {
          label: '所有类型',
          value: '3'
        }
      ]
      this.dataList = []
      this.pageIndex = 1
      this.pageSize = 10
      this.totalPage = 0
      this.dataListLoading = false
      this.selectionDataList = []
      this.userInfo = {}
      this.getDataList()
    }
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/user/balancelog'),
        method: 'POST',
        data: this.$http.adornData({
          'page': this.pageIndex,
          'pageSize': this.pageSize,
          'logType': this.dataForm.key
        })
      }).then(({ data }) => {
        if (data.status) {
          const { total, list, userInfo } = data.data
          this.dataList = list
          this.totalPage = total
          this.userInfo = userInfo
          this.$route.meta.isUseCache = true
        } else {
          this.$message.error(data.msg)
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    }
  }
}
</script>

<style lang="scss" scoped>
.TT-header {
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;

  h3 {
    margin-bottom: 10px;
  }
}
</style>
