<template>
  <!-- 视频、图片 动态卡片 -->
  <view class="content-card">
    <!-- 用户信息 -->
    <view class="user-info">
      <image
        class="avatar"
        :src="cardData.user.avatar"
        mode="aspectFill"
      ></image>
      <view class="user-detail">
        <text class="username">{{ cardData.user.name }}</text>
        <text class="user-meta">{{ cardData.user.meta }}</text>
      </view>
      <view class="follow-btn" @click="onFollow">
        <u-icon name="plus" color="#666" size="14"></u-icon>
        <text>关注</text>
      </view>
    </view>

    <!-- 内容文本 -->
    <view class="content-text" @click="goContentDetail">
      {{ cardData.content }}
    </view>

    <!-- 媒体内容 - 内部处理交互 -->
    <view class="media-content">
      <!-- 视频内容 -->
      <view v-if="isVideo" class="video-container" @click="handleVideoPlay">
        <image
          class="video-cover"
          :src="cardData.cover"
          mode="aspectFill"
        ></image>
        <view class="video-overlay">
          <u-icon name="play-right" color="#fff" size="40"></u-icon>
          <text v-if="cardData.duration" class="video-duration">{{
            formatDuration(cardData.duration)
          }}</text>
        </view>
      </view>

      <!-- 图片内容 -->
      <view v-else class="image-grid" :class="getImageLayoutClass()">
        <image
          v-for="(img, index) in cardData.images"
          :key="index"
          class="grid-image"
          :src="img"
          mode="aspectFill"
          @click="handleImagePreview(index)"
        ></image>
      </view>
    </view>

    <!-- 互动栏 - 内部处理交互 -->
    <view class="interaction-bar">
      <view 
        class="action-item" 
        v-for="(item, index) in actionButtons" 
        :key="index"
        @click="handleAction(item.action)"
      >
        <image
          :src="item.icon"
          mode="aspectFill"
          style="width: 40rpx; height: 40rpx"
        ></image>
        <text>{{ cardData.stats[item.stat] }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "ContentCard",
  props: {
    cardData: {
      type: Object,
      required: true,
      default: () => ({
        user: {
          avatar: "",
          name: "",
          meta: "",
        },
        content: "",
        // 可以是视频或图片
        type: "image", // 'image' 或 'video'
        images: [], // 图片数组
        cover: "", // 视频封面
        videoUrl: "", // 视频地址
        duration: 0, // 视频时长(秒)
        stats: {
          forward: 0,
          comment: 0,
          like: 0,
          favorite: 0,
        },
      }),
    },
  },
  data() {
    return {
      // 添加内部状态跟踪互动状态
      isLiked: false,
      isFavorited: false,
      isForwarded: false,
      videoContext: null,
      // 添加操作按钮配置
      actionButtons: [
        {
          icon: "/static/common/img/homepage/reply.png",
          action: "forward",
          stat: "forward"
        },
        {
          icon: "/static/common/img/homepage/comment.png",
          action: "comment",
          stat: "comment"
        },
        {
          icon: "/static/common/img/homepage/like.png",
          action: "like",
          stat: "like"
        },
        {
          icon: "/static/common/img/homepage/star.png",
          action: "favorite",
          stat: "favorite"
        }
      ]
    };
  },
  computed: {
    isVideo() {
      return this.cardData.type === "video";
    },
    // 根据状态动态改变图标和颜色
    likeIcon() {
      return this.isLiked ? "heart-fill" : "heart";
    },
    likeColor() {
      return this.isLiked ? "#ff5252" : "#999";
    },
    favoriteIcon() {
      return this.isFavorited ? "star-fill" : "star";
    },
    favoriteColor() {
      return this.isFavorited ? "#ffb700" : "#999";
    },
    forwardIcon() {
      return this.isForwarded ? "arrow-right-fill" : "arrow-right";
    },
    forwardColor() {
      return this.isForwarded ? "#2979ff" : "#999";
    },
    commentColor() {
      return "#999"; // 评论按钮颜色无变化
    },
  },
  methods: {
    // 处理关注点击
    onFollow() {
      this.$emit("follow", this.cardData.user);
    },

    // 跳转详情页
    goContentDetail() {
      console.log("this.cardData", this.cardData);
      this.$u.route({
        url: "/pages/home/home/components/contentDetail/index",
        // params: {
        //   card,
        // },
      });
    },

    // 格式化视频时长
    formatDuration(seconds) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = Math.floor(seconds % 60);
      return `${minutes.toString().padStart(2, "0")}:${remainingSeconds
        .toString()
        .padStart(2, "0")}`;
    },

    // 处理视频播放
    handleVideoPlay() {
      if (this.cardData.videoUrl) {
        // 记录播放历史
        this.savePlayHistory();

        // 使用内置视频播放器播放
        try {
          // 先尝试使用内部视频播放器
          if (this.useInternalPlayer) {
            this.showVideoPlayer = true;
            this.$nextTick(() => {
              this.videoContext = uni.createVideoContext("video-player", this);
              this.videoContext.requestFullScreen();
              this.videoContext.play();
            });
          } else {
            // 否则跳转到专门的播放页面
            uni.navigateTo({
              url: `/pages/video/player?videoUrl=${encodeURIComponent(
                this.cardData.videoUrl
              )}&title=${encodeURIComponent(this.cardData.content)}`,
            });
          }

          // 触发播放事件，让父组件可以进行额外处理
          this.$emit("video-play", {
            videoUrl: this.cardData.videoUrl,
            title: this.cardData.content,
            cover: this.cardData.cover,
            cardId: this.cardData.id,
          });

          // 更新播放统计
          this.updateVideoStats();
        } catch (error) {
          console.error("视频播放失败:", error);
          uni.showToast({
            title: "视频播放失败，请稍后再试",
            icon: "none",
          });
        }
      }
    },

    // 处理图片预览
    handleImagePreview(index) {
      try {
        // 使用uni-app的图片预览API
        uni.previewImage({
          current: index,
          urls: this.cardData.images,
          longPressActions: {
            itemList: ["保存图片", "分享图片"],
            success: (res) => {
              const { tapIndex } = res;
              if (tapIndex === 0) {
                // 保存图片
                this.saveImage(this.cardData.images[index]);
              } else if (tapIndex === 1) {
                // 分享图片
                this.shareImage(this.cardData.images[index]);
              }
            },
          },
        });

        // 触发图片预览事件
        this.$emit("image-preview", {
          index,
          images: this.cardData.images,
          cardId: this.cardData.id,
        });
      } catch (error) {
        console.error("图片预览失败:", error);
      }
    },

    // 保存图片
    saveImage(url) {
      uni.showLoading({ title: "正在保存..." });
      uni.downloadFile({
        url,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({ title: "保存成功" });
              },
              fail: (err) => {
                console.error("保存失败:", err);
                uni.showToast({ title: "保存失败", icon: "none" });
              },
            });
          }
        },
        fail: () => {
          uni.showToast({ title: "下载图片失败", icon: "none" });
        },
        complete: () => {
          uni.hideLoading();
        },
      });
    },

    // 分享图片
    shareImage(url) {
      // 根据平台实现不同的分享逻辑
      // #ifdef APP-PLUS
      plus.share.sendWithSystem({
        type: "image",
        pictures: [url],
      });
      // #endif

      // #ifdef H5
      // H5环境可能需要调用其他API
      // #endif

      // #ifdef MP
      // 小程序环境使用小程序分享API
      uni.showToast({ title: "请使用右上角分享", icon: "none" });
      // #endif
    },

    // 根据图片数量确定布局样式
    getImageLayoutClass() {
      const count = this.cardData.images.length;
      if (count === 1) return "single-image";
      if (count === 2) return "double-image";
      if (count === 3) return "triple-image";
      if (count === 4) return "four-image";
      if (count > 4) return "multi-image";
      return "";
    },

    // 处理转发
    handleForward() {
      this.isForwarded = !this.isForwarded;

      // 显示分享菜单
      uni.showShareMenu({
        withShareTicket: true,
        menus: ["shareAppMessage", "shareTimeline"],
      });

      // 触发转发事件
      this.$emit("forward", {
        cardData: this.cardData,
        isForwarded: this.isForwarded,
      });

      // 如果在APP中，可以调用原生分享
      // #ifdef APP-PLUS
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        title: this.cardData.content,
        summary: this.cardData.content,
        imageUrl: this.isVideo ? this.cardData.cover : this.cardData.images[0],
        success: function (res) {
          console.log("分享成功：" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("分享失败：" + JSON.stringify(err));
        },
      });
      // #endif
    },

    // 处理评论
    handleComment() {
      // 跳转到评论页面或打开评论弹窗
      this.$emit("comment", {
        cardData: this.cardData,
      });

      // 这里可以实现自定义的评论交互
      uni.navigateTo({
        url: `/pages/comment/index?id=${this.cardData.id}&type=${this.cardData.type}`,
      });
    },

    // 处理点赞
    handleLike() {
      // 切换点赞状态
      this.isLiked = !this.isLiked;

      // 更新点赞数据
      const newStats = { ...this.cardData.stats };
      if (this.isLiked) {
        newStats.like += 1;
      } else {
        newStats.like = Math.max(0, newStats.like - 1);
      }

      // 更新数据并触发事件
      this.$emit("like", {
        cardData: this.cardData,
        isLiked: this.isLiked,
        newStats,
      });

      // 发送点赞请求到服务器
      this.updateLikeStatus();
    },

    // 处理收藏
    handleFavorite() {
      // 切换收藏状态
      this.isFavorited = !this.isFavorited;

      // 更新收藏数据
      const newStats = { ...this.cardData.stats };
      if (this.isFavorited) {
        newStats.favorite += 1;
      } else {
        newStats.favorite = Math.max(0, newStats.favorite - 1);
      }

      // 更新数据并触发事件
      this.$emit("favorite", {
        cardData: this.cardData,
        isFavorited: this.isFavorited,
        newStats,
      });

      // 发送收藏请求到服务器
      this.updateFavoriteStatus();
    },

    // 更新点赞状态到服务器
    updateLikeStatus() {
      // 调用API更新点赞状态
      // 示例代码，根据实际API调整
      const url = this.isLiked ? "/api/like/add" : "/api/like/cancel";
      uni.request({
        url,
        method: "POST",
        data: {
          contentId: this.cardData.id,
          contentType: this.cardData.type,
        },
        success: (res) => {
          console.log("点赞状态更新成功", res);
        },
        fail: (err) => {
          console.error("点赞状态更新失败", err);
          // 恢复原状态
          this.isLiked = !this.isLiked;
        },
      });
    },

    // 更新收藏状态到服务器
    updateFavoriteStatus() {
      // 调用API更新收藏状态
      // 示例代码，根据实际API调整
      const url = this.isFavorited
        ? "/api/favorite/add"
        : "/api/favorite/cancel";
      uni.request({
        url,
        method: "POST",
        data: {
          contentId: this.cardData.id,
          contentType: this.cardData.type,
        },
        success: (res) => {
          console.log("收藏状态更新成功", res);
        },
        fail: (err) => {
          console.error("收藏状态更新失败", err);
          // 恢复原状态
          this.isFavorited = !this.isFavorited;
        },
      });
    },

    // 记录视频播放历史
    savePlayHistory() {
      // 保存播放历史到本地存储或服务器
      try {
        const historyList = uni.getStorageSync("videoPlayHistory") || [];
        const now = new Date().getTime();

        // 查找是否已有该视频记录
        const index = historyList.findIndex(
          (item) => item.id === this.cardData.id
        );

        if (index > -1) {
          // 更新已有记录
          historyList[index].lastPlayTime = now;
          historyList[index].playCount += 1;
        } else {
          // 添加新记录
          historyList.push({
            id: this.cardData.id,
            title: this.cardData.content,
            cover: this.cardData.cover,
            lastPlayTime: now,
            playCount: 1,
          });
        }

        // 保存回本地存储
        uni.setStorageSync("videoPlayHistory", historyList);
      } catch (e) {
        console.error("保存播放历史失败", e);
      }
    },

    // 更新视频播放统计
    updateVideoStats() {
      // 调用API更新视频播放次数
      uni.request({
        url: "/api/video/view",
        method: "POST",
        data: {
          videoId: this.cardData.id,
        },
        success: (res) => {
          console.log("视频播放统计更新成功", res);
        },
        fail: (err) => {
          console.error("视频播放统计更新失败", err);
        },
      });
    },

    // 添加统一的操作处理方法
    handleAction(action) {
      switch(action) {
        case "forward":
          this.handleForward();
          break;
        case "comment":
          this.handleComment();
          break;
        case "like":
          this.handleLike();
          break;
        case "favorite":
          this.handleFavorite();
          break;
      }
    }
  },
};
</script>

<style scoped lang="scss">
.content-card {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 16rpx;
    }

    .user-detail {
      flex: 1;

      .username {
        font-size: 30rpx;
        font-weight: 500;
        color: #333;
        display: block;
        line-height: 1.2;
      }

      .user-meta {
        font-size: 24rpx;
        color: #999;
        display: block;
        line-height: 1.2;
        margin-top: 6rpx;
      }
    }

    .follow-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f5f5f5;
      border-radius: 30rpx;
      padding: 8rpx 16rpx;

      text {
        font-size: 24rpx;
        color: #666;
        margin-left: 4rpx;
      }
    }
  }

  .content-text {
    font-size: 28rpx;
    color: #333;
    line-height: 1.5;
    margin-bottom: 24rpx;
  }

  .media-content {
    margin-bottom: 24rpx;
    width: 100%;

    // 视频容器样式
    .video-container {
      position: relative;
      width: 100%;
      border-radius: 8rpx;
      overflow: hidden;

      .video-cover {
        width: 100%;
        height: 400rpx;
        display: block;
      }

      .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.2);

        .video-duration {
          position: absolute;
          right: 16rpx;
          bottom: 16rpx;
          color: #fff;
          font-size: 24rpx;
          background-color: rgba(0, 0, 0, 0.5);
          padding: 4rpx 8rpx;
          border-radius: 4rpx;
        }
      }
    }

    // 图片网格样式
    .image-grid {
      display: flex;
      flex-wrap: wrap;

      .grid-image {
        border-radius: 8rpx;
        background-color: #f5f5f5;
      }

      &.single-image {
        .grid-image {
          width: 100%;
          max-height: 400rpx;
        }
      }

      &.double-image {
        justify-content: space-between;

        .grid-image {
          width: 49%;
          height: 240rpx;
        }
      }

      &.triple-image {
        justify-content: space-between;

        .grid-image {
          width: 31%;
          height: 180rpx;
        }
      }

      &.four-image {
        justify-content: space-between;

        .grid-image {
          width: 49%;
          height: 180rpx;
          margin-bottom: 10rpx;
        }
      }

      &.multi-image {
        justify-content: space-between;

        .grid-image {
          width: 31%;
          height: 180rpx;
          margin-bottom: 10rpx;
        }
      }
    }
  }

  .interaction-bar {
    display: flex;
    justify-content: space-between;
    margin-top: 16rpx;
    padding: 0 20rpx;

    .action-item {
      display: flex;
      align-items: center;

      text {
        font-size: 24rpx;
        color: #999;
        margin-left: 8rpx;
      }
    }
  }
}
</style>
