<template>
    <div :class="['new-reward-card', cardItem.locked ? 'unlocked' : 'locked']" @click="clickCard">
      <div v-if="cardItem.label" class="badge">{{ cardItem.label }}</div>
      <div class="left">
        <div :class="['title', cardItem.locked ? 'unlocked' : 'locked']">{{ cardItem.title }}</div>
        <div :class="['desc', cardItem.locked ? 'unlocked' : 'locked']">{{ cardItem.desc }}</div>
      </div>
      <div class="right">
        <img class="icon-main" :src="cardItem.icon" />
      </div>
    </div>
</template>  
<script lang="ts" setup>
import { defineProps, PropType, emit } from 'vue';

// 定义 cardItem 的类型
interface CardItem {
  label?: string; // 标签内容（可选）
  title: string; // 卡片标题
  desc: string; // 卡片描述
  icon: string; // 图标路径
  locked: boolean; // 是否锁定
}

// 定义组件属性
const props = defineProps({
  cardItem: {
    type: Object as PropType<CardItem>,
    required: true,
  },
});

// 定义点击事件
const emit = defineEmits(['click']);
const clickCard = () => {
  emit('click');
};
</script>
<style lang="less" scoped>
.new-reward-card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-radius: 0.16rem;
  height: 1.18rem;
  width: calc((100% - 0.2rem) / 2);
  margin-bottom: 0.2rem;
  position: relative;
  &.locked {
    background: linear-gradient(113deg, #fffcf5 3%, #ffe9be 100%, #ffe8af 100%);
    border: 0.01rem solid linear-gradient(111deg, #fff1d6 2%, #ffe4b0 94%) 1;
  }
  &.unlocked {
    background: #f3f3fd;
    border: 0.01rem solid rgba(137, 137, 155, 0.2);
  }
  .badge {
    font-family: PingFang SC;
    font-size: 0.2rem;
    font-weight: 600;
    line-height: normal;
    color: #fffefe;
    border-radius: 0.16rem 0 0.16rem 0;
    opacity: 1;
    background: linear-gradient(0deg, #ff6426, #ff6426), linear-gradient(270deg, #ff4d4d 0%, #fe5054 63%, #f774a2 107%);
    position: absolute;
    top: -0.14rem;
    padding: 0.04rem 0.16rem;
  }
  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 0.92rem);
    margin-left: 0.24rem;
    .title {
      font-family: PingFang SC;
      font-size: 0.28rem;
      font-weight: 600;
      line-height: normal;
      letter-spacing: 0.02em;
      &.locked {
        color: #a05600;
      }
      &.unlocked {
        color: #666666;
      }
    }
    .desc {
      font-family: PingFang SC;
      font-size: 0.2rem;
      font-weight: normal;
      line-height: normal;
      letter-spacing: 0.02em;
      &.locked {
        color: #bc8a66;
      }
      &.unlocked {
        color: #999999;
      }
    }
  }
  .right {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 0.92rem;
    margin-right: 0.24rem;
    .icon-main {
      width: 0.68rem;
      height: 0.68rem;
    }
  }
}
</style>


  