<template>
  <view class="article-container">
    <!-- 头部信息 -->
    <view class="header">
      <view class="user-info">
        <text class="username">{{ obj.tp }}</text>
        <text class="post-time">{{ obj.timer }}</text>
      </view>
      <!-- <view :class="ista ? 'follow-btnfn' : 'follow-btn'" @click="ista = !ista"
        >关注</view
      > -->
    </view>

    <!-- 正文内容 -->
    <view class="content">
      <text class="intro-text"> </text>

      <!-- 文章分段 -->
      <view class="section">
        <!-- <view class="section-number">01</view> -->
        <view class="section-content">
          <text class="section-title">{{ obj.title }}</text>
          <text class="section-text">
            {{ obj.conent }}
          </text>
        </view>
      </view>
    </view>

    <view class="card-body">
      <view class="img-list">
        <image
          v-for="(imgUrl, imgIndex) in obj.imglist"
          :key="imgIndex"
          :src="imgUrl"
          mode="aspectFill"
          class="list-img"
        />
      </view>
    </view>
    <view class="article-container">
      <!-- ... existing code ... -->
      <view class="comment-count">评论{{ cont.length }}</view>
      <view class="divider"></view>
      <!-- ... existing code ... -->
    </view>
    <view class="comment-container">
      <view class="comment-card" v-for="(item, index) in cont" :key="index">
        <!-- 用户信息行 -->
        <view class="user-row">
          <view class="user-info">
            <text class="username">{{ item.name }}</text>
            <text class="post-time">{{ item.time }}</text>
          </view>
        </view>

        <!-- 评论内容 -->
        <text class="comment-content">{{ item.content }}</text>
        <!-- 操作按钮 -->
        <view class="action-bar">
          <!-- <view class="action-btn">
            <uni-icons type="chat" size="16" color="#666"></uni-icons>
            <text class="action-text">回复</text>
          </view> -->
          <view class="action-btn">
            <uni-icons type="hand-up" size="16" color="#666"></uni-icons>
            <text class="action-text">
              <text class="stat-number">
                <image
                  v-if="item.iszan"
                  @click="delmingdfun(item, index)"
                  src="@/static/img/index/xin.png"
                  :style="stylie"
                ></image>
                <image
                  v-else
                  src="@/static/img/index/xin-3.png"
                  @click="mingdfun(item, index)"
                  :style="stylie"
                ></image>
                <text> </text>
              </text>
              {{ item.zannum }}</text
            >
          </view>
        </view>

        <!-- 分割线 -->
        <view class="divider" v-if="index < cont.length - 1"></view>
      </view>

      <view class="comment-input-area">
        <textarea
          v-model="newComment"
          placeholder="请输入评论内容"
          class="comment-input"
          auto-height
        ></textarea>
        <button @click="submitNewComment" class="submit-btn">提交评论</button>
      </view>
    </view>
  </view>
</template>

<script>
import imgage from "@/static/logn.png"; // 导入图片资源
export default {
  data() {
    return {
      newComment: "", // 用于存储新评论的内容
      stylie: {
        width: "20px", // 设置宽度为 20px
        height: "20px", // 设置高度为 20px
        marginRight: "10px", // 设置右边距为 10px
      },
      ista: false,
      imgage: imgage,
      obj: {},
      cont: [
        {
          img: imgage, //图片
          name: "aminf", //名字
          content: "确实", //内容
          time: "2025-06-2  13:00", //时间
          zannum: 0, //点赞数
          iszan: false, // 点赞状态，默认为未赞
        },
      ],
    };
  },
  onLoad(options) {
    if (options.item) {
      try {
        this.obj = {};
        const item = JSON.parse(decodeURIComponent(options.item));
        this.obj = item;
        item.pingcontent.forEach((any) => {
          this.cont.push(any);
        });
      } catch (error) {
        console.error("解析参数出错:", error);
      }
    }
  },
  methods: {
    submitNewComment() {
      if (this.newComment.trim()) {
        const userInfo = this.$options.filters.isLogin();
        const currentDate = new Date();
        const time = `${currentDate.getFullYear()}-${String(
          currentDate.getMonth() + 1
        ).padStart(2, "0")}-${String(currentDate.getDate()).padStart(
          2,
          "0"
        )} ${String(currentDate.getHours()).padStart(2, "0")}:${String(
          currentDate.getMinutes()
        ).padStart(2, "0")}`;
        // 添加新评论到列表（假设用户名为"匿名用户"，实际可替换为登录用户名）
        this.cont.push({
          img: userInfo.face, //图片
          name: userInfo.nickName, //名字
          content: this.newComment, //内容
          time: time, //时间
          zannum: 0, //点赞数
          iszan: false, // 点赞状态，默认为未赞
        });

        // 清空输入框
        this.newComment = "";
      }
    },
    mingdfun(item, index) {
      if (!this.cont[index].iszan) {
        this.cont[index].zannum++;
        this.cont[index].iszan = true; // 点赞状态改为已赞
      }
    },
    delmingdfun(item, index) {
      if (this.cont[index].iszan) {
        this.cont[index].zannum--;
        this.cont[index].iszan = false; // 点赞状态改为已赞
      }
    },
  },
};
</script>

<style lang="scss">
.article-container {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  margin: 20rpx;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10px;
    }
    .user-info {
      display: flex;
      flex-direction: column;

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

      .post-time {
        font-size: 24rpx;
        color: #999;
        margin-top: 8rpx;
      }
    }

    .follow-btn {
      color: #1890ff;
      border: 1rpx solid #1890ff;
      padding: 8rpx 20rpx;
      border-radius: 20rpx;
      font-size: 24rpx;
    }
    .follow-btnfn {
      color: #ffffff;
      border: 1rpx solid red;
      background: red;
      padding: 8rpx 20rpx;
      border-radius: 20rpx;
      font-size: 24rpx;
    }
  }

  .content {
    .intro-text {
      font-size: 28rpx;
      line-height: 1.6;
      color: #333;
      margin-bottom: 30rpx;
      display: block;
    }

    .section {
      //   display: flex;
      margin-bottom: 30rpx;

      .section-number {
        font-size: 36rpx;
        font-weight: bold;
        color: #1890ff;
        margin-right: 20rpx;
      }

      .section-content {
        flex: 1;

        .section-title {
          font-size: 30rpx;
          font-weight: bold;
          color: #333;
          display: block;
          margin-bottom: 10rpx;
        }

        .section-text {
          font-size: 28rpx;
          line-height: 1.6;
          color: #666;
        }
      }
    }
  }

  .footer {
    border-top: 1rpx solid #eee;
    padding-top: 20rpx;
    display: flex;
    justify-content: flex-end;
  }
}
.img-list {
  display: flex;
  //   flex-wrap: wrap;
  gap: 10px; /* 图片之间的间距 */
}

.list-img {
  width: 200rpx; /* 图片宽度，根据需求调整 */
  height: 200rpx; /* 图片高度，根据需求调整 */
  border-radius: 8rpx; /* 图片圆角 */
  object-fit: cover; /* 图片填充方式 */
}
.comment-container {
  //   padding: 20rpx;
  background-color: #f8f8f8;

  .comment-card {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .user-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;

      .user-info {
        display: flex;
        flex-direction: column;

        .username {
          font-size: 30rpx;
          font-weight: bold;
          color: #333;
        }

        .post-time {
          font-size: 24rpx;
          color: #999;
          margin-top: 4rpx;
        }
      }
    }

    .comment-content {
      font-size: 28rpx;
      line-height: 1.5;
      color: #333;
      margin-bottom: 20rpx;
      display: block;
    }

    .reply-section {
      background-color: #f5f5f5;
      border-radius: 8rpx;
      padding: 16rpx;
      margin-bottom: 20rpx;

      .reply-item {
        margin-bottom: 12rpx;

        .reply-user {
          font-size: 26rpx;
          font-weight: bold;
          color: #1890ff;
          margin-right: 10rpx;
        }

        .reply-content {
          font-size: 26rpx;
          color: #666;
        }
      }
    }

    .action-bar {
      display: flex;
      justify-content: flex-end;
      gap: 30rpx;

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

        .action-text {
          font-size: 26rpx;
          color: #666;
          margin-left: 8rpx;
        }
      }
    }

    .divider {
      height: 1rpx;
      background-color: #eee;
      margin: 24rpx -24rpx 0;
    }
  }

  .no-more {
    text-align: center;
    font-size: 26rpx;
    color: #999;
    padding: 20rpx 0;
  }
}
.divider {
  height: 1rpx;
  background-color: #eee;
  margin: 24rpx -24rpx 0;
}
.comment-count {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  padding: 15rpx 0;
  margin: 0 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.comment-input-area {
  width: 95%;
  display: flex;
  align-items: center;
//   padding-bottom: 220rpx; 
  gap: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx 12rpx 0 0; /* 顶部圆角，底部贴边 */
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05); /* 顶部阴影 */

  /* 新增固定定位样式 */
  position: fixed;
  bottom: 0; /* 底部对齐 */
  left: 0; /* 左侧对齐 */
  right: 0; /* 右侧对齐 */
  margin: 0 20rpx; /* 左右保留边距 */
  box-sizing: border-box; /* 内边距不影响宽度 */
}
.submit-btn {
  width: 160rpx; /* 按钮固定宽度 */
  padding: 12rpx 0;
  background-color: red;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  white-space: nowrap; 
}
.comment-container {
  padding-bottom: 130rpx; 
}
</style>
