<template>
  <view class="deal-data">
    <view class="deal-headline">
      <text class="iconfont headline-icon">&#xe60c;</text>
      <text class="headline-text">交易总数据</text>
      <view class="deal-btn" @click.stop="$emit('exportExcel', businessId)">
        <text class="iconfont">&#xe61b;</text>
        <text>导出</text>
      </view>
    </view>
    <view class="deal-content">
      <view class="content-row">
        <view class="content-item">
          <view class="content-top">
            <text class="iconfont top-icon top-icon-1">&#xe641;</text>
            <text class="top-num">实际收款</text>
          </view>
          <view class="content-num" style="color: #eb5153">
            <text class="num-tag">￥</text>
            <text class="num-val"
              >{{ numCapture(Vo.actualReceivePayment, "Integer") }}.</text
            >
            <text class="num-v">{{
              numCapture(Vo.actualReceivePayment, "Decimals")
            }}</text>
          </view>
        </view>
        <view class="content-item">
          <view class="content-top">
            <text class="iconfont top-icon top-icon-2">&#xe61e;</text>
            <text class="top-num">实际到账</text>
          </view>
          <view class="content-num" style="color: #5bbc75">
            <text class="num-tag">￥</text>
            <text class="num-val"
              >{{ numCapture(Vo.actualCredited, "Integer") }}.</text
            >
            <text class="num-v">{{
              numCapture(Vo.actualCredited, "Decimals")
            }}</text>
          </view>
        </view>
      </view>
      <view class="content-row">
        <view class="content-item">
          <view class="content-top">
            <text class="iconfont top-icon top-icon-3">&#xe63d;</text>
            <text class="top-num">用户消耗积分</text>
          </view>
          <view class="content-num" style="color: #6e96ed">
            <text class="num-val"
              >{{ numCapture(Vo.userUsePoint, "Integer") }}.</text
            >
            <text class="num-v">{{
              numCapture(Vo.userUsePoint, "Decimals")
            }}</text>
          </view>
        </view>
        <view class="content-item">
          <view class="content-top">
            <text class="iconfont top-icon top-icon-4">&#xe60e;</text>
            <text class="top-num">店铺发放积分</text>
          </view>
          <view class="content-num" style="color: #f3a34a">
            <text class="num-val"
              >{{ numCapture(Vo.businessGivePoint, "Integer") }}.</text
            >
            <text class="num-v">{{
              numCapture(Vo.businessGivePoint, "Decimals")
            }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
// import { numCapture } from "@/util/Filters.ts";
defineProps({
  Vo: {
    type: Object,
    default: () => {},
  },
  businessId: {
    type: Number,
    default: null,
  },
});
</script>

<style scoped lang="scss">
$pad_lr: 30rpx;

.deal-data {
  width: 100%;
  background: linear-gradient(180deg, #fbe6e9, #ffffff 13%);
  border-radius: 24rpx;
  overflow: hidden;

  .deal-headline {
    width: 100%;
    height: 98rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 $pad_lr;
    box-sizing: border-box;
    border-bottom: 1rpx solid #f7f7f7;

    .headline-icon {
      font-size: 45rpx;
      background: linear-gradient(180deg, #ffca28, #f2b625);
      -webkit-background-clip: text;
      /* 对于webkit内核的浏览器 */
      background-clip: text;
      -webkit-text-fill-color: transparent;
      /* 使文本颜色透明，显示背景渐变 */
      color: transparent;
      /* 兼容非webkit浏览器 */
    }

    .headline-text {
      flex: 1;
      padding: 0 10rpx;
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      color: #1a1a1a;
    }

    .deal-btn {
      width: 141rpx;
      height: 61rpx;
      background: #eb5153;
      border-radius: 10rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #ffffff;

      .iconfont {
        padding-right: 8rpx;
      }
    }
  }

  .deal-content {
    padding: $pad_lr;
    width: 100%;
    box-sizing: border-box;

    .content-row {
      display: flex;
      width: 100%;
      background-color: #f7f6f6;
      padding: $pad_lr;
      box-sizing: border-box;
      border-radius: 20rpx;

      &:nth-child(n + 2) {
        margin-top: 20rpx;
      }

      .content-item {
        flex: 1 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &:first-child {
          position: relative;

          &:before {
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            width: 1rpx;
            height: 100%;
            background-color: #e6e5e5;
          }
        }

        .content-top {
          display: flex;
          align-items: center;
          .top-icon-1 {
            background: linear-gradient(180deg, #f69091, #e35d58);
          }

          .top-icon-2 {
            background: linear-gradient(180deg, #76d595, #59bb74);
            font-size: 38rpx;
          }

          .top-icon-3 {
            background: linear-gradient(180deg, #7097ec, #3a7bf8);
            font-size: 38rpx;
          }

          .top-icon-4 {
            background: linear-gradient(180deg, #edac48, #f29c3b);
            font-size: 38rpx;
          }

          .top-num {
            font-size: 26rpx;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            color: #666666;
            padding-left: 15rpx;
          }

          .top-icon {
            -webkit-background-clip: text;
            /* 对于webkit内核的浏览器 */
            background-clip: text;
            -webkit-text-fill-color: transparent;
            /* 使文本颜色透明，显示背景渐变 */
            color: transparent;
            /* 兼容非webkit浏览器 */
          }
        }

        .content-num {
          display: flex;
          align-items: baseline;

          .num-tag {
            font-size: 26rpx;
          }

          .num-val {
            font-size: 32rpx;
          }

          .num-v {
            font-size: 26rpx;
          }
        }
      }
    }
  }
}
</style>
