<template>
  <view class="follow-tab-container">
    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-bar">
        <image
          class="search-icon"
          :src="
            showImg('/uploads/20250826/a4d605e82622223c270df0af4e378ab3.png')
          "
        ></image>
        <input
          class="search-input"
          placeholder="搜索已关注的人"
          v-model="searchText"
          @confirm="handleSearch"
        />
      </view>
    </view>

    <!-- 我的关注标题和排序 -->
    <view class="follows-header">
      <text class="follows-title">我的关注 ({{ totalCount || 0 }})</text>
      <!-- <view class="sort-option" @click="toggleSort">
        <text class="sort-text">综合排序</text>
		<image class="sort-arrow" :src="showImg('/uploads/20250826/8e40deaa0bc67da3a9b104ff0e6b3e7c.png')"></image>
      </view> -->
    </view>

    <!-- 分类导航 -->
    <!-- <view class="category-tabs">
      <view
        class="tab-item"
        :class="{ active: activeCategory === 'all' }"
        @click="switchCategory('all')"
      >
      全部
      </view>
      <view
        class="tab-item"
        :class="{ active: activeCategory === 'merchant' }"
        @click="switchCategory('merchant')"
      >
     商家
      </view>
    </view> -->

    <!-- 关注用户列表 -->
    <view class="follows-list">
      <!-- 加载状态 -->
      <view class="loading-state" v-if="loading">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载中...</text>
      </view>

      <!-- 空状态显示 -->
      <view class="empty-state" v-else-if="filteredFollowsList.length === 0">
        <image
          class="empty-icon"
          :src="
            showImg('/uploads/20250826/a4d605e82622223c270df0af4e378ab3.png')
          "
          mode="aspectFit"
        ></image>
        <text class="empty-text">{{
          searchText ? "未找到相关用户" : "暂无关注"
        }}</text>
        <text class="empty-desc">{{
          searchText ? "换个关键词试试吧" : "关注你感兴趣的人，获取更多精彩内容"
        }}</text>
      </view>
      <view
        class="follow-item"
        v-for="(item, index) in filteredFollowsList"
        :key="item.id"
      >
        <image
          class="user-avatar"
          :src="
            item.followUserHeadimg ||
            'https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png'
          "
          mode="aspectFill"
        ></image>
        <view class="user-info">
          <text class="user-name">{{ item.followUserNickname }}</text>
          <view class="update-time">
            {{ item.formatTime }}
          </view>
        </view>
        <view class="action-buttons">
          <view class="follow-status-btn"> 已关注 </view>
          <view class="more-options" @click="showOptions(item)">
            <text class="more-dots">•••</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 推荐用户分隔线 -->
    <view class="divider-line" v-if="false"></view>

    <!-- 推荐用户区域 -->
    <view class="recommend-section" v-if="false">
      <view class="recommend-header">
        <view
          class="recommend-title"
          style="display: flex; align-items: center"
        >
          你可能感兴趣的人
          <image
            style="width: 30rpx; height: 30rpx; margin-left: 10rpx"
            :src="
              showImg('/uploads/20250826/f1422cbef4c33e8c21d9e7e805c8bad9.png')
            "
          ></image>
        </view>
        <view class="close-btn" @click="closeRecommend">
          <text class="close-text">关闭</text>
        </view>
      </view>

      <view class="recommend-list">
        <view
          class="recommend-item"
          v-for="(item, index) in recommendList"
          :key="item.id"
        >
          <image
            class="user-avatar"
            src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png"
            mode="aspectFill"
          ></image>
          <view class="user-info">
            <text class="user-name">{{ item.name }}</text>
            <text class="user-desc">{{ item.description }}</text>
          </view>
          <view class="action-buttons">
            <view class="follow-btn" @click="followUser(item)"> 关注 </view>
            <view class="dismiss-btn" @click="dismissUser(item)">
              <text class="dismiss-text">×</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "FollowTab",
  data() {
    return {
      searchText: "",
      activeCategory: "all",
      followsList: [],
      recommendList: [
        {
          id: 101,
          name: "颜真卿",
          avatar: "/uploads/20250826/avatar1.png",
          description: "介绍介绍介绍",
        },
        {
          id: 102,
          name: "颜真卿",
          avatar: "/uploads/20250826/avatar1.png",
          description: "介绍介绍介绍",
        },
      ],
      // 分页相关数据
      pageNum: 1,
      pageSize: 10,
      loading: false,
      hasMore: true,
      totalCount: 0,
    };
  },
  computed: {
    filteredFollowsList() {
      // 直接返回关注列表，搜索过滤已由后端处理
      return this.followsList;
    },
  },
  mounted() {
    // 组件挂载时获取关注列表
    this.getFollowList();
  },
  // 监听页面滚动到底部事件
  onReachBottom() {
    this.loadMoreFollows();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.getFollowList();
  },
  methods: {
    handleSearch() {
      // 调用接口进行搜索
      this.getFollowList();
    },

    toggleSort() {
      // 切换排序方式
      uni.showToast({
        title: "排序功能开发中",
        icon: "none",
      });
    },

    switchCategory(category) {
      this.activeCategory = category;
    },

    // 获取关注列表数据
    getFollowList(refresh = true) {
      let token = uni.getStorageSync("token1");
      if (!token) {
        uni.showToast({
          title: "请先登录",
          icon: "none",
        });
        uni.navigateTo({
          url: "/pages/login/login",
        });
        return;
      }
      if (this.loading) return;

      if (refresh) {
        this.pageNum = 1;
        this.hasMore = true;
      }

      this.loading = true;
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };

      // 如果有搜索文本，添加到请求参数中
      if (this.searchText.trim()) {
        params.followUserNickname = this.searchText.trim();
      }

      this.Post(params, "/framework/follow/followList", "DES")
        .then((res) => {
          if (res.code === 200 && res.rows) {
            const newItems = res.rows || [];

            if (this.pageNum === 1) {
              // 首次加载或刷新
              this.followsList = newItems;
              this.totalCount = res.total || 0;
            } else {
              // 加载更多
              this.followsList.push(...newItems);
            }

            // 判断是否还有更多数据
            this.hasMore = newItems.length === this.pageSize;
          } else {
            uni.showToast({
              title: res.msg || "获取关注列表失败",
              icon: "none",
            });
          }
        })
        .catch((error) => {
          console.error("获取关注列表失败:", error);
          uni.showToast({
            title: "加载失败，请重试",
            icon: "none",
          });
        })
        .finally(() => {
          this.loading = false;
          uni.stopPullDownRefresh();
        });
    },

    // 加载更多关注数据
    loadMoreFollows() {
      if (!this.loading && this.hasMore) {
        this.pageNum++;
        this.getFollowList(false);
      }
    },

    showOptions(item) {
      uni.showActionSheet({
        itemList: ["取消关注"],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              this.unfollowUser(item);
              break;
            case 1:
              this.reportUser(item);
              break;
            case 2:
              this.blockUser(item);
              break;
          }
        },
      });
    },

    unfollowUser(item) {
      uni.showModal({
        title: "提示",
        content: "确定要取消关注该用户吗？",
        success: (res) => {
          if (res.confirm) {
            // 调用取消关注接口
            this.Post(
              {
                followUserId: item.followUserId,
                type: 2, // 2表示取消关注
              },
              "/framework/follow/followUser",
              "DES"
            )
              .then((res) => {
                if (res.code === 200) {
                  // 从列表中移除
                  const index = this.followsList.findIndex(
                    (user) => user.id === item.id
                  );
                  if (index > -1) {
                    this.followsList.splice(index, 1);
                    this.totalCount--;
                  }

                  uni.showToast({
                    title: "已取消关注",
                    icon: "success",
                  });
                } else {
                  uni.showToast({
                    title: res.msg || "取消关注失败",
                    icon: "none",
                  });
                }
              })
              .catch((error) => {
                console.error("取消关注失败:", error);
                uni.showToast({
                  title: "操作失败，请重试",
                  icon: "none",
                });
              });
          }
        },
      });
    },

    reportUser(item) {
      uni.showToast({
        title: "举报功能开发中",
        icon: "none",
      });
    },

    blockUser(item) {
      uni.showToast({
        title: "拉黑功能开发中",
        icon: "none",
      });
    },

    followUser(item) {
      // 添加到关注列表
      this.followsList.unshift({
        id: item.id,
        name: item.name,
        avatar: item.avatar,
        newItems: 0,
        category: "user",
      });

      // 从推荐列表移除
      const index = this.recommendList.findIndex((user) => user.id === item.id);
      if (index > -1) {
        this.recommendList.splice(index, 1);
      }

      uni.showToast({
        title: "关注成功",
        icon: "success",
      });
    },

    dismissUser(item) {
      const index = this.recommendList.findIndex((user) => user.id === item.id);
      if (index > -1) {
        this.recommendList.splice(index, 1);
        uni.showToast({
          title: "已移除推荐",
          icon: "success",
        });
      }
    },

    closeRecommend() {
      this.recommendList = [];
      uni.showToast({
        title: "已关闭推荐",
        icon: "success",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.follow-tab-container {
  background: #fff;
}

/* 搜索栏 */
.search-section {
  padding: 32rpx;
  background: #fff;
}

.search-bar {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 40rpx;
  padding: 0 32rpx;
  height: 80rpx;

  .search-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 16rpx;
    color: #999;
  }

  .search-input {
    flex: 1;
    font-size: 28rpx;
    color: #333;

    &::placeholder {
      color: #999;
    }
  }
}

/* 关注标题和排序 */
.follows-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  padding: 0 32rpx 24rpx;
  margin-bottom: 20rpx;

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

  .sort-option {
    display: flex;
    align-items: center;

    .sort-text {
      font-size: 28rpx;
      color: #000000;
      margin-right: 8rpx;
    }

    .sort-arrow {
      width: 9rpx;
      height: 24rpx;
    }
  }
}

/* 分类导航 */
.category-tabs {
  display: flex;
  padding: 0 32rpx 32rpx;
  gap: 16rpx;

  .tab-item {
    border-radius: 32rpx;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15rpx 30rpx;
    font-size: 28rpx;
    color: #000000;
    font-weight: bold;

    &.active {
      background: #00ffff;
      color: #000000;
    }
  }
}

/* 关注用户列表 */
.follows-list {
  padding: 0 32rpx;

  /* 加载状态样式 */
  .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60rpx 0;

    .loading-spinner {
      width: 60rpx;
      height: 60rpx;
      border: 4rpx solid #f3f3f3;
      border-top: 4rpx solid #00ffff;
      border-radius: 50%;
      margin-bottom: 20rpx;
      animation: spin 1s linear infinite;
    }

    .loading-text {
      font-size: 28rpx;
      color: #999;
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* 空状态样式 */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 0;

    .empty-icon {
      width: 120rpx;
      height: 120rpx;
      margin-bottom: 30rpx;
      opacity: 0.5;
    }

    .empty-text {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 16rpx;
    }

    .empty-desc {
      font-size: 26rpx;
      color: #999;
      text-align: center;
      max-width: 80%;
    }
  }

  .follow-item {
    display: flex;
    align-items: center;
    padding: 32rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .user-avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 24rpx;
    }

    .user-info {
      flex: 1;

      .user-name {
        display: block;
        font-size: 30rpx;
        font-weight: 500;
        color: #000000;
        margin-bottom: 8rpx;
      }

      .update-tag {
        display: inline-block;
        background: #f8f9fa;
        border-radius: 16rpx;
        padding: 10rpx 12rpx;
        font-size: 24rpx;
        color: #666;
      }

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

    .action-buttons {
      display: flex;
      align-items: center;
      gap: 16rpx;

      .follow-status-btn {
        border-radius: 24rpx;
        padding: 12rpx 24rpx;
        border: 2rpx solid #e5e5e5;
        font-size: 26rpx;
        color: #666;
      }

      .more-options {
        padding: 8rpx;

        .more-dots {
          font-size: 24rpx;
          color: #000;
          letter-spacing: 2rpx;
        }
      }
    }
  }
}

/* 分隔线 */
.divider-line {
  height: 1rpx;
  background: #f0f0f0;
  margin: 32rpx 0;
}

/* 推荐用户区域 */
.recommend-section {
  padding: 0 32rpx;

  .recommend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;

    .recommend-title {
      font-size: 28rpx;
      font-weight: 500;
      color: #666666;
      margin-right: 10rpx;
    }

    .close-btn {
      padding: 8rpx 16rpx;

      .close-text {
        font-size: 28rpx;
        color: #666;
      }
    }
  }

  .recommend-list {
    .recommend-item {
      display: flex;
      align-items: center;
      padding: 32rpx 0;
      border-bottom: 1rpx solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .user-avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-right: 24rpx;
      }

      .user-info {
        flex: 1;

        .user-name {
          display: block;
          font-size: 30rpx;
          font-weight: 500;
          color: #333;
          margin-bottom: 8rpx;
        }

        .user-desc {
          font-size: 26rpx;
          color: #999;
        }
      }

      .action-buttons {
        display: flex;
        align-items: center;
        gap: 16rpx;

        .follow-btn {
          border: 2rpx solid #00ffff;
          border-radius: 24rpx;
          padding: 12rpx 24rpx;
          font-size: 26rpx;
          color: #000;
          font-weight: bold;
        }

        .dismiss-btn {
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          background: #f8f9fa;
          display: flex;
          align-items: center;
          justify-content: center;

          .dismiss-text {
            font-size: 32rpx;
            color: #999;
            font-weight: 300;
          }
        }
      }
    }
  }
}
</style>
