<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="1" :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: {
        //1返佣 2幸福存折
        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: 1,
          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,
          CategoryId: this.Id,
          CommissionType: 1,
        };
        getCustomerCommissionStat(msg).then(res => {
          this.data = res.Data;
        });
      },
      //获取数据
      getList() {
        this.msg.CategoryId = 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>