<template>
  <view class="zhima-badge">
    <image class="zhima-badge__icon" :src="iconUrl" mode="aspectFit" />
    <text class="zhima-badge__text">{{ mainText }}</text>
    <text class="zhima-badge__divider" v-if="subText">|</text>
    <text class="zhima-badge__text" v-if="subText">{{ subText }}</text>
  </view>
</template>

<script>
/** 芝麻免押标识图标地址（与渠道 API 类型解耦，仅展示用） */
const ZHIMA_CREDIT_ICON_URL = 'https://api.ccttiot.com/ali-Credit-1772614303042.png'

export default {
  name: 'ZhimaNoDepositBadge',
  props: {
    mainText: {
      type: String,
      default: '芝麻免押'
    },
    subText: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      iconUrl: ZHIMA_CREDIT_ICON_URL
    }
  }
}
</script>

<style lang="scss" scoped>
.zhima-badge {
  display: inline-flex;
  align-items: center;
  gap: 6rpx;
  padding: 4rpx 12rpx;
  background: #fff;
  border: 1rpx solid #b3d4ff;
  border-radius: 8rpx;
  font-size: 22rpx;
  line-height: 1.4;
  color: #1677ff;

  &__icon {
    width: 28rpx;
    height: 28rpx;
    flex-shrink: 0;
  }

  &__text {
    color: #1677ff;
  }

  &__divider {
    margin: 0 4rpx;
    color: #1677ff;
    opacity: 0.8;
  }
}
</style>
