<template>
  <div class="app-container home" style="align-content: center">
    <el-row :gutter="20">
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <div class="k-title">用户剩余金币</div>
          <div class="k-content">{{ undefined!=dataMap["userCount"]?dataMap["userCount"]["coin"]:0.00 }}</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <div class="k-title">用户剩余余额</div>
          <div class="k-content">{{ undefined!=dataMap["userCount"]?dataMap["userCount"]["diamondCoin"]:0.00 }}</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <div class="grid-content bg-purple">
            <div class="k-title">充值总额</div>
            <div class="k-content">{{ undefined!=dataMap["rechargeCount"]?dataMap["rechargeCount"]["diamondCoinSum"]:0.00 }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <div class="grid-content bg-purple">
            <div class="k-title">总兑换余额</div>
            <div class="k-content">{{ undefined!=dataMap["exchangeCount"]?dataMap["exchangeCount"]["diamondCoinSum"]:0.00 }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <div class="grid-content bg-purple">
            <div class="k-title">总兑换金币</div>
            <div class="k-content">{{ undefined!=dataMap["exchangeCount"]?dataMap["exchangeCount"]["coinSum"]:0.00 }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <div class="grid-content bg-purple">
            <div class="k-title">玩家游戏金币消耗</div>
            <div class="k-content">{{ undefined!=dataMap["bettingAmountSum"]?dataMap["bettingAmountSum"]["coinSum"]:0.00 }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <div class="grid-content bg-purple">
            <div class="k-title">玩家游戏余额消耗</div>
            <div class="k-content">{{ undefined!=dataMap["bettingAmountSum"]?dataMap["bettingAmountSum"]["diamondCoinSum"]:0.00 }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div style="    font-size: 14px;color: #606266">
      <el-radio v-model="dateRadio" label="1">昨日</el-radio>
      <el-radio v-model="dateRadio" label="2">今日</el-radio>
      <el-radio v-model="dateRadio" label="3">本周</el-radio>
      <el-radio v-model="dateRadio" label="4">上周</el-radio>
      <el-radio v-model="dateRadio" label="5">最近七天</el-radio>
      <el-radio v-model="dateRadio" label="6">本月</el-radio>
      <el-radio v-model="dateRadio" label="7">上月</el-radio>
      <span style="padding-right: 10px">日期查询</span>
      <el-date-picker
        v-model="daterange"
        style="width: 240px"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="dateChage"
      ></el-date-picker>
      <span style="padding-left: 20px">
        <el-button type="primary" round @click="search">查询</el-button>
      </span>
    </div>
    <div style="padding-top: 1rem">
      <el-row>
        <el-col :span="25" class="card-box">
          <el-card>
            <div slot="header"><span></span></div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 70rem;border-bottom: 1px solid black">
                <thead>
                <tr>
                  <th class="el-table__cell is-leaf"><div class="cell"></div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">线上充值总额</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">vip充值总额</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">充值总额</div></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td class="el-table__cell is-leaf" rowspan="2"><div class="cell">充值总额</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">支付宝：{{getVal(getCharge('1'),0)}}</div></td>
                  <td class="el-table__cell is-leaf" rowspan="2"><div class="cell">充值：{{getVal(getCharge('4'),1)}}</div></td>
                  <td class="el-table__cell is-leaf" rowspan="2"><div class="cell">总额：{{getTotal()}}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell" >微信：{{getVal(getCharge('1'),0)}}</div></td>
<!--                  <td class="el-table__cell is-leaf"><div class="cell" >微信</div></td>-->
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf" rowspan="3"><div class="cell">提现总额</div></td>
                  <td class="el-table__cell is-leaf" colspan="2"><div class="cell">支付宝：{{getCash("1")}}</div></td>
                  <td class="el-table__cell is-leaf" rowspan="3"><div class="cell">总额：{{getCash(null)}}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf" colspan="2"><div class="cell" >微信：{{getCash("2")}}</div></td>
<!--                  <td class="el-table__cell is-leaf"><div class="cell" >微信</div></td>-->
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf" colspan="2"><div class="cell" >银行卡：{{getCash("3")}}</div></td>
<!--                  <td class="el-table__cell is-leaf"><div class="cell" >银行卡</div></td>-->
                </tr>
                </tbody>
              </table>

              <table cellspacing="0" style="width: 70rem;border-bottom: 1px solid black">
                <thead>
                <tr>
<!--                  <th class="el-table__cell is-leaf" rowspan="2"><div class="cell">游戏投注</div></th>-->
                  <th class="el-table__cell is-leaf"><div class="cell">金币投注</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">余额投注</div></th>
<!--                  <th class="el-table__cell is-leaf"><div class="cell"></div></th>-->
                </tr>
                </thead>
                <tbody>
                <tr>
<!--                  <td class="el-table__cell is-leaf" rowspan="2"><div class="cell">游戏投注</div></td>-->
                  <td class="el-table__cell is-leaf"><div class="cell">{{ undefined!=dataMap["bettingAmountDateSum"]?dataMap["bettingAmountDateSum"]["coinSum"]:0.00 }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">{{undefined!=dataMap["bettingAmountDateSum"]?dataMap["bettingAmountDateSum"]["diamondCoinSum"]:0.00}}</div></td>
<!--                  <td class="el-table__cell is-leaf"><div class="cell" ></div></td>-->
                </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { indexStatics } from "@/api/business/user";
import { parseTime } from "@/utils/ruoyi.js"
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      dateRadio: "2",
      queryParams:{},
      daterange:[],
      daterange2:[],
      dataMap:{}
    };
  },
  created() {
    // console.log(parseTime())
    this.search();
  },
  methods: {
    dateChage(val){
      if(undefined == this.daterange || null == this.daterange){
        this.dateRadio = "2";
      }else{
        this.dateRadio = null;
      }
    },
    search(){
      let radio = "2";
      let that = this;
      that.queryParams = {};
      if(!that.dataRadio){
        radio = that.dateRadio;
      }
      if(this.daterange == undefined || this.daterange == null || this.daterange.length < 1){
        let curDate = new Date();
        if("1" == radio){
          curDate = curDate.setDate(curDate.getDate()-1);
          that.setQueryParam(curDate,curDate);
        }else if("2" == radio){
          that.setQueryParam(curDate,curDate);
        }else if("3" == radio){
          // 获取当前日期是本周的第几天（0代表周日，1代表周一，...，6代表周六）
          const dayOfWeek = curDate.getDay();
          // 获取当前日期距离本周第一天的天数差（负数代表本周之前的天数，正数或零代表本周之后的天数）
          const diffToFirstDay = dayOfWeek > 0 ? -(dayOfWeek - 1) : -6;
          // 获取本周第一天的日期对象
          const firstDayOfWeek = new Date(curDate);
          firstDayOfWeek.setDate(curDate.getDate() + diffToFirstDay);
          // 获取本周最后一天的日期对象
          const lastDayOfWeek = new Date(curDate);
          lastDayOfWeek.setDate(firstDayOfWeek.getDate() + 6);
          that.setQueryParam(firstDayOfWeek,lastDayOfWeek);
        }else if("4" == radio){
          // 获取当前日期是本周的第几天（0代表周日，1代表周一，...，6代表周六）
          const date = curDate.setDate(curDate.getDate()-6);
          let dayOfWeek = new Date(date).getDay();
          // 获取当前日期距离本周第一天的天数差（负数代表本周之前的天数，正数或零代表本周之后的天数）
          const diffToFirstDay = dayOfWeek > 0 ? -(dayOfWeek - 1) : -6;
          // 获取本周第一天的日期对象
          const firstDayOfWeek = new Date(curDate);
          firstDayOfWeek.setDate(curDate.getDate() + diffToFirstDay);
          // 获取本周最后一天的日期对象
          const lastDayOfWeek = new Date(curDate);
          lastDayOfWeek.setDate(firstDayOfWeek.getDate() + 6);
          that.setQueryParam(firstDayOfWeek,lastDayOfWeek);
        }else if("5" == radio){
          const dayOfWeek = new Date().setDate(new Date().getDate()-6);
          that.setQueryParam(dayOfWeek,curDate);
        }else if("6" == radio){
          // 获取本月开始时间
          var startOfMonth = new Date();
          startOfMonth.setDate(1);
          startOfMonth.setHours(0, 0, 0, 0);

          // 获取本月结束时间
          var endOfMonth = new Date();
          endOfMonth.setMonth(endOfMonth.getMonth() + 1, 0);
          endOfMonth.setHours(23, 59, 59, 999);
          that.setQueryParam(startOfMonth,endOfMonth);
        }else if("7" == radio){
          // 获取本月开始时间
          var startOfMonth = new Date(curDate.setMonth(curDate.getMonth()-1));
          startOfMonth.setDate(1);
          startOfMonth.setHours(0, 0, 0, 0);

          // 获取本月结束时间
          var endOfMonth = curDate;
          endOfMonth.setMonth(endOfMonth.getMonth() + 1, 0);
          endOfMonth.setHours(23, 59, 59, 999);
          that.setQueryParam(startOfMonth,endOfMonth);
        }
      }else{
        that.queryParams["beginTime"] = this.daterange[0];
        that.queryParams["endTime"] = this.daterange[1];
      }

      indexStatics(this.queryParams).then(response => {
        that.dataMap = response.data;
      });
    },
    setQueryParam(beginDate,endDate){
      let that = this;
      that.queryParams["beginTime"] = parseTime(beginDate,"{y}-{m}-{d}");
      that.queryParams["endTime"] = parseTime(endDate,"{y}-{m}-{d}");
    },
    getCharge(type){
      let dataMap = this.dataMap;
      let res = {};
      for(var i in dataMap["rechargeByDateSum"]){
        var item = dataMap["rechargeByDateSum"][i];
        if(item["type"] == type){
          res = item;
          break;
        }
      }
      return res;
    },
    getVal(val,type){
      //type 3 统计线上+线下
      let diamondCoin = 0.00;
      let platformService = 0.00;
      if(type == 0 || type == 3) {
        //线上
        if (val["diamondCoinUpSum"] != undefined) {
          diamondCoin += val["diamondCoinUpSum"];
        }
        if(val["platformServiceDiamondCoinUpSum"] != undefined){
          platformService += val["platformServiceDiamondCoinUpSum"];
        }
      }
      if(type == 1 || type == 3){
        //线下
        if (val["diamondCoinDownSum"] != undefined) {
          diamondCoin += val["diamondCoinDownSum"];
        }
        if(val["platformServiceDiamondCoinDownSum"] != undefined){
          platformService += val["platformServiceDiamondCoinDownSum"];
        }
      }
      return diamondCoin + " （包含手续费" + platformService + "）";
    },
    getTotal(){
      //支付宝
      let ali = this.getCharge("1");
      //微信
      let wexin = this.getCharge("2");
      //线下
      let down = this.getCharge("4");
      let total = 0;
      let totalService = 0;
      if (down["diamondCoinDownSum"] != undefined) {
        total += down["diamondCoinDownSum"];
      }
      if(down["platformServiceDiamondCoinDownSum"] != undefined){
        totalService += down["platformServiceDiamondCoinDownSum"];
      }

      if (ali["diamondCoinUpSum"] != undefined) {
        total += ali["diamondCoinUpSum"];
      }
      if(ali["platformServiceDiamondCoinUpSum"] != undefined){
        totalService += ali["platformServiceDiamondCoinUpSum"];
      }

      if (wexin["diamondCoinUpSum"] != undefined) {
        total += wexin["diamondCoinUpSum"];
      }
      if(wexin["platformServiceDiamondCoinUpSum"] != undefined){
        totalService += wexin["platformServiceDiamondCoinUpSum"];
      }

      return total + " (包含手续费："+totalService+")"

    },
    getCash(type){
      let amount = 0;
      let serviceAmount = 0;
      for(var i in this.dataMap["withdrawByDateSum"]){
        let item  = this.dataMap["withdrawByDateSum"][i];
        if(type != null) {
          if (item["type"] == type) {
            amount += item["moneySum"];
            serviceAmount += item["platformServiceSum"];
          }
        }else{
          amount += item["moneySum"];
          serviceAmount += item["platformServiceSum"];
        }
      }
      return amount + " （包含手续费"+serviceAmount+"）";
    }
  }
};
</script>

<style>
table {
  width: 50%;
}

.k-title{
  font-size: 14px;
  text-align: center;
  /* margin-top: -85px; */
  color: white;
  line-height: 2rem;
  background-color: #4079c4;
}
.k-content{
  color: black;
  text-align: center;
  line-height: 5rem;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #eef5fd;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 100px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

