<template>
    <div class="new-benefit-header">
      <div class="badge">
        <span class="prefix">{{ benefitItem.label.prefix }}</span>
        <span class="price">{{ benefitItem.label.value }}{{ benefitItem.label.suffix }}</span>
      </div>
      <div class="top-title">{{ benefitItem.title }}</div>
      <div class="top-bottom-main">
        <div class="subTitle">{{ benefitItem.subTitle }}</div>
        <div class="desc" @click="handleClick">
          权益说明
          <img
            class="benefit-icon"
            :src="`${$root.giftDomain}/freight-web-v3/driver-client-page/driverGuarantee/benefit-desc.png`"
          />
        </div>
      </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';

// 定义 benefitItem 的类型
interface BenefitItem {
  // 根据实际数据结构定义字段
  [key: string]: any; // 如果字段不确定，可以使用任意键值对
}

export default defineComponent({
  name: 'BenefitHeader',
  props: {
    benefitItem: {
      type: Object as PropType<BenefitItem>, // 使用 PropType 明确类型
      default: () => ({})
    }
  },
  emits: ['handleClick'], // 明确声明事件
  setup(props, { emit }) {
    // 定义方法
    const handleClick = () => {
      emit('handleClick'); // 触发父组件监听的事件
    };

    return {
      handleClick
    };
  }
});
</script>

<style lang="less" scoped>
.badge {
  display: flex;
  flex-direction: column;
  background-image: url('@{assetsUrl}/freight-web-v3/driver-client-page/driverGuarantee/benefit-tag.png');
  background-size: 100% 100%;
  position: absolute;
  right: 0.24rem;
  top: -0.1rem;
  height: 0.71rem;
  width: 1.26rem;
  justify-content: center;
  align-items: center;
  .prefix {
    font-family: PingFang SC;
    font-size: 0.2rem;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0.02em;
    color: #6e2300;
    margin-left: 0.1rem;
  }
  .price {
    font-family: Barlow Semi Condensed;
    font-size: 0.24rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
    color: #6e2300;
    margin-left: 0.1rem;
  }
}
.top-bottom-main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .subTitle {
    font-family: PingFang SC;
    font-size: 0.24rem;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0.02em;
    color: #666666;
  }
  .desc {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: PingFang SC;
    font-size: 0.2rem;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0.02em;
    color: #999999;
    margin-top: 0.04rem;
    .benefit-icon {
      width: 0.2rem;
      height: 0.2rem;
      margin-left: 0.04rem;
    }
  }
}
.top-title {
  font-family: PingFang SC;
  font-size: 0.28rem;
  font-weight: 600;
  line-height: 0.4rem;
  letter-spacing: 0.02em;
  color: #333333;
}
</style>