<template>
  <Card :title="title" :icon="icon" class="online-water">
    <div class="con-top display-flex border">
      <div class="img">
        <img src="./images/icon-total.png" alt="" class="icon">
      </div>
      <div class="info">
        <p class="title">线上流水总额</p>
        <p class="num">{{ onlineWaterInfo.allSum | formatNumber }}</p>
      </div>
    </div>
    <div class="con-center display-flex">
      <div class="con-item flex-1 border">
        <div class="top display-flex">
          <div class="img">
            <img src="./images/icon-once.png" alt="" class="icon">
          </div>
          <div class="info flex-1">
            <p class="title">单笔缴费金额</p>
            <p class="num">{{ onlineWaterInfo.recentAveAmount || 0 }}</p>
            <p class="desc">(近12个月平均值)</p>
          </div>
        </div>
        <div class="bottom display-flex">
          <span class="title">单笔最大值</span>
          <span class="num">{{ onlineWaterInfo.recentMaxAmount || 0 }}</span>
        </div>

      </div>
      <div class="con-item flex-1 border">
        <div class="top display-flex">
          <div class="img">
            <img src="./images/icon-month.png" alt="" class="icon">
          </div>
          <div class="info flex-1">
            <p class="title">月在线缴费次数</p>
            <p class="num">{{ onlineWaterInfo.avgMonPayCnt || 0 }}</p>
            <p class="desc">(近12个月平均值)</p>
          </div>
        </div>
        <div class="bottom display-flex">
          <span class="title">单笔最大值</span>
          <span class="num">{{ onlineWaterInfo.maxMonthlyCnt || 0 }}</span>
        </div>
      </div>
    </div>
    <div class="con-footer display-flex border" v-if="showOnlineInfo">
      <div class="info display-flex">
        <div class="img">
          <img src="./images/icon-total.png" alt="" class="icon">
        </div>
        <div class="text">
          <p class="title">线上总缴费</p>
          <p class="desc">(近12个月)</p>
        </div>
      </div>
      <div class="num">
        {{ onlineWaterInfo.recentlySum || 0 }}
      </div>
    </div>
  </Card>
</template>
<script>
import { huiJiaApi } from '@/api'
import Card from '@/views/hui-jia/components/card'
import icon from './images/icon-title.png'

export default {
  name: 'OnlineWater',
  components: {
    Card
  },
  props: {
    showOnlineInfo: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      title: '线上流水数据',
      icon: icon,
      onlineWaterInfo: {}
    }
  },
  mounted () {
    this.getOnlineWaterStatistics()
  },
  methods: {
    getOnlineWaterStatistics () {
      huiJiaApi.getOnlineWaterStatistics().then(res => {
        this.onlineWaterInfo = res.data.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/function.scss';
@import '@/assets/css/screen.scss';

.online-water {
  ::v-deep .card-body{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
  }
  .img{
    width: halfW(50);
    height: halfW(50);
    padding: halfH(10) halfW(10);
    box-sizing: border-box;
    background: #12223C;
    border-radius: 50%;
    .icon{
      width: halfW(30);
      height: halfW(30);
    }
  }
  .con-top{
    flex: 1;
    width: 100%;
    padding: halfH(24) halfW(20);
    background: #0E1629;
    .info{
      margin-left: halfW(20);
      .title{
        font-size: halfW(16);
        color: #82D1F6;
      }
      .num{
        font-size: halfW(20);
        margin-top: halfH(10);
        color: #9BE3E0;
      }
    }
  }
  .con-center{
    width: 100%;
    margin-top: halfH(20) ;
    .con-item{
      box-sizing: border-box;
      &:first-child{
        margin-right: halfW(20);
      }
      .top{
        padding: halfH(24) halfW(20);
        .info{
          margin-left: halfW(20);
          .title{
            font-size: halfW(14);
            color: #82D1F6;
            margin-bottom: halfH(8);
          }
          .num{
            color: #F6F7FC;
            margin-bottom: halfH(8);
          }
          .desc{
            font-size: halfW(12);
            color: #9FA5B7;
          }
        }
      }
      .bottom{
        justify-content: space-between;
        align-items: center;
        background: #111C30;
        padding: halfH(16) halfW(20);
        .title{
          font-size: halfW(14);
          color: #9FA5B7;
        }
        .num{
          font-size: halfW(18);
          color: #F6F7FC;
        }
      }
    }
  }
  .con-footer{
    width: 100%;
    margin-top: halfH(20);
    padding: halfH(24) halfW(20);
    background: #0E1629;
    justify-content: space-between;
    .info{
      .text{
        margin-left: halfW(20);
        .title{
          font-size: halfW(16);
          margin-top: halfH(6);
          color: #82D1F6;
        }
        .desc{
          font-size: halfW(12);
          margin-top: halfH(8);
          color: #9FA5B7;
        }
      }

    }
    .num{
        font-size: halfW(20);
        margin-top: halfH(14);
        color: #fff;
      }
  }
}
</style>
