<template>
  <view class="list">
    <view
      v-for="(item, index) in props.data"
      :key="index"
      class="item"
      
    >
      <!-- 标题 start -->
      <!-- <text class="title" v-html="item.title">{{ item.title }}</text> -->
      <text @click="handleClick(item)" class="title" v-html="item.MarkInRedTitle || item.title"></text>
      <!-- 标题 end -->
      <!-- 内容 start -->

      <view class="r_content">
        <image src="@/static/icon_act_lt.png" class="title_icon"></image>
        <text @click="handleClick(item)" class="content" v-html="item.MarkInRedContent || item.content"></text>
        <!-- <text @click="handleClick(item)" class="content">{{ item.content }}</text> -->
        <!-- 需要付费锁 start -->
        <view class="need_login" v-if="item.needpay" @click="handleSubListItem(item)">
          <image src="@/static/icon_lock.png" class="need_icon"></image>
          <text>订阅后解锁全文</text>
          <u-icon
            name="arrow-right"
            color="#fff"
            size="10"
            style="margin-left: 10rpx"
            bold
          ></u-icon>
        </view>
        <!-- 需要付费锁 end -->
      </view>

      <!-- 内容 end -->

      <!-- 时间和阅读量 start -->
      <view class="time_read">
        <text>1分钟</text>
        <view>
          <text>{{ item.read }}阅读</text>
          <text>{{ item.like }}点赞</text>
          <text>{{ item.comment > 1000 ? "999+" : item.comment }}评论</text>
        </view>
      </view>
      <!-- 时间和阅读量 end -->
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, onBeforeMount } from "vue";
const emit = defineEmits(["handleSubListItem"]);
const props = defineProps({
  // 列表内容
  data: {
    type: Object,
    default: () => {},
  },
});
console.log("props.data", props.data)
onBeforeMount(() => {});

// 点击订阅
const handleSubListItem = (item) => {
  // props.data.needpay = true;
  // return () => {
    // console.log("item ===>", item)
    emit("handleSubListItem", item.id);
  // }
};

// 点击进入详情
const handleClick = (item: any) => {
  uni.navigateTo({
    url: `/pages/detail/index?id=${item.id}&type=${item.type}`,
  });
};
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  border-bottom: 1px solid rgb(204, 204, 204, 0.3);
  padding-bottom: 20rpx;

  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .r_content {
    position: relative;
    margin-top: 10rpx;
    min-height: 130rpx;
  }

  .content {
    font-size: 26rpx;
    color: rgba(51, 51, 51, 0.6);
    text-indent: 30rpx;
  }

  .title_icon {
    width: 24rpx;
    height: 24rpx;
  }
}

.need_login {
  background: linear-gradient(to right, #e7303f, #fff);
  padding: 20rpx 20rpx;
  border-radius: 10rpx;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: 24rpx;
  margin-top: 5rpx;
  position: absolute;
  bottom: 0;
  width: 95%;
}

.need_icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 10rpx;
}

.time_read {
  display: flex;
  justify-content: space-between;
  font-size: 20rpx;
  color: #b9b9b9;
  margin-top: 15rpx;

  text {
    margin-right: 10rpx;
  }
}
</style>
