<template>
  <view class="flashItemContainer">
    <view class="flashItemHeader" @click="handleClick">
      <text class="flashItemTitle">
        <!-- <view class="isVip"></view> -->
        {{ props.data.item.title }}
      </text>
    </view>
    <view class="flashItemFooter">
      <view class="unlock" v-if="props.data.item.needpay && !props.noPayShow"  @click="showPay">立即解锁</view>
      <view class="flashItemData">
        <view class="dataItem">{{ props.data.readNums || 0 }}阅读</view>
        <view class="dataItem">{{ props.data.likeNums || 0 }}点赞</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
let props = defineProps(["data", "noPayShow"]);
// console.log(props.data);
const emit = defineEmits(["showPay", "handleClick"]);

function showPay() {
  emit("showPay", props.data.item);
}

function handleClick() {
  emit("handleClick", props.data.item);
}
</script>

<style lang="scss" scoped>
.flashItemContainer {
  width: 500rpx;
  height: 220rpx;
  box-sizing: border-box;
  padding: 21rpx 30rpx;
  border: 1px solid rgba(51, 51, 51, 0.1);
  border-radius: 8rpx;
  margin-right: 24rpx;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  box-shadow: 0px 1px 4px rgba(12, 12, 13, 0.1);
  background-color: #fff;
  word-break: break-all;
  .flashItemHeader {
    // font-size: 28rpx;
    font-size: var(--h2-font-size);

    .flashItemTitle {
      // font-weight: bold;
      line-height: 1.3rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      font-family: "SourceHanSansCN-Medium";
      .isVip {
        display: inline-block;
        width: 50rpx;
        height: 29rpx;
        background-image: url(@/assets/images/icon_vip.png);
        background-size: cover;
      }
    }
  }
  .flashItemFooter {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rpx;
    font-family: "SourceHanSansCN-Regular";
    .unlock {
      box-sizing: border-box;
      padding: 8rpx 21rpx;
      border: 2rpx solid #e7303f;
      // font-size: 24rpx;
      font-size: var(--h4-font-size);
      color: #e7303f;
      border-radius: 999rpx;
    }
    .flashItemData {
      display: flex;
      justify-content: flex-end;
      box-sizing: border-box;
      .dataItem {
        // font-size: 20rpx;
        font-size: var(--h6-font-size);
        color: #b9b9b9;
        margin-right: 21rpx;
        &:nth-child(3) {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
