<template>
  <div class="passbook">
    <div class="row wrap q-gutter-xs q-my-xs">
      <div class="stics">
        <span class="stics-name">累计</span>
        <span>{{ data.SttlementMoney }}</span>
      </div>
      <div class=" stics">
        <span class="stics-name">已提现</span>
        <span style="color: #F72E52">{{ data.CashOutMoney }}</span>
      </div>
      <div class=" stics">
        <span class="stics-name">可提现</span>
        <span style="color:#2961FE;">{{ data.CanCashOutMoney }}</span>
      </div>
      <div class=" stics">
        <span class="stics-name">未结算</span>
        <span>{{ data.UnSettlementMoney }}</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-Status="props">
        <q-td :props="props" style="padding-right: 0px">
          <span v-if="props.row.Status==-1">不返佣</span>
          <span v-if="props.row.Status==0">待返佣</span>
          <span v-if="props.row.Status==1">已返佣到账户</span>
          <span v-if="props.row.Status==2">佣金已提现</span>
        </q-td>
      </template>
      <template v-slot:body-cell-CommissionType="props">
        <q-td :props="props" style="padding-right: 0px">
          <span v-if="props.row.CommissionType==1">返佣</span>
          <span v-if="props.row.CommissionType==2">幸福存折</span>
        </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="2" :Id="Id"></withdraw>
  </div>
</template>
<script>
import {
  getCustomerCommissionPassbook,
  getCustomerCommissionStat,
  GetCustomerBalanceDetailPage
} from "../../../api/sale/peemanagement";
import {
    getCommissionStatistics,
} from '../../../api/finance/index'
import withdraw from './withdraw'
export default {
  components:{
    withdraw
  },
  props: {
    Id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      msg: {
        pageIndex: 1,
        pageSize: 10,
        rowsPerPage: 10,

        BatchId:0,
        SchoolId:'-1',
        Status:'-2',
        OrderSourceType:0,
        OrderSourceId:0,
        Q_SelectNormal:0,
        CommissionType:2,
        ClassId:0,
        OrderId:'',

      },
      pageCount: 0,
      data:{},
      dataList: [],
      columns: [
         {
          name: "SchoolName",
          label: "校区",
          field: "SchoolName",
          align: "left"
        },
        {
          name: "OrderSourceTypeName",
          label: "来源",
          align: "left",
          field: "OrderSourceTypeName"
        },
        {
          name: "UserName",
          label: "人员",
          field: "UserName",
          align: "left"
        },
        {
          name: "ClassNo",
          label: "班号",
          field: "ClassNo",
          align: "left"
        },
        {
          name: "OrderId",
          label: "订单编号",
          field: "OrderId",
          align: "left"
        },
        {
          name: "StuName",
          label: "学生",
          field: "StuName",
          align: "left"
        },
        {
          name: "CommissionType",
          label: "类型",
          field: "CommissionType",
          align: "left"
        },
        {
          name: "CommissionMoeny",
          label: "金额",
          field: "CommissionMoeny",
          align: "left"
        },
        {
          name: "Status",
          label: "状态",
          field: "Status",
          align: "left"
        },
          {
          name: "BatchName",
          label: "期数",
          field: "BatchName",
          align: "left"
        },
        {
          name: "Remark",
          label: "备注",
          field: "Remark",
          align: "left"
        }
      ],
      tabs:1,
    };
  },
  mounted() {
    this.getData();
    this.getList();
  },
  methods: {
    getData() {
      const msg = {
        OrderSourceType:2,
        OrderSourceId: this.Id,
        CommissionType: 2,//  1返佣 2幸福存折
      };
      getCustomerCommissionStat(msg).then(res => {
        this.data=res.Data
      });
    },
    //获取数据
    getList() {
      this.msg.OrderSourceId=this.Id
      this.loading = true;
      getCommissionStatistics(this.msg)
        .then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.dataList = res.Data.PageData.List;
            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>
