<template>
  <div>
    <div class="q-ma-md text-dark" style="font-size:20px">
      客户关系
    </div>
    <div class="row q-gutter-md  q-px-md no-wrap work-con">
      <div >
        <div class="item-shadow return-commission">
          <div class="q-pa-md row no-wrap items-center">
            <div class="col return-commission-title">
              返佣
            </div>
            <div>
              <!-- <el-date-picker v-model="value2" value-format="yyyy-MM" size="small" type="month" style="width:110px"
                placeholder="选择月" class="q-mr-sm">
              </el-date-picker> -->
              <q-btn class="btn_bg" dense flat icon="more_horiz">
                <q-menu auto-close>
                  <q-list dense>
                    <q-item clickable>
                      <q-item-section>
                        <div class="row">
                          <div class="q-mr-xs">
                            <q-icon name="add" size="14"></q-icon>
                          </div>
                          <div>添加名单</div>
                        </div>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </q-btn>
            </div>
          </div>
          <!-- <VueApexCharts width="100%" height="90" :options="chartOptions" :series="series" style="margin-top:90px">
          </VueApexCharts> -->
          <div class="return-commission-Statistics flex wrap content-start">
            <div class="Statistics-block">
              <div class="Statistics-num">
                <span class="Statistics-pre">¥</span>
                {{formatInt(ReturnCommissionData.SttlementMoney)}}{{formatDecimal(ReturnCommissionData.SttlementMoney)}}
              </div>
              <div class="Statistics-label">
                已返佣
              </div>
            </div>
            <div class="Statistics-block">
              <div class="Statistics-num">
                <span class="Statistics-pre">￥</span>
                {{formatInt(ReturnCommissionData.UnSettlementMoney)}}{{formatDecimal(ReturnCommissionData.UnSettlementMoney)}}
              </div>
              <div class="Statistics-label">
                待返佣
              </div>
            </div>
            <div class="Statistics-block">
              <div class="Statistics-num">
                <span class="Statistics-pre">￥</span>
                {{formatInt(ReturnCommissionData.CanCashOutMoney)}}{{formatDecimal(ReturnCommissionData.CanCashOutMoney)}}
              </div>
              <div class="Statistics-label">
                待提现
              </div>
            </div>
            <div class="Statistics-block">
              <div class="Statistics-num">
                <span class="Statistics-pre">￥</span>
               {{formatInt(ReturnCommissionData.CashOutMoney)}}{{formatDecimal(ReturnCommissionData.CashOutMoney)}}
              </div>
              <div class="Statistics-label">
                已提现
              </div>
            </div>
          </div>

        </div>
        <div class="item-shadow q-pa-md adviser">
          <div class="adviser-title">学管/课程顾问</div>
          <div class="adviser-block flex justify-between items-center">
            <div class="left">
              <div class="num">
                0 <span class="after">个</span>
              </div>
              <div class="adviser-name">
                待收款订单
              </div>
            </div>
            <div>
              <q-avatar size="md">
                <img src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg">
              </q-avatar>
            </div>
          </div>
          <div class="adviser-block flex justify-between items-center" style="background-color:#F2FAFF;">
            <div class="left">
              <div class="num">
                0 <span class="after">个</span>
              </div>
              <div class="adviser-name">
                缺勤学员
              </div>
            </div>
            <div>
              <q-avatar size="md">
                <img src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg">
              </q-avatar>
            </div>
          </div>
          <div class="adviser-block flex justify-between items-center" style="background-color:#FFF5F8;">
            <div class="left">
              <div class="num">
                0 <span class="after">个</span>
              </div>
              <div class="adviser-name">
                即将结业学员
              </div>
            </div>
            <div>
              <q-avatar size="md">
                <img src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg">
              </q-avatar>
            </div>
          </div>
        </div>
      </div>

      <Commission style="flex-shrink:1"></Commission>
      <div style="flex-shrink:1">
        <Sell></Sell>
        <Bonus></Bonus>
      </div>
    </div>

  </div>
</template>

<script>
import {
    GetCenterCommissionStatistics
  } from '../../api/work/index'
  import {formatInt,formatDecimal} from '../../utils/formatPrice'
  import VueApexCharts from "vue-apexcharts";
  import Bonus from './bonus'
  import Commission from './commission'
  import Sell from './sell'
  export default {
    components: {
      VueApexCharts,
      Bonus,
      Commission,
      Sell
    },
    data() {
      return {
        value2: "",
        series: [{
          name: "新加名单",
          data: [{
              x: "09-10",
              y: 5
            },
            {
              x: "09-11",
              y: 2
            },
            {
              x: "09-12",
              y: 1
            },
            {
              x: "09-13",
              y: 22
            },
            {
              x: "09-14",
              y: 11
            },
            {
              x: "09-15",
              y: 3
            },
            {
              x: "09-12",
              y: 1
            },
            {
              x: "09-13",
              y: 22
            },
            {
              x: "09-14",
              y: 11
            },
            {
              x: "09-15",
              y: 3
            },
            {
              x: "09-10",
              y: 5
            },
            {
              x: "09-11",
              y: 2
            },
            {
              x: "09-12",
              y: 1
            },
            {
              x: "09-13",
              y: 22
            },
            {
              x: "09-14",
              y: 11
            },
            {
              x: "09-15",
              y: 3
            },
            {
              x: "09-12",
              y: 1
            },
            {
              x: "09-13",
              y: 22
            },
            {
              x: "09-14",
              y: 11
            },
            {
              x: "09-15",
              y: 3
            },
            {
              x: "09-10",
              y: 5
            },
            {
              x: "09-11",
              y: 2
            },
            {
              x: "09-12",
              y: 1
            },
            {
              x: "09-13",
              y: 22
            },
            {
              x: "09-14",
              y: 11
            },
            {
              x: "09-15",
              y: 3
            },
            {
              x: "09-12",
              y: 1
            },
            {
              x: "09-13",
              y: 22
            },
            {
              x: "09-14",
              y: 11
            },
            {
              x: "09-15",
              y: 3
            }
          ]
        }],
        chartOptions: {
          chart: {
            type: "line",
            sparkline: {
              enabled: true
            }
          },
          stroke: {
            width: 2,
            curve: "smooth" //straight,smooth
          },
          fill: {
            type: "solid",
            opacity: [1, 1]
          },
          yaxis: {
            min: 0
          },
          colors: ["#ffb743"],
          title: {
            text: " ",
            offsetX: 0,
            style: {
              fontSize: "36px",
              color: "#000"
            }
          }
        },
        ReturnCommissionData:{
          UnSettlementMoney:0,//待返佣
          SttlementMoney:0,//已返佣
          CashOutMoney:0,//已提现
          CanCashOutMoney:0,//待提现
        }
      };
    },
    mounted() {
      this.getReturnCommission();
    },
    methods:{
      formatInt,
      formatDecimal,
      getReturnCommission(){
        GetCenterCommissionStatistics().then(res=>{
          this.ReturnCommissionData=res.Data
        })
      }
    }
  };

</script>

<style lang="scss" scoped>
  .work-con {
    height: calc(100vh - 250px);
    overflow: scroll;
    box-sizing: border-box;
  }

  .return-commission {
    // width: 330px;
    min-width:200px;
    height: 440px;
    border-radius: 8px;
    background-color: #FA9D0A;
    overflow: hidden;
    position: relative;

    .return-commission-title {
      font-size: 0.93vw;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      white-space:nowrap;
    }

    .btn_bg {
      background-color: rgba(255, 255, 255, 0.15);
      color: #fff;
      border-radius: 0.31vw;
    }

    .return-commission-Statistics {
      width: 100%;
      height: 210px;
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: #fff;
      border-radius: 0.625vw 0.625vw 0 0;
      padding-top: 2vw;

      .Statistics-block {
        min-width:100px;
        width: 50%;
        height: 2.6vw;
        padding-left: 1.3vw;
        margin-bottom: 1vw;

        .Statistics-num {
          font-size: 1vw;
          font-weight: bolder;
          color: #404040;
          display: flex;
          align-items: baseline;

          .Statistics-pre {
            font-weight: 400;
            letter-spacing: 1px;
          }
        }

        .Statistics-label {
          font-family: PingFang SC;
          font-size: 0.72vw;
          color: #999999;
        }
      }
    }

  }

  .adviser {
    // width: 17.18vw;
    min-width:200px;
    height: 520px;
    background-color: #FFFFFF;
    border-radius: 8px;
    margin-top: 20px;

    .adviser-title {
      font-size: 0.41vw;
      line-height: 0.88vw;
      font-family: PingFang SC;
      font-weight: bold;
      color: #111111;
      margin-bottom: 1.82vw;
    }

    .adviser-block {
      width: 16vw;
      min-width:160px;
      height: 6vw;
      min-height:80px;
      background-color: #F8F5FF;
      border-radius: 0.31vw;
      margin: 0 auto 1vw;
      padding: 0 1vw;
     

      .left {
        .num {
          font-size: 1.87vw;
          font-weight: 800;
          line-height:0.78vw;
          color: #404040;
          .after{
            font-size: 0.72vw;
            font-family: PingFang SC;
            font-weight: 400;
            color: #404040;
          }
        }
        .adviser-name{
          font-size: 0.72vw;
          font-family: PingFang SC;
          font-weight: 400;
          color: #404040;
        }
      }
    }
  }

  ::v-deep .el-input,
  ::v-deep .el-input__inner {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
  }

  ::v-deep .el-input__prefix,
  ::v-deep .el-input__suffix {
    color: #fff;
  }

  ::v-deep .el-input__inner::placeholder {
    color: #fff;
    font-size: 12px;
  }

</style>
<style>
.work-con::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.work-con::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 2px;
}
.work-con::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 10px;
}
.work-con::-webkit-scrollbar-thumb:hover {
  background: #999;
}
.work-con::-webkit-scrollbar-corner {
  background: #204754;
}
</style>
