<template>
  <view class="container">
    <ModuleTitle :title="recommendTheme.themeName" />
    <view class="container-scroll">
      <view
        v-for="(item, index) in recommendTheme.recommendPostsList"
        :key="index"
      >
        <view class="mk-card-item" @click="sendReply(item)">
          <image :src="item.coverPhoto" mode="aspectFill"></image>
          <view class="overlay-gradient">
            <text class="overlay-text">{{ item.topic }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import ModuleTitle from "@/components/ModuleTitle/index.vue";
import { defineProps } from "vue";
import { RECOMMEND_POSTS_TITLE } from "@/constant/constant.js";

const props = defineProps({
  recommendTheme: {
    type: Object,
    default: {},
  },
});

const sendReply = (item) => {
  const topic = item.userInputContent || item.topic.replace(/^#/, "");
  uni.$emit(RECOMMEND_POSTS_TITLE, topic);
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
}

.container-scroll {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  margin: 4px 0 6px;

  .mk-card-item {
    flex-shrink: 0; /* 关键：防止 flex 布局压缩子元素宽度 */
    width: 142px;
    height: 126px;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 8px;
    position: relative;

    image {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* 渐变背景层 */
    .overlay-gradient {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50px; /* 渐变层高度，可调 */
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.001) 0%,
        rgba(0, 0, 0, 0.5) 100%
      );
      display: flex;
      align-items: flex-end; /* 文字贴近底部 */
      padding: 0 8px 6px; /* 内边距让文字与边缘保持距离 */
      box-sizing: border-box;
    }

    /* 渐变层上的文字 */
    .overlay-text {
      color: #fff;
      font-weight: 500;
      font-size: 12px;
      text-align: left;
      width: 100%;
    }
  }
}
</style>
