<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-table class="table-box" :data="walletData" stripe style="width: 100%;">
        <el-table-column label="账户类型" prop="walletName"></el-table-column>
        <el-table-column label="账户余额" prop="amount"></el-table-column>
        <el-table-column label="交易记录">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click.native="showFlow(scope.row.walletType,scope.row.walletName)">查看交易记录</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="`${walletName}交易记录`" :visible.sync="dialogFlowVisible" width="80%">
      <div class="leo-filter" v-loading="loading">
        <div :class="`filter-item filter-date-range-picker`">
      <el-date-picker
          v-model="createAt"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
        </div>
        <div :class="`filter-item`">
      <el-select v-model="dealType" placeholder="请选择交易类型">
        <el-option v-for="(item,key) in dealTypes" :label="item" :value="key" :key="key"></el-option>
      </el-select>
        </div>
        <div :class="`filter-item`">
          <el-input v-model="remark" placeholder="备注"></el-input>
        </div>
      <el-button class="filter-item filter-filter-btn" type="primary" @click="handleFilter">筛选</el-button>
      <el-button class="filter-item filter-filter-btn" type="" @click="handleFilterClear">重置</el-button>
      </div>
      <el-table class="table-box" ref="multipleTable" :data="tableData" stripe style="width: 100%;" v-loading="dialogLoading">
        <el-table-column label="交易时间">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.CREATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column label="交易类型">
          <template slot-scope="scope">
            {{scope.row.DEAL_TYPE_NAME}}
          </template>
        </el-table-column>
        <el-table-column label="交易前余额">
          <template slot-scope="scope">
            {{tool.formatPrice(scope.row.TOTAL-scope.row.AMOUNT)}}
          </template>
        </el-table-column>
        <el-table-column label="交易额">
          <template slot-scope="scope">
            <template v-if="scope.row.IS_INCR > 0">
              <el-tag type="danger" size="small" class="no-border"><span class="text-danger">+{{scope.row.AMOUNT}}</span></el-tag>
            </template>
            <template v-else-if="scope.row.IS_INCR == 0">
              <el-tag type="info" size="small" class="no-border">{{scope.row.AMOUNT}}</el-tag>
            </template>
            <template v-else>
              <el-tag type="success" size="small" class="no-border"><span class="text-success">{{scope.row.AMOUNT}}</span></el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="交易后余额">
          <template slot-scope="scope">
            {{tool.formatPrice(scope.row.TOTAL)}}
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="REMARK"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import network from '@/utils/network'
  import tool from '@/utils/tool'
  import Pagination from '@/components/Pagination'

  export default {
    name: 'bonus_index',
    components: {Pagination},
    mounted() {
      this.getData()
    },
    data() {
      return {
        allData: null,
        walletData: null,
        loading: true,
        tableData: null,
        dialogFlowVisible:false,
        currentPage: 1,
        totalPages: 1,
        totalCount: 1,
        pageSize: 20,
        walletType: 'bonus',
        walletName: '',
        dialogLoading: false,
        tool: tool,
        createAt: '',
        dealType: null,
        remark: '',
        dealTypes: [],
      }
    },
    methods: {
      handleCurrentChange(page) {
        this.getFlowData(page, this.pageSize)
      },
      handleSizeChange(pageSize) {
        this.getFlowData(this.currentPage, pageSize)
      },
      getData() {
        let vueObj = this
        vueObj.loading = true
        network.getData('bonus/index').then(response => {
          vueObj.walletData = response.wallet
          vueObj.loading = false
        }).catch(response => {
          vueObj.loading = false
        })
      },
      showFlow(walletType,walletName){
        let vueObj = this
        this.$message({
          message: '正在获取数据',
          type: 'info'
        })
        this.walletType = walletType
        this.walletName = walletName
        vueObj.dialogFlowVisible = true
        vueObj.dialogLoading = true
        this.handleFilterClear()
      },
      handleFilter(){
        this.getFlowData(1, this.pageSize)
      },
      handleFilterClear(){
        this.createAt = ''
        this.dealType = null
        this.remark = ''
        this.getFlowData(1, this.pageSize)
      },
      getFlowData(page, pageSize) {
        let vueObj = this
        network.getPageData(this, 'bonus/wallet-flow', page, pageSize, {walletType: vueObj.walletType,createAt:vueObj.createAt,dealType:vueObj.dealType,remark:vueObj.remark}, function (response) {
          vueObj.allData = response
          vueObj.dealTypes = response.dealTypes
          vueObj.dialogLoading = false
        })
      },

    }
  }

</script>
<style scoped>
  .leo-filter {
    padding: 0 0 15px 0;
  }

  .leo-filter .filter-hidden {
    display: none;
  }

  .filter-item {
    margin-right: 10px;
  }

  @media (min-width: 768px) {
    .leo-filter {
    }

    .leo-filter .filter-item {
      display: inline-block;
      max-width: 200px;
    }

    .leo-filter .filter-item.filter-date-month-picker {
      display: inline-block;
      max-width: 220px;
    }

    .leo-filter .filter-item.filter-date-range-picker {
      display: inline-block;
      max-width: 380px;
    }

    .leo-filter .filter-item.filter-filter-btn {
      height: 38px;
      width: 80px;
    }

    .leo-filter .filter-hidden {
      display: none;
    }
  }
</style>
<style>
  .dialog-footer:after{content: '';
    clear: both;display: table;}
</style>