<template>
  <div class="page-header-wrapper-grid-content-main custom-scrollbar">
    <!-- 数据统计卡片 -->
    <div class="data-stats animate-fade-in-up">
      <div class="stat-card glow-border">
        <div class="stat-number">{{ articleCount }}</div>
        <div class="stat-title">发布文章</div>
      </div>
      <div class="stat-card glow-border">
        <div class="stat-number">{{ viewCount }}</div>
        <div class="stat-title">文章浏览</div>
      </div>
      <div class="stat-card glow-border">
        <div class="stat-number">{{ likeCount }}</div>
        <div class="stat-title">获得点赞</div>
      </div>
      <div class="stat-card glow-border">
        <div class="stat-number">{{ matchs.length }}</div>
        <div class="stat-title">参与比赛</div>
      </div>
    </div>

    <a-row :gutter="24">
      <a-col :md="24" :lg="8">
        <a-card
          :bordered="false"
          class="hover-card animate-fade-in-up"
          style="animation-delay: 0.1s"
        >
          <div class="account-center-avatarHolder">
            <div class="avatar">
              <img
                src="https://onlinephoto.oss-cn-chengdu.aliyuncs.com/hangtian/touxiang.jpg"
                data-src="//www.cmstui.com/wp-content/themes/zibll/img/avatar-default.png"
                class="lazyload avatar avatar-id-1"
                alt="用户头像"
              />
            </div>
            <div class="username">{{ $store.state.user.userName }}</div>
            <div class="bio">{{ shenfen }}</div>
          </div>

          <a-divider />

          <div class="account-center-tags">
            <div class="tagsTitle">个人标签</div>
            <div>
              <template v-for="(tag, index) in tags">
                <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                  <a-tag
                    :key="tag"
                    :closable="index !== 0"
                    @close="() => handleTagClose(tag)"
                    >{{ `${tag.slice(0, 20)}...` }}</a-tag
                  >
                </a-tooltip>
                <a-tag
                  v-else
                  :key="tag"
                  :closable="index !== 0"
                  @close="() => handleTagClose(tag)"
                  >{{ tag }}</a-tag
                >
              </template>
              <a-input
                v-if="tagInputVisible"
                ref="tagInput"
                type="text"
                size="small"
                :style="{ width: '78px' }"
                :value="tagInputValue"
                @change="handleInputChange"
                @blur="handleTagInputConfirm"
                @keyup.enter="handleTagInputConfirm"
              />
              <a-tag
                v-else
                @click="showTagInput"
                style="background: #fff; borderstyle: dashed"
              >
                <a-icon type="plus" />添加标签
              </a-tag>
            </div>
          </div>

          <a-divider :dashed="true" />

          <div class="account-center-team">
            <div class="teamTitle">我的比赛</div>
            <a-empty v-if="matchs.length === 0" description="暂无参赛记录" />
            <a-spin :spinning="teamSpinning">
              <div class="members" v-for="(item, index) in matchs" :key="index">
                <a-card
                  class="match-card"
                  :bordered="false"
                  :bodyStyle="{ padding: '12px' }"
                >
                  <div class="match-title">
                    <a-icon
                      type="trophy"
                      :style="{ color: colors[index % colors.length] }"
                    />
                    <span>{{ item.competitionName }}</span>
                  </div>
                  <div class="match-info">
                    <a-tag :color="colors[index % colors.length]">
                      {{ item.competitionType }}
                    </a-tag>
                    <span class="match-date">{{
                      formatDate(item.registrationTime)
                    }}</span>
                  </div>
                </a-card>
              </div>
            </a-spin>
          </div>
        </a-card>
      </a-col>

      <a-col :md="24" :lg="16">
        <a-card
          class="animate-fade-in-up"
          style="animation-delay: 0.2s; width: 100%"
          :bordered="false"
          :tabList="tabListNoTitle"
          :activeTabKey="noTitleKey"
          @tabChange="(key) => handleTabChange(key, 'noTitleKey')"
        >
          <div v-if="noTitleKey === 'article'">
            <!-- 文章筛选和排序 -->
            <div class="article-filter">
              <a-radio-group
                v-model="articleFilter"
                buttonStyle="solid"
                @change="filterArticles"
              >
                <a-radio-button value="all">全部文章</a-radio-button>
                <a-radio-button value="hot">热门文章</a-radio-button>
                <a-radio-button value="recent">最近发布</a-radio-button>
              </a-radio-group>

              <a-button type="primary" icon="plus" @click="createNewArticle">
                发布文章
              </a-button>
            </div>

            <!-- 文章列表 -->
            <div class="article-list">
              <a-empty v-if="articles.length === 0" description="暂无文章" />
              <div v-else>
                <div
                  class="article-item"
                  v-for="(article, index) in articles"
                  :key="index"
                  @click="viewArticle(article.id)"
                >
                  <div class="article-cover">
                    <img :src="getArticleImage(article)" :alt="article.title" />
                  </div>
                  <div class="article-content">
                    <div class="article-title">{{ article.articleTitle }}</div>
                    <div
                      class="article-description"
                      v-html="getArticleExcerpt(article.articleContent)"
                    ></div>
                    <div class="article-meta">
                      <div class="article-date">
                        <a-icon type="calendar" />
                        {{ formatDate(article.publishTime) }}
                      </div>
                      <div class="article-stats">
                        <span
                          ><a-icon type="eye" />
                          {{ article.viewCount || 0 }}</span
                        >
                        <span style="margin-left: 16px"
                          ><a-icon type="like" />
                          {{ article.likeCount || 0 }}</span
                        >
                        <span style="margin-left: 16px"
                          ><a-icon type="message" />
                          {{ article.commentCount || 0 }}</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 分页 -->
              <div class="pagination-container" v-if="articles.length > 0">
                <a-pagination
                  :current="current"
                  :pageSize="pageSize"
                  :total="total"
                  @change="handlePageChange"
                  showQuickJumper
                  :showSizeChanger="true"
                  :pageSizeOptions="['6', '12', '24', '36']"
                  @showSizeChange="onShowSizeChange"
                />
              </div>
            </div>
          </div>

          <!-- 其他标签页内容 -->
          <div v-else-if="noTitleKey === 'app'">
            <a-empty description="功能开发中..." />
          </div>

          <div v-else-if="noTitleKey === 'project'">
            <a-empty description="功能开发中..." />
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import PageView from "../../../layouts/PageView.vue";
import RouteView from "../../../layouts/RouteView.vue";
import { AppPage, ArticlePage, ProjectPage } from "./page";
import { mapGetters } from "vuex";

export default {
  components: {
    RouteView,
    PageView,
    AppPage,
    ArticlePage,
    ProjectPage,
  },
  data() {
    return {
      userimg: this.$store.state.avatar,
      tags: ["技术爱好者", "前端开发", "生活记录"],
      tagInputVisible: false,
      tagInputValue: "",
      teamSpinning: true,
      shenfen: "",
      tabListNoTitle: [
        {
          key: "article",
          tab: "我的文章",
        },
        {
          key: "app",
          tab: "我的收藏",
        },
        {
          key: "project",
          tab: "我的评论",
        },
      ],
      noTitleKey: "article",
      matchs: [],
      colors: ["#f50", "#2db7f5", "#87d068", "#108ee9", "#722ed1"],

      // 文章相关数据
      articles: [],
      current: 1,
      pageSize: 6,
      total: 0,
      articleFilter: "all",

      // 统计数据
      articleCount: 0,
      viewCount: 0,
      likeCount: 0,
    };
  },
  computed: {
    ...mapGetters(["nickname", "avatar"]),
  },
  mounted() {
    // 设置用户身份
    if (this.$store.state.user.userPrivileges == 0) {
      this.shenfen = "管理员";
    } else if (this.$store.state.user.userPrivileges == 1) {
      this.shenfen = "教师";
    } else {
      this.shenfen = "学生";
    }

    // 获取比赛信息
    this.fetchCompetitions();

    // 获取文章列表
    this.fetchArticles();

    // 获取统计数据
    this.fetchStats();
  },
  methods: {
    // 获取比赛信息
    fetchCompetitions() {
      this.teamSpinning = true;
      this.$api
        .RegistrationAll()
        .then((res) => {
          this.matchs = res.data.filter((match) => {
            return match.studentId == this.$store.state.user.userId;
          });
          this.teamSpinning = false;
        })
        .catch((err) => {
          console.error("获取比赛信息失败:", err);
          this.teamSpinning = false;
        });
    },

    // 获取文章列表
    fetchArticles() {
      this.$api
        .AllArticle()
        .then((res) => {
          // 过滤出当前用户的文章
          const userArticles = res.data.filter((article) => {
            return article.userId === this.$store.state.user.userId;
          });

          // 根据筛选条件排序
          this.filterArticlesByCondition(userArticles);

          // 设置总数
          this.total = userArticles.length;
          this.articleCount = userArticles.length;

          // 计算总浏览量和点赞数
          this.calculateStats(userArticles);
        })
        .catch((err) => {
          console.error("获取文章列表失败:", err);
        });
    },

    // 根据筛选条件过滤文章
    filterArticlesByCondition(articles) {
      let filteredArticles = [...articles];

      // 应用筛选条件
      switch (this.articleFilter) {
        case "hot":
          // 按热度（浏览量）排序
          filteredArticles.sort(
            (a, b) => (b.viewCount || 0) - (a.viewCount || 0)
          );
          break;
        case "recent":
          // 按发布时间排序
          filteredArticles.sort(
            (a, b) => new Date(b.publishTime) - new Date(a.publishTime)
          );
          break;
        default:
          // 默认按发布时间排序
          filteredArticles.sort(
            (a, b) => new Date(b.publishTime) - new Date(a.publishTime)
          );
      }

      // 分页处理
      const startIndex = (this.current - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      this.articles = filteredArticles.slice(startIndex, endIndex);
    },

    // 计算统计数据
    calculateStats(articles) {
      this.viewCount = articles.reduce(
        (sum, article) => sum + (article.viewCount || 0),
        0
      );
      this.likeCount = articles.reduce(
        (sum, article) => sum + (article.likeCount || 0),
        0
      );
    },

    // 获取统计数据
    fetchStats() {
      // 如果有专门的API可以在这里调用
    },

    // 筛选文章
    filterArticles() {
      this.current = 1; // 重置页码
      this.fetchArticles();
    },

    // 分页处理
    handlePageChange(page) {
      this.current = page;
      this.fetchArticles();
    },

    // 每页显示数量变化
    onShowSizeChange(current, size) {
      this.current = 1;
      this.pageSize = size;
      this.fetchArticles();
    },

    // 获取文章封面图
    getArticleImage(article) {
      if (!article.articleContent) return require("@/assets/bg.svg");

      // 从文章内容中提取图片
      const imageRegex = /(http[s]?:\/\/[^(\s|")]+\.(png|jpg|jpeg|gif|webp))/gi;
      const matches = article.articleContent.match(imageRegex);

      // 如果找到图片，返回第一张
      if (matches && matches.length > 0) {
        return matches[0];
      }

      const randomSeed = Math.floor(Math.random() * 10000);

      // 如果没有找到匹配的图片，可以使用随机图片
      return "https://tu.ltyuanfang.cn/api/fengjing.php?" + randomSeed;
    },

    // 获取文章摘要
    getArticleExcerpt(content) {
      if (!content) return "";

      // 移除HTML标签
      const plainText = content.replace(/<[^>]+>/g, "");

      // 截取前100个字符作为摘要
      return (
        plainText.substring(0, 100) + (plainText.length > 100 ? "..." : "")
      );
    },

    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return "";

      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
        2,
        "0"
      )}-${String(date.getDate()).padStart(2, "0")}`;
    },

    // 查看文章详情
    viewArticle(id) {
      this.$router.push(`/community/pages?id=${id}`);
    },

    // 创建新文章
    createNewArticle() {
      this.$router.push("/write");
    },

    // 标签相关方法
    handleTabChange(key, type) {
      this[type] = key;
    },

    handleTagClose(removeTag) {
      const tags = this.tags.filter((tag) => tag !== removeTag);
      this.tags = tags;
    },

    showTagInput() {
      this.tagInputVisible = true;
      this.$nextTick(() => {
        this.$refs.tagInput.focus();
      });
    },

    handleInputChange(e) {
      this.tagInputValue = e.target.value;
    },

    handleTagInputConfirm() {
      const inputValue = this.tagInputValue;
      let tags = this.tags;
      if (inputValue && !tags.includes(inputValue)) {
        tags = [...tags, inputValue];
      }

      Object.assign(this, {
        tags,
        tagInputVisible: false,
        tagInputValue: "",
      });
    },
  },
};
</script>

<style lang="less" scoped>
/* 论坛个人中心美化样式 */

/* 整体页面背景 */
.page-header-wrapper-grid-content-main {
  width: 100%;
  min-height: 100vh;
  background-color: #f6f8fa;
  background-image: linear-gradient(
    to bottom,
    rgba(240, 244, 248, 0.8),
    rgba(255, 255, 255, 0.8)
  );
  padding: 24px;
}

/* 卡片通用样式 */
.ant-card {
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: all 0.4s ease;
  margin-bottom: 24px;
  border: none;
}

.ant-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

/* 左侧个人信息卡片 */
.account-center-avatarHolder {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 0 16px;
  position: relative;
}

/* 背景装饰 */
.account-center-avatarHolder::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(135deg, #3690cf, #2a78b8);
  z-index: 0;
  border-radius: 16px 16px 50% 50% / 16px 16px 25% 25%;
}

/* 头像样式 */
.account-center-avatarHolder .avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 24px;
  border: 5px solid #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: #fff;
  transition: all 0.3s ease;
}

.account-center-avatarHolder .avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.account-center-avatarHolder .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

.account-center-avatarHolder .avatar:hover img {
  transform: scale(1.1);
}

/* 用户名样式 */
.account-center-avatarHolder .username {
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

/* 身份标签 */
.account-center-avatarHolder .bio {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(54, 144, 207, 0.1);
  color: #3690cf;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

/* 分割线美化 */
.ant-divider {
  margin: 24px 0;
  border-color: rgba(0, 0, 0, 0.06);
}

.ant-divider-dashed {
  border-style: dashed;
  border-color: rgba(0, 0, 0, 0.09);
}

/* 标签区域 */
.account-center-tags {
  padding: 0 16px;
}

.account-center-tags .tagsTitle {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 16px;
  position: relative;
  padding-left: 12px;
}

.account-center-tags .tagsTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: #3690cf;
  border-radius: 2px;
}

/* 标签样式 */
.ant-tag {
  margin: 0 8px 8px 0;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 13px;
  border: none;
  background: #f0f2f5;
  color: #555;
  transition: all 0.3s;
}

.ant-tag:hover {
  background: #e6f7ff;
  color: #3690cf;
}

/* 新增标签按钮 */
.ant-tag-dashed {
  border: 1px dashed #d9d9d9;
  background: transparent;
  transition: all 0.3s;
}

.ant-tag-dashed:hover {
  border-color: #3690cf;
  color: #3690cf;
}

/* 比赛区域 */
.account-center-team {
  padding: 0 16px;
}

.account-center-team .teamTitle {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 16px;
  position: relative;
  padding-left: 12px;
}

.account-center-team .teamTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: #3690cf;
  border-radius: 2px;
}

/* 比赛卡片样式 */
.members {
  margin-bottom: 16px;
  transition: all 0.3s;
}

.members .ant-tag {
  display: inline-block;
  margin: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
}

.members .ant-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* 右侧选项卡样式 */
.ant-tabs-bar {
  border-bottom: none;
  margin-bottom: 24px;
}

.ant-tabs-nav {
  margin: 0 auto 16px;
  width: fit-content;
  background: #f5f5f5;
  border-radius: 50px;
  padding: 4px;
}

.ant-tabs-tab {
  margin: 0 !important;
  padding: 8px 24px !important;
  border-radius: 50px !important;
  transition: all 0.3s;
  font-weight: 500;
}

.ant-tabs-tab-active {
  background: #3690cf !important;
  color: white !important;
}

/* 文章列表样式 */
.article-list {
  padding: 16px;
}

.article-item {
  display: flex;
  margin-bottom: 20px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.article-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.article-cover {
  width: 200px;
  height: 134px;
  overflow: hidden;
}

.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.article-item:hover .article-cover img {
  transform: scale(1.1);
}

.article-content {
  flex: 1;
  padding: 16px;
  position: relative;
}

.article-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.article-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.article-meta {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

/* 数据统计卡片 */
.data-stats {
  display: flex;
  margin-bottom: 24px;
}

.stat-card {
  flex: 1;
  background: white;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin: 0 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.stat-number {
  font-size: 32px;
  font-weight: 600;
  color: #3690cf;
  margin-bottom: 8px;
}

.stat-title {
  font-size: 14px;
  color: #666;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .article-cover {
    width: 120px;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-number {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .article-item {
    flex-direction: column;
  }

  .article-cover {
    width: 100%;
    height: 180px;
  }

  .data-stats {
    flex-wrap: wrap;
  }

  .stat-card {
    flex: 0 0 calc(50% - 16px);
    margin-bottom: 16px;
  }
}

/* 悬浮效果 */
.hover-card {
  position: relative;
  overflow: hidden;
}

.hover-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(-100%) rotate(45deg);
  transition: transform 0.6s;
}

.hover-card:hover::after {
  transform: translateX(100%) rotate(45deg);
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease forwards;
}

/* 更多自定义样式 */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #3690cf;
}

/* 闪光边框效果 */
.glow-border {
  position: relative;
}

.glow-border::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #3690cf, #6dc6ff, #3690cf);
  background-size: 200% 200%;
  z-index: -1;
  border-radius: 18px;
  animation: glowingBorder 3s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glow-border:hover::before {
  opacity: 1;
}

@keyframes glowingBorder {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>
