<template>
  <div class="press-releases-page">
    <div class="title-section">
      <div class="title-decoration"></div>
      <div class="title">
        {{ t("press_releases.title") }}
      </div>
    </div>
    <div class="search-container">
      <div class="search-select" @click="openYearPicker">
        <div class="search-select-label">Year</div>
        <div class="search-select-icon">
          <span class="selected-year-label">{{ selectedYearLabel }}</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="10"
            height="10"
            viewBox="0 0 10 10"
            fill="none"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M2.58882 9.69047C2.38633 9.48798 2.36383 9.17365 2.52132 8.9463L2.58882 8.86552L6.45447 5.00022L2.58882 1.13492C2.38633 0.932428 2.36383 0.618098 2.52132 0.390748L2.58882 0.309958C2.79132 0.107469 3.10565 0.0849685 3.33299 0.242458L3.41378 0.309958L7.69156 4.58774C7.89405 4.79023 7.91655 5.10456 7.75906 5.33191L7.69156 5.4127L3.41378 9.69047C3.18597 9.91828 2.81663 9.91828 2.58882 9.69047Z"
              fill="black"
            />
          </svg>
        </div>
      </div>
      <input
        v-model="state.inputValue"
        type="text"
        :placeholder="t('press_releases.search.placeholder')"
        class="search-input"
      />
      <button @click="handleSearch" class="search-button">
        {{ t("press_releases.search.button") }}
      </button>
    </div>
    <div class="reports-list">
      <div
        v-for="(item, idx) in state.filterNewsData"
        :key="idx"
        class="news-item table-row"
      >
        <div class="content">
          <div class="file-content">
            <div class="file-info">
              <div class="vertical-line"></div>
              <div
                class="news-item-title text-[#000] cursor-pointer"
                style="
                  word-break: break-all;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  line-clamp: 1;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
                @click="handleNewClick(item)"
              >
                {{ item.title }}
              </div>
              <svg
                class="arrow-icon"
                width="7"
                height="14"
                viewBox="0 0 7 14"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                @click="handleNewClick(item)"
              >
                <path
                  d="M1 1L6 7L1 13"
                  stroke="#FF7BAC"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </div>
            <n-tooltip trigger="hover" :disabled="true" width="trigger">
              <template #trigger>
                <div
                  :ref="(el) => setTitleRef(el, idx)"
                  class="news-item-content file-description"
                  style="
                    word-break: break-all;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                >
                  {{ item.summary }}
                </div>
              </template>
              <div slot="content">
                {{ item.summary }}
              </div>
            </n-tooltip>
            <div class="download-section">
              <div class="news-item-date">{{ item.date }}</div>
            </div>
          </div>
        </div>
        <div class="separator-line"></div>
      </div>
    </div>

    <!-- 分页器 -->
    <div class="pagination-container" v-if="state.total > 0">
      <div class="pagination-controls">
        <div class="pagination-buttons">
          <button
            class="page-btn-prev prev-btn"
            :disabled="state.currentPage === 1"
            @click="goToPrevPage"
          >
            <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
              <path
                d="M4 1L1 4.5L4 8"
                stroke="#455363"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </button>

          <template v-for="page in getVisiblePages()" :key="page">
            <button
              v-if="page !== '...'"
              class="page-btn-page"
              :class="{ active: page === state.currentPage }"
              @click="goToPage(page)"
            >
              {{ page }}
            </button>
            <button v-else class="page-btn-page disabled" disabled>...</button>
          </template>

          <button
            class="page-btn-next next-btn"
            :disabled="state.currentPage === totalPages"
            @click="goToNextPage"
          >
            <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
              <path
                d="M1 1L4 5L1 8"
                stroke="#455363"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </button>
        </div>
        <div class="page-size-selector" @click="togglePageSizeMenu">
          <span>{{ state.pageSize }}/page</span>
          <svg width="10" height="5" viewBox="0 0 10 5" fill="none">
            <path
              d="M1 1L5 4L9 1"
              stroke="#455363"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          <div v-if="showPageSizeMenu" class="page-size-menu">
            <div
              v-for="size in [10, 20, 50]"
              :key="size"
              class="page-size-option"
              :class="{ active: state.pageSize === size }"
              @click="changePageSize(size)"
            >
              {{ size }}/page
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination-info" v-if="state.total > 0">
      Displaying {{ displayRange.start }} - {{ displayRange.end }} of
      {{ state.total }} results
    </div>
  </div>
  <year-wheel-picker
    v-if="state.showYearPicker"
    v-model="state.selectedValue"
    :options="state.selectOptions"
    @close="closeYearPicker"
    @confirm="onYearConfirm"
  ></year-wheel-picker>
</template>

<script setup>
import customDefaultPage from "@/components/customDefaultPage/index.vue";
import YearWheelPicker from "@/components/YearWheelPicker.vue";
import {
  reactive,
  onMounted,
  watch,
  nextTick,
  ref,
  computed,
  onUnmounted,
} from "vue";
import { NInput, NButton, NTooltip } 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: "", //输入值
  filterNewsData: [],
  loading: false, //是否正在加载数据
  currentPage: 1, //当前页码
  pageSize: 10,
  total: 0,
  gotoPage: 1,
  showYearPicker: false,
});

const showPageSizeMenu = ref(false);

const titleRefs = ref([]);

const selectedYearLabel = computed(() => {
  const option = state.selectOptions.find(
    (opt) => opt.value === state.selectedValue
  );
  return option ? option.label : "";
});

const openYearPicker = () => {
  state.showYearPicker = true;
};

const closeYearPicker = () => {
  state.showYearPicker = false;
};

const onYearConfirm = (year) => {
  state.selectedValue = year;
  closeYearPicker();
};

const setTitleRef = (el, idx) => {
  if (el) titleRefs.value[idx] = el;
};

const checkAllTitleOverflow = () => {
  state.filterNewsData.forEach((item, idx) => {
    const el = titleRefs.value[idx];
    if (!el) {
      item.showTooltip = false;
      return;
    }
    item.showTooltip =
      el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
  });
};

onMounted(() => {
  getPressReleasesDisplay();
  document.addEventListener("click", handleClickOutside);

  nextTick(() => {
    checkAllTitleOverflow();
  });
});

onUnmounted(() => {
  document.removeEventListener("click", handleClickOutside);
});

watch(
  () => state.filterNewsData,
  () => {
    nextTick(() => {
      checkAllTitleOverflow();
    });
  },
  { deep: true }
);

// 获取新闻列表
const getPressReleasesDisplay = () => {
  state.loading = true;
  let url = `${import.meta.env.VITE_API_BASE_URL}/fiee/pressreleases/display`;
  let params = {
    query: state.inputValue,
    page: state.currentPage,
    pageSize: state.pageSize,
    timeStart: state.selectedValue
      ? state.selectedValue === "all_years"
        ? null
        : new Date(state.selectedValue).getTime()
      : null,
  };
  axios
    .post(url, params)
    .then((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",
            });
          });
          state.filterNewsData = res.data.data?.data || [];
          state.total = res.data.data?.total || 0;
        }
      }
    })
    .finally(() => {
      state.loading = false;
    });
};

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

watch(
  () => state.pageSize,
  () => {
    state.currentPage = 1;
    getPressReleasesDisplay();
  }
);

watch(
  () => state.currentPage,
  (newPage) => {
    state.gotoPage = newPage;
    getPressReleasesDisplay();
  }
);

const handleSearch = () => {
  state.currentPage = 1;
  getPressReleasesDisplay();
};

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

const totalPages = computed(() => {
  return Math.ceil(state.total / state.pageSize) || 1;
});

const displayRange = computed(() => {
  if (state.total === 0) return { start: 0, end: 0 };
  const start = (state.currentPage - 1) * state.pageSize + 1;
  const end = Math.min(state.currentPage * state.pageSize, state.total);
  return { start, end };
});

const goToPage = (page) => {
  if (page >= 1 && page <= totalPages.value) {
    state.currentPage = page;
  }
};

const goToPrevPage = () => {
  if (state.currentPage > 1) {
    state.currentPage--;
  }
};

const goToNextPage = () => {
  if (state.currentPage < totalPages.value) {
    state.currentPage++;
  }
};

const changePageSize = (size) => {
  state.pageSize = size;
};

const handleGoto = () => {
  const page = parseInt(state.gotoPage);
  if (page >= 1 && page <= totalPages.value) {
    state.currentPage = page;
  }
};

const togglePageSizeMenu = () => {
  showPageSizeMenu.value = !showPageSizeMenu.value;
};

const getVisiblePages = () => {
  const total = totalPages.value;
  if (total <= 4) {
    const pages = [];
    for (let i = 1; i <= total; i++) {
      pages.push(i);
    }
    return pages;
  }
  return [1, 2, "...", total];
};

// 点击外部关闭页面大小选择菜单
const handleClickOutside = (event) => {
  if (!event.target.closest || !event.target.closest(".page-size-selector")) {
    showPageSizeMenu.value = false;
  }
};
</script>

<style scoped lang="scss">
.press-releases-page {
  width: 343 * 5.12px;
  margin: 0 auto;
  background: #fff;
}
.title-section {
  display: flex;
  flex-direction: column;
  gap: 16 * 5.12px;
  padding: 0 16 * 5.12px;
}
.title-decoration {
  width: 58 * 5.12px;
  height: 7 * 5.12px;
  background: #ff7bac;
  margin-top: 43 * 5.12px;
}
.title {
  font-size: 32 * 5.12px;
  color: #000;
}

.search-container {
  margin-top: 32 * 5.12px;
  margin-bottom: 20 * 5.12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-flow: wrap;
  gap: 16 * 5.12px;
  padding: 0 16 * 5.12px;
}

.search-select {
  width: 100%;
  height: 34 * 5.12px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14 * 5.12px;
  color: #455363;
}
.search-select-icon {
  display: flex;
  align-items: center;
}
.search-input {
  width: 191 * 5.12px;
  height: 34 * 5.12px;
  padding: 7 * 5.12px 12 * 5.12px;
  border: 1 * 5.12px solid #e0e0e6;
  border-radius: 3 * 5.12px;
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14 * 5.12px;
  line-height: 1.375em;
  letter-spacing: 0.48 * 5.12px;
  color: #455363;

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

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

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

:deep(.n-button) {
  padding: 20 * 5.12px 16 * 5.12px;
  border-radius: 4 * 5.12px;
}
.search-button {
  width: 104 * 5.12px;
  height: 34 * 5.12px;
  padding: 7 * 5.12px 12 * 5.12px;
  background: #ff7bac;
  color: #fff;
  border: none;
  border-radius: 3 * 5.12px;
  cursor: pointer;
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14 * 5.12px;
  line-height: 1.375em;
  letter-spacing: 0.48 * 5.12px;
  &:hover {
    background: #ff7bac;
    color: #fff;
  }
}

.reports-list {
  display: flex;
  flex-direction: column;
  gap: 4 * 5.12px;
  background: #fff;
  width: 100%;
  margin-top: 40 * 5.12px;
}

.table-row {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 8 * 5.12px;

  // &:last-child {
  //   .separator-line {
  //     display: none;
  //   }
  // }
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16 * 5.12px;
}

.table-row .content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  &:hover {
    background: #fff8fb;
  }
}

.file-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.file-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16 * 5.12px;
  flex: 1;
}

.news-item-title {
  font-family: "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 14 * 5.12px;
  line-height: 1.375em;
  letter-spacing: 0.48 * 5.12px;
  color: #000000;
}

.arrow-icon {
  margin-right: 16 * 5.12px;
  flex-shrink: 0;
  cursor: pointer;
}

.vertical-line {
  width: 1 * 5.12px;
  height: 20 * 5.12px;
  background: #ff7bac;
  flex-shrink: 0;
}

.file-description {
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14 * 5.12px;
  line-height: 1.375em;
  letter-spacing: 0.48 * 5.12px;
  color: #455363;
  margin: 8 * 5.12px 0;
  padding: 0 16 * 5.12px;
}

.news-item-date {
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14 * 5.12px;
  line-height: 1.375em;
  letter-spacing: 0.48 * 5.12px;
  color: #455363;
}

.download-section {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0 16 * 5.12px;
  margin-bottom: 8 * 5.12px;
}

.separator-line {
  width: 100%;
  height: 1 * 5.12px;
  background: repeating-linear-gradient(
    to right,
    #e6eaee 0 * 5.12px,
    #e6eaee 2 * 5.12px,
    transparent 2 * 5.12px,
    transparent 4 * 5.12px
  );
  margin-top: 16 * 5.12px;
}

// 分页器样式
.pagination-container {
  display: flex;
  align-items: center;
  margin: 16 * 5.12px 0;
  justify-content: flex-end;
  padding: 0 16 * 5.12px;
  flex-wrap: wrap;
  gap: 16 * 5.12px;
}

.pagination-info {
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14 * 5.12px;
  line-height: 1.4375em;
  color: #455363;
  text-align: right;
  margin-bottom: 30 * 5.12px;
  padding: 0 16 * 5.12px;
  width: 100%;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8 * 5.12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pagination-buttons {
  display: flex;
  align-items: center;
  gap: 8 * 5.12px;
}

.page-btn-prev,
.page-btn-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28 * 5.12px;
  height: 28 * 5.12px;
  border: 1 * 5.12px solid #e0e0e6;
  border-radius: 3 * 5.12px;
  background: #ffffff;
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14 * 5.12px;
  line-height: 1.428em;
  color: #455363;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover:not(:disabled) {
    border-color: #ff7bac;
    color: #ff7bac;
  }

  &.active {
    border-color: #ff7bac;
    color: #ff7bac;
    background: #fff0f5;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &.disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}
.page-btn-page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28 * 5.12px;
  height: 28 * 5.12px;
  border-radius: 3 * 5.12px;
  background: #ffffff;
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14 * 5.12px;
  line-height: 1.428em;
  color: #455363;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;

  &:hover:not(:disabled) {
    border-color: #ff7bac;
    color: #ff7bac;
  }

  &.active {
    border-color: #ff7bac;
    color: #ff7bac;
    border: 1 * 5.12px solid #e0e0e6;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &.disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

.page-size-selector {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18 * 5.12px;
  padding: 4 * 5.12px 12 * 5.12px;
  height: 28 * 5.12px;
  border: 1 * 5.12px solid #e0e0e6;
  border-radius: 3 * 5.12px;
  background: #ffffff;
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14 * 5.12px;
  line-height: 1.428em;
  color: #455363;
  cursor: pointer;

  &:hover {
    border-color: #ff7bac;
  }
}

.page-size-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1 * 5.12px solid #e0e0e6;
  border-radius: 3 * 5.12px;
  box-shadow: 0 2 * 5.12px 8 * 5.12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-bottom: 2 * 5.12px;
}

.page-size-option {
  padding: 8 * 5.12px 12 * 5.12px;
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14 * 5.12px;
  line-height: 1.428em;
  color: #455363;
  cursor: pointer;
  transition: background-color 0.2s ease;

  &:hover {
    background: #fff0f5;
  }

  &.active {
    background: #fff0f5;
    color: #ff7bac;
  }
}

.goto-section {
  display: flex;
  align-items: center;
  gap: 8 * 5.12px;
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14 * 5.12px;
  line-height: 1.428em;
  color: #455363;
}

.goto-input {
  width: 60 * 5.12px;
  height: 28 * 5.12px;
  padding: 4 * 5.12px 12 * 5.12px;
  border: 1 * 5.12px solid #e0e0e6;
  border-radius: 3 * 5.12px;
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14 * 5.12px;
  line-height: 1.428em;
  color: #455363;
  text-align: center;

  &:focus {
    outline: none;
    border-color: #ff7bac;
  }
}

.selected-year-label {
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14 * 5.12px;
  line-height: 1.428em;
  color: #000;
  margin-right: 16 * 5.12px;
}
.search-select-label {
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14 * 5.12px;
  line-height: 1.428em;
  color: #000;
}
</style>
