<template>
  <div class="app-container">
    <!--卡片-->
    <el-row :gutter="16" class="card-second-top">
      <el-col :span="12">
        <el-card class="box-card">
          <el-row :gutter="24">
            <el-col :span="8" style="text-align: center">
              <svg-icon icon-class="recharge" class="svg-icon" style="width: 48px;height: 48px" />
            </el-col>
            <el-col :span="12" :offset="4">
              <el-row :gutter="16"><el-col :span="24">充值账户(元)</el-col></el-row>
              <el-row :gutter="16" class="common-color font-size24" style="margin-top: 4px"><el-col :span="24">240.0</el-col></el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <el-row :gutter="24">
            <el-col :span="8" style="text-align: center">
              <svg-icon icon-class="give" style="width: 48px;height: 48px" />
            </el-col>
            <el-col :span="12" :offset="4">
              <el-row :gutter="16"><el-col :span="24">赠送账户(元)</el-col></el-row>
              <el-row :gutter="16" class="common-color font-size24" style="margin-top: 4px"><el-col :span="24">140.0</el-col></el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!--账户明细 sta-->
    <el-card shadow="always" class="card-second-top margin-top-24">
      <el-tabs :tab-position="tabPosition" >
        <el-tab-pane label="充值记录">
          <el-table
            :data="paytableData"
            style="width: 100%;"
            :show-overflow-tooltip="true">
            <el-table-column
              prop="parkName"
              label="账户类型"
              :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
              prop="license"
              label="充值金额"
              :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
              prop="money"
              label="充值后余额">
            </el-table-column>
            <el-table-column
              prop="inTime"
              label="充值时间"
              :show-overflow-tooltip="true">
            </el-table-column>
          </el-table>
          <el-pagination
            :page-size="10"
            :pager-count="11"
            layout="prev, pager, next"
            :total="total">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="支出记录">
          <el-table
            :data="outtableData"
            style="width: 100%;"
            :show-overflow-tooltip="true">
            <el-table-column
              prop="parkName"
              label="账户类型"
              :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
              prop="license"
              label="交易金额"
              :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
              prop="money"
              label="交易后余额">
            </el-table-column>
            <el-table-column
              prop="outtype"
              label="交易类型">
            </el-table-column>
            <el-table-column
              prop="inTime"
              label="交易时间"
              :show-overflow-tooltip="true">
            </el-table-column>
          </el-table>
          <el-pagination
            :page-size="10"
            :pager-count="21"
            layout="prev, pager, next"
            :total="total">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>

    </el-card>
  </div>
</template>

<script>
// import { getList } from '@/api/table'
import pagination from '@/components/Pagination/index.vue';
import LoadingBar from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style

export default {
  components:{
    'i-pagination': pagination
  },
  filters: {

  },
  data() {
    return {
      list: null,
      tabPosition:'top',
      listLoading: true,
      btnLoading:false,
      loading:false,
      paytableData: [
        {
          parkName: '个人账户',
          license: '21',
          money: '31',
          inTime: '2019-06-02 09:00:00',
        },
        {
          parkName: '个人账户',
          license: '10',
          money: '31',
          inTime: '2019-06-02 00:23:00',
        },
        {
          parkName: '个人账户',
          license: '21',
          money: '31',
          inTime: '2019-06-02 09:00:00',
        },
        {
          parkName: '个人账户',
          license: '10',
          money: '31',
          inTime: '2019-06-02 00:23:00',
        },{
          parkName: '个人账户',
          license: '10',
          money: '31',
          inTime: '2019-06-02 00:23:00',
        },
      ],
      outtableData: [
        {
          parkName: '个人账户',
          license: '21',
          money: '31',
          outtype: '停车支付',
          inTime: '2019-06-02 09:00:00',
        },
        {
          parkName: '个人账户',
          license: '10',
          money: '31',
          outtype: '停车支付',
          inTime: '2019-06-02 00:23:00',
        },
        {
          parkName: '个人账户',
          license: '21',
          money: '31',
          outtype: '停车支付',
          inTime: '2019-06-02 09:00:00',
        },
        {
          parkName: '个人账户',
          license: '10',
          money: '31',
          outtype: '停车支付',
          inTime: '2019-06-02 00:23:00',
        },
      ],
      /** 分页*/
      total: 32,
      currentPage: 1,
      pageSize: 10,
    }
  },
  computed: {
  },
  created() {

  },
  mounted:function () {
  },
  methods: {
    queryBtn:function () {
      LoadingBar.start();
      this.btnLoading=true;
      this.loading = true;

    },
    /**获取子组件页码方法*/
    handleSizeChange: function(pages) {
      this.currentPage = pages.page;
      this.pageSize = pages.limit;
      /** 调用表格数据.*/
      this.queryBtn();
    },

  }
}
</script>
<style lang="scss" scoped >
  .serch-wrap{
    background-color: #FFF;
    padding: 15px;
  }
  .el-card__header{
    padding:10px 20px!important;;
  }
</style>
