<template>
  <view class="project-detail-container">
    <!-- 标题和日期 -->
    <view class="header">
      <text class="title">{{ projectData.title }}</text>
      <text v-if="projectData.createTime" class="time">
        {{ formatDate(projectData.createTime) }}
      </text>
    </view>

    <!-- 封面图片 -->
    <template v-if="projectData.coverUrl">
      <image
        v-for="item in projectData.coverUrl.split(',')"
        :src="item"
        class="cover-image"
        mode="widthFix"
      />
    </template>

    <!-- 内容区域 -->
    <view class="content-box">
      <rich-text
        :nodes="removeBackgroundStyle(projectData.content)"
      ></rich-text>
    </view>
  </view>
</template>

<script>
export default {
  name: "projectDetail",
  data() {
    return {
      projectData: {
        title: "",
        content: "",
        createTime: "",
        coverUrl: "",
      },
    };
  },
  onLoad(options) {
    this.projectData = {
      title: decodeURIComponent(options.title || ""),
      content: decodeURIComponent(options.content || ""),
      createTime: decodeURIComponent(options.createTime || ""),
      coverUrl: decodeURIComponent(options.coverUrl || ""),
    };
  },
  methods: {
    // 格式化日期
    formatDate(timestamp) {
      //return this.$u.date(timestamp, "yyyy-mm-dd");

      // if (!timestamp) return "";
      // const date = new Date(timestamp);
      // return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`;
      //
      // function padZero(num) {
      //   return num < 10 ? `0${num}` : num;
      // }
      return timestamp;
    },

    removeBackgroundStyle(html) {
      if (!html) return [];

      // 1. 移除背景色样式
      return html.replace(/background-color:[^;"]*;?/g, "");
    },
  },
};
</script>

<style lang="scss" scoped>
.project-detail-container {
  padding: 30rpx;
  background-color: #fff;
}

.cover-image {
  width: 100%;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
}

.header {
  margin-bottom: 30rpx;

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    line-height: 1.5;
    display: block;
    margin-bottom: 10rpx;
  }

  .time {
    font-size: 24rpx;
    color: #999;
  }
}

.content-box {
  padding: 20rpx 0;

  .content {
    font-size: 30rpx;
    color: #666;
    line-height: 1.8;
    white-space: pre-wrap;
  }
}
</style>
