<template>
  <view class="type-card" :style="{ backgroundColor: rgba }">
    <view class="type-header" :style="{ backgroundColor: bgColor }" @tap="emits('upOrDown')">
      <view> {{ typeName }} </view>
      <view class="type-num">￥{{ (allAmount / 100).toFixed(2) }} /{{ allCount }}笔
        <image src="/static/iconImg/down.svg" style="transition: 0.3s linear" :class="{ 'img-up': !isShow }"
          mode="scaleToFill" />
      </view>
    </view>
    <view class="type-main" :style="{ maxHeight: isShow ? '40vh' : '0' }">
      <view class="type-item">
        <view class="type-num">
          <view> ￥{{ (allAmount / 100).toFixed(2) }}</view>
          <view class="title"> 成交金额 </view>
        </view>
      </view>
      <view class="type-item">
        <view class="type-num">
          <view> ￥{{ ((payAmount - refundAmount) / 100).toFixed(2) }}</view>
          <view class="title"> 实收金额</view>
        </view>
      </view>
      <view class="type-item">
        <view class="type-num">
          <view> ￥{{ payCount }}/{{ allCount }}</view>
          <view class="title"> 成交笔数/总笔数 </view>
        </view>
      </view>
      <view class="type-item">
        <view class="type-num">
          <view> ￥{{ (refundAmount / 100).toFixed(2) }}</view>
          <view class="title"> 退款金额</view>
        </view>
      </view>
      <view class="type-item">
        <view class="type-num">
          <view> {{ refundCount }}</view>
          <view class="title"> 退款笔数 </view>
        </view>
      </view>
      <view class="type-item">
        <view class="type-num">
          <view> {{ round }}%</view>
          <view class="title"> 成功率</view>
        </view>
      </view>
    </view>
</view>
</template>

<script setup>

import { reactive, ref } from 'vue'
const emits = defineEmits(['upOrDown'])
const props = defineProps({
  typeName: { type: String },
  allCount: { type: [String, Number] },
  allAmount: { type: [String, Number] },
  bgColor: { type: String },
  rgba: { type: String },
  isShow: { type: Boolean },
  refundAmount: { type: [String, Number] },
  round: { type: [String, Number] },
  payCount: { type: [String, Number] },
  payAmount: { type: [String, Number] },
  refundCount: { type: [String, Number] },
})
</script>

<style lang="scss" scoped>
.type-card {
  position: relative;
  z-index: 10;
  margin: 0 auto;
  box-sizing: border-box;
  width: 95%;

  border-radius: 14rpx;
  overflow: hidden;

  .type-header {
    padding: 25rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 24rpx;
    font-weight: 600;

    .type-num {
      display: flex;
      align-items: center;
    }

    image {
      margin-left: 10rpx;
      width: 30rpx;
      height: 30rpx;
    }
  }

  .type-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0 20rpx;
    overflow: hidden;
    // max-height: 0;
    transition: 0.3s linear;

    .type-item {
      flex: 0 0 30%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20rpx 0;
      text-align: center;
      color: #fff;

      .title {
        margin-top: 10rpx;
        color: rgba($color: #fff, $alpha: 0.6);
      }
    }
  }
}

.img-up {
  transform: rotate(-180deg);
}</style>
