<template>
  <view class="pay-wrapper">
    <view class="pay-info">
      <view class="pay-logo disFlexCenter" :style="{ backgroundColor: bgColor }">
        <image :src="icon" mode="scaleToFill" />
      </view>

      <view class="info-main">
        <view class="pay-title">
          <text>{{ ifName }}</text>
          <slot name="right" />
        </view>
        <view class="pay-rate">单笔费率：{{ paywayFee.feeRate * 100 }}%</view>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  ifName: { typ: String }, //通道标题
  bgColor: { type: String }, //logo 背景颜色
  icon: { type: String }, // logo地址
  paywayFee: { type: Object, default: () => ({}) }, //费率
})
</script>

<style lang="scss" scoped>
.pay-wrapper {
  display: flex;
  align-items: center;
  padding: 0 40rpx;
  height: 170rpx;
  .pay-info {
    flex: 1;
    display: flex;
    .pay-logo {
      margin-right: 20rpx;
      width: 90rpx;
      height: 90rpx;
      border-radius: 20rpx;
      background-color: #07112d;
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
    .info-main {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .pay-title {
      display: flex;
      justify-content: space-between;
      font-size: 30rpx;
      font-weight: 400;
    }
    .pay-rate {
      margin-top: 15rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #999;
    }
  }
}
.disFlexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
