<template>
  <div class="passbook">
    <div class="row wrap q-gutter-xs q-my-xs ">
      <div class="stics">
        <span class="stics-name">累计</span>
        <span>{{ data.TotalMoney }}</span>
      </div>
      <div class=" stics">
        <span class="stics-name">已提现</span>
        <span style="color: #F72E52">{{ data.RemitMoney }}</span>
      </div>
      <div class=" stics">
        <span class="stics-name">可提现</span>
        <span style="color:#2961FE;">{{ data.SurplusMoney }}</span>
      </div>
      <div class=" stics">
        <span class="stics-name">未结算</span>
        <span>{{ data.NotSettlementMoney }}</span>
      </div>
    </div>
    <q-tabs
      v-model="tabs"
      active-color="primary"
      align="left"
      style="width:180px;"
      class="q-my-xs"
    >
      <q-tab :name="1" label="返佣明细" />
      <q-tab :name="2" label="提现记录" />
    </q-tabs>
    <q-table
      :pagination="msg"
      :loading="loading"
      no-data-label="暂无相关数据"
      flat
      class="sticky-column-table"
      separator="none"
      :data="dataList"
      :columns="columns"
      row-key="name"
      v-if="tabs==1"
    >
      <template v-slot:body-cell-ClassName="props">
        <q-td :props="props" style="padding-right: 0px">
          {{ props.row.ClassName }} 【{{ props.row.ClassNo }}】
        </q-td>
      </template>
      <template v-slot:bottom>
        <q-pagination
          class="full-width justify-end"
          v-model="msg.pageIndex"
          color="primary"
          :max="pageCount"
          :input="true"
          @input="changePage"
        />
      </template>
    </q-table>
     <withdraw  v-if="tabs==2" :Type="1" :Id="Id"></withdraw>
  </div>
</template>
<script>
import {
  getCustomerCommissionPassbook,
  GetCustomerBalanceDetailPage
} from "../../../api/sale/peemanagement";
import withdraw from './withdraw'
export default {
  components:{
    withdraw
  },
  props: {
    Id: {
      //1返佣 2幸福存折
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      msg: {
        CustomerId: 0,
        pageIndex: 1,
        pageSize: 10,
        rowsPerPage: 10,
        RebateType: 1,
        Description: ""
      },
      pageCount: 0,
      data: {},
      dataList: [],
      columns: [
        {
          name: "BalanceTypeStr",
          label: "类型",
          field: "BalanceTypeStr",
          align: "left"
        },
        {
          name: "Money",
          label: "变更金额",
          align: "left",
          field: "Money"
        },
        {
          name: "Description",
          label: "变更详情",
          field: "Description",
          align: "left"
        },
        {
          name: "ClassName",
          label: "班级信息",
          field: "ClassName",
          align: "left"
        },
        {
          name: "OrderId",
          label: "订单编号",
          field: "OrderId",
          align: "left"
        },
        {
          name: "PeopleNum",
          label: "订单人数",
          field: "PeopleNum",
          align: "left"
        },
        {
          name: "BalanceStateStr",
          label: "返佣",
          field: "BalanceStateStr",
          align: "left"
        },
        {
          name: "RemitStr",
          label: "提现",
          field: "RemitStr",
          align: "left"
        },
        {
          name: "UpdateTimeStr",
          label: "更新时间",
          field: "UpdateTimeStr",
          align: "left"
        }
      ],
      tabs:1
    };
  },
  mounted() {
    this.getData();
    this.getList();
  },
  methods: {
    getData() {
      const msg = {
        CustomerId: this.Id,
        Type: 1,
      };
      getCustomerCommissionPassbook(msg).then(res => {
        this.data = res.Data;
      });
    },
    //获取数据
    getList() {
      this.msg.CustomerId=this.Id
      this.loading = true;
      GetCustomerBalanceDetailPage(this.msg)
        .then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.pageCount = res.Data.PageCount;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    changePage(val) {
      this.msg.pageIndex = val;
      this.getList();
    }
  }
};
</script>
<style>
.passbook ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.passbook ::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 2px;
}
.passbook ::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 10px;
}
.passbook ::-webkit-scrollbar-thumb:hover {
  background: #999;
}
.passbook ::-webkit-scrollbar-corner {
  background: #204754;
}
.passbook .stics {
  padding: 5px 10px;
  background: #dddee0;
  border-radius: 4px;
  font-size: 14px;
  color: #000000;
  font-weight: bold;
  white-space: nowrap;
}
.passbook .stics-name {
  color: #2d2d2d;
  font-weight: 600;
  margin-right: 10px;
}
</style>
