<template>
  <div class="press-releases-page">
    <n-infinite-scroll :distance="0" @load="doLoadMore">
      <main class="p-[35px] max-w-[1200px] mx-auto">
        <div class="title mb-[20px]">
          {{ t('press_releases.title') }}
        </div>
        <div class="search-container">
          <n-select
            :options="state.selectOptions"
            v-model:value="state.selectedValue"
            class="search-select"
          />
          <n-input
            v-model:value="state.inputValue"
            type="text"
            :placeholder="t('press_releases.search.placeholder')"
            class="search-input"
          />
          <n-button
            type="primary"
            @click="handleSearch"
            class="search-button w-[60px]"
          >
            {{ t('press_releases.search.button') }}
          </n-button>
        </div>
        <div v-for="(item, idx) in state.filterNewsData" :key="idx">
          <div class="news-item mt-[10px]">
            <div class="news-item-date">{{ item.date }}</div>
            <div
              class="news-item-title text-[#0078d7] overflow-hidden whitespace-nowrap text-ellipsis cursor-pointer"
              @click="handleNewClick(item)"
            >
              {{ item.title }}
            </div>
            <div class="news-item-content">
              {{
                item.summary?.length > 199
                  ? item.summary.substring(0, 199) + '...'
                  : item.summary
              }}
            </div>
          </div>
        </div>
      </main>
    </n-infinite-scroll>
  </div>
</template>

<script setup>
import customDefaultPage from "@/components/customDefaultPage/index.vue";
import { reactive, onMounted, watch } from "vue";
import { NSelect, NInput, NButton, NInfiniteScroll } from "naive-ui";
import { useI18n } from "vue-i18n";
import axios from 'axios'

import { useRouter } from "vue-router";
const router = useRouter();
const { t } = useI18n();

const state = reactive({
  selectedValue: "all_years", //选中值
  selectOptions: [
    {
      label: "All Years",
      value: "all_years",
    },
    ...Array.from({ length: 2025 - 1990 + 1 }, (_, i) => {
      const year = 2025 - i;
      return { label: String(year), value: String(year) };
    }),
  ], //下拉选项
  inputValue: "", //输入值
  newsData: [
    {
      date: "June 3, 2025",
      title: "FiEE, Inc. seized market opportunities through 2025 Osaka Expo",
      content:
        "Hong Kong, 3 June 2025 — FiEE, Inc. (NASDAQ:MINM) (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions in the digital era, is pleased to announce significant business updates....",
    },
    {
      date: "June 2, 2025",
      title: "FiEE, Inc. Closes Its First Day of Trading on NASDAQ",
      content:
        "Hong Kong, 2 June 2025 — FiEE, Inc. (NASDAQ:MINM) (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions in the digital era, commenced...",
    },
    {
      date: "May 30, 2025",
      title: "FiEE, Inc. Announces Reinitiation of Trading on Nasdaq",
      content:
        "Hong Kong, May 30, 2025 — FiEE, Inc. (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions...",
    },
  ],
  filterNewsData: [],
  loading: false, //是否正在加载数据
  hasMore: true, //是否还有更多数据
  currentPage: 1, //当前页码
});

onMounted(() => {
  // state.filterNewsData = state.newsData;
  getPressReleasesDisplay()
});

// 获取新闻列表
const getPressReleasesDisplay = () => {
  let url = 'http://172.16.100.93:9020/api/fiee/pressreleases/display'
  let params = {
    query: state.inputValue,
    page: state.currentPage,
    pageSize: 10,
    timeStart: state.selectedValue
      ? state.selectedValue === 'all_years'
        ? null
        : new Date(state.selectedValue).getTime()
      : null,
  }
  // console.log(params)
  axios.post(url, params).then((res) => {
    // console.log(res)
    if (res.status === 200) {
      if (res.data.status === 0) {
        res.data.data?.data?.forEach((item) => {
          item.date = new Date(item.createdAt).toLocaleDateString('en-US', {
            month: 'short',
            day: 'numeric',
            year: 'numeric',
          })
        })
        if (state.currentPage === 1) {
          state.filterNewsData = res.data.data?.data || []
        } else {
          state.filterNewsData = [
            ...state.filterNewsData,
            ...(res.data.data?.data || []),
          ]
        }
        if (state.filterNewsData.length < (res.data.data?.total || 0)) {
          state.hasMore = true
        } else {
          state.hasMore = false
        }
      }
    }
  })
}

const handleFilter = () => {
  // 筛选逻辑
  let filteredData = [...state.newsData];

  // 按年份筛选
  if (state.selectedValue !== "all_years") {
    filteredData = filteredData.filter((item) => {
      // 从日期字符串中提取年份，假设日期格式为 "May 30, 2025"
      const dateMatch = item.date.match(/\b\d{4}\b/);
      if (dateMatch) {
        const year = dateMatch[0];
        return year === state.selectedValue;
      }
      return false;
    });
  }

  // 按输入内容进行模糊查询（title 和 content）
  if (state.inputValue && state.inputValue.trim() !== "") {
    const searchText = state.inputValue.toLowerCase().trim();
    filteredData = filteredData.filter((item) => {
      const titleMatch = item.title.toLowerCase().includes(searchText);
      const contentMatch = item.content.toLowerCase().includes(searchText);
      return titleMatch || contentMatch;
    });
  }

  state.filterNewsData = filteredData;
};

// 添加 watcher 来实现自动筛选
watch(
  () => [state.selectedValue, state.inputValue],
  () => {
    // handleFilter();
    state.currentPage = 1
    getPressReleasesDisplay()
  }
);

const handleSearch = () => {
  // 手动触发筛选（保留这个函数以保持兼容性）
  // handleFilter();
  state.currentPage = 1
  getPressReleasesDisplay()
  // console.log("筛选结果:", state.filterNewsData);
};

const handleNewClick = (item) => {
  router.push({
    path: "/news",
    query: {
      id: item.id,
    },
  });
};

//加载更多数据
const doLoadMore = () => {
  if (!state.hasMore || state.loading) {
    return
  }
  // console.log('触底了')
  state.loading = true
  state.currentPage++
  getPressReleasesDisplay().finally(() => {
    state.loading = false
  })
}
</script>

<style scoped lang="scss">
.title {
  font-size: 40px;
  color: #333;
}

.search-container {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.search-select {
  width: 7rem;
  :deep(.n-base-selection) {
    padding: 4px 0;
  }
}

.search-input {
  width: 240px;
}

:deep(.n-input) {
  .n-input__input {
    padding: 4px 0;
    // border: 1px solid #ccc;
    border-radius: 4px;
  }
}

:deep(.n-select) {
  .n-select__input {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
}

:deep(.n-button) {
  padding: 20px 16px;
  border-radius: 4px;
}
</style>
