<template>
  <div class="Box">
    
    <div class="back-box">
      <van-icon
        class="back-icon"
        @click="goBack"
        size=".6rem"
        name="arrow-left"
        color="#fff"
      />
      <span>会员核销</span>
    </div>
    
    <div class="topbox">
      <div class="title">今日收款总额(元)</div>
      <div class="num">{{(sum_real_payment1+sum_real_payment2+sum_real_payment3)/100}}</div>
      <div class="piece">{{`${list.length} 笔`}}</div>
      <div class="intOne">
        <div class="left">
          <div class="text1">已到账(元)</div>
          <div class="text" style="color: #fff; font-weight: bold">{{(sum_real_payment2+sum_real_payment3)/100}}</div>
        </div>
        <div class="right">
          <div class="text1">未到账(元)</div>
          <div class="text" style="color: #fff; font-weight: bold">{{sum_real_payment1/100}}</div>
        </div>
      </div>
    </div>
    <div class="clearfix">
      <div class="clearfix_left">{{setTiem(new Date().getTime(),"YYYY-MM-DD")}}</div>
      <div class="clearfix_right" @click="goCurrent">按日期查询</div>
    </div>
    <div class="contents" v-for="(item,index) in list" :key="index">
      <div class="contents_left">
        <div class="customer">{{item.onickName}}</div>
        <div>{{setTiem(item.createDate,"YYYY-MM-DD HH:mm:ss")}}</div>
        </div>
      <div class="contents_right">
        <div style="color: #000; line-height: 1rem;text-align: right;">{{`￥${item.deductionAmount/100}`}}</div>
        <div>{{`实收 ￥${item.realPayment/100}`}}</div>
      </div>
    </div>
    <div class="noData">暂无数据</div>
  </div>
</template>
<script>
import Vue from "vue";
import moment from "moment";
import { Toast } from "vant";
import{ mapState} from "vuex";
export default {
  
  data() {
    return {
      pageNum:1,
      pageSize:10,
      list:[],
      sum_real_payment1: 0,
      sum_real_payment2: 0,
      sum_real_payment3:0,
    }
  },
  computed: {
    ...mapState(['merchant_id'])
  },
  methods: {
    goBack() {
        this.$router.go(-1)
        },
    goCurrent() {
      this.$router.push("/current");
    },
    //查询消费卡扫码记录列表
    getCardPay() {
      Toast.loading({
          message: "加载中...",
          duration: 0, // 持续展示 toast
          forbidClick: true,
          forbidClick: true,
        });
      this.$http.cardPayList({
        methods: "get",
        params: {
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          startdate:  moment(new Date().getTime()).format("YYYY-MM-DD")+' 00:00:00',
          enddate:  moment(new Date().getTime()).format("YYYY-MM-DD")+' 23:59:59',
        },
      }).then(res=>{
        const {code,message,data} = res
        if(code ==200){
           Toast.clear();
          this.list = data.list
        }else{
           Toast.clear();
           Toast(message);
        }
      }).catch(res=>{
         Toast.clear();
         Toast(res);
      })
    },
    
    payMum1(){
      this.$http.payMum({
        methods: "get",
        params:{
          merchantId: this.merchant_id,
          startdate:  moment(new Date().getTime()).format("YYYY-MM-DD")+' 00:00:00',
          enddate: moment(new Date().getTime()).format("YYYY-MM-DD")+' 23:59:59',
          payStatus:0
        }
      }).then(res=>{
        const{code , data,message}=res
        if(code==200){
          this.sum_real_payment1= Number(data.length!=0?res.data[0].sum_real_payment:0)
        }else{
          Toast(message);
        }
      })
    },
    payMum2(){
      this.$http.payMum({
        methods: "get",
        params:{
          merchantId: this.merchant_id,
          startdate:  moment(new Date().getTime()).format("YYYY-MM-DD")+' 00:00:00',
          enddate: moment(new Date().getTime()).format("YYYY-MM-DD")+' 23:59:59',
          payStatus:1
        }
      }).then(res=>{
        const{code , data,message}=res
        if(code==200){
          this.sum_real_payment2= Number(data.length!=0?res.data[0].sum_real_payment:0)
        }else{
          Toast(message);
        }
      })
    },
    payMum3(){
      this.$http.payMum({
        methods: "get",
        params:{
          merchantId: this.merchant_id,
          startdate:  moment(new Date().getTime()).format("YYYY-MM-DD")+' 00:00:00',
          enddate: moment(new Date().getTime()).format("YYYY-MM-DD")+' 23:59:59',
          payStatus:2
        }
      }).then(res=>{
        const{code , data,message}=res
        if(code==200){
          this.sum_real_payment3= Number(data.length!=0?res.data[0].sum_real_payment:0)
        }else{
          Toast(message);
        }
      })
    },
    //时间处理
    setTiem(temp,format){//第一个参数是时间戳  第二个参数是格式 参考momentJS
      return moment(Number(temp)).format(format)
    }
  },
  mounted() {
    this.getCardPay();
    this.payMum1();
    this.payMum2();
    this.payMum3();
  },
};
</script>

<style  scoped>
.Box {
  height: 100%;
  overflow: hidden;
  font-size: 0.42rem;
}
.back-box {
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 1.3rem;
  line-height: 1.3rem;
  background: #52a0fd;
  color: #fff;
  font-size: 0.43rem;
  text-align: center;
}
.back-icon {
  float: left;
  margin: 0.4rem 0 0 0.1rem;
}
.topbox {
  background-color: #52a0fd;
  color: rgba(255, 255, 255, 1);
}
.title {
  text-align: center;
  line-height: 1rem;
}
.num {
  font-size: 0.86rem;
  text-align: center;
  line-height: 2rem;
}
.piece {
  border-bottom: 0.01rem solid rgba(255, 255, 255, 1);
  line-height: 1rem;
  text-align: center;
}
.intOne {
  overflow: hidden;
}
.left {
  width: 50%;
  float: left;
}
.right {
  width: 50%;
  float: right;
}
.text {
  line-height: 1.2rem;
}
.text1 {
  padding-top: 0.6rem;
}
.clearfix {
  padding: 0 0.6rem;
  line-height: 1rem;
  background: #f6f6f6;
  overflow: hidden;
  font-size: 0.42rem;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
}
.clearfix_left {
  float: left;
}
.clearfix_right {
  float: right;
  color: #52a0fd;
}
.contents {
  padding: 0 0.6rem;
  overflow: hidden;
  font-size: 0.42rem;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  border-bottom: 0.01rem solid #f6f6f6;
  color: rgba(153, 153, 153, 1);
  padding-top: 0.5rem;
}
.contents_left {
  float: left;
  line-height: 1rem;
  text-align: left;
}
.customer{
  color: #000;
  font-size: 0.48rem;
}
.contents_right {
  float: right;
  line-height: 0.8rem;
  padding-bottom: 0.5rem;
}
.noData {
  line-height: 2rem;
  text-align: center;
}
</style>