<template>
  <view
    class="flex flex-col flex-items-center flex-justify-center re-wrapper"
    :class="{ 'is-checked': detail.isSelected }"
    @click="selectEvent"
  >
    <view class="type-name">{{ detail.product_name }}</view>
    <view class="flex type-amount">
      <view class="flex flex-col flex-justify-end icon">￥</view>
      <view class="num">{{ detail.sell_price }}</view>
    </view>
    <view class="type-ori">原价{{ detail.price }}</view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, unref, onMounted } from "vue";
const props = defineProps({
  detail: {
    type: Object,
    required: true,
  },
});

const emits = defineEmits(["selected"]);

const selectEvent = () => {
  emits("selected", props.detail.id);
};
</script>
<style scoped lang="scss">
.re-wrapper {
  width: 100%;
  height: 200rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
  opacity: 1;
  background: #fff;
  box-sizing: border-box;
  border: 1.6rpx solid #ececec;
}
.is-checked {
  background: #dcefff;
  border: 1.6rpx solid #2d91ff;
}
.type-name {
  width: 80%;
  font-size: 26rpx;
  font-weight: normal;
  line-height: normal;
  color: #070b1b;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}
.type-amount {
  margin-top: 6rpx;
  color: $sub-price-color;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0em;
  .icon {
    font-size: 28rpx;
    margin-bottom: 4rpx;
  }
  .num {
    /* 价格 */
    font-size: 48rpx;
  }
}
.type-ori {
  font-size: 24rpx;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0em;
  text-decoration: line-through;
  color: #a4c4fa;
  margin-top: 6rpx;
}
</style>
