<template>
  <div class="historic-data-container">
    <div class="echarts-container">
      <customEcharts></customEcharts>
    </div>
    <div class="header">
      <!-- 标题区域 -->
      <div class="title-section">
        <div class="title-decoration"></div>
        <div class="title-text">{{ t("historic_stock.title") }}</div>
      </div>
    </div>

    <div class="filter-container">
      <span class="range-label">{{ t("historic_stock.range") }}</span>
      <div class="filter-row">
        <div
          v-for="option in durationOptions"
          :key="option.key"
          class="filter-option"
          :class="{ active: state.selectedDuration === option.key }"
          @click="handleDurationChange(option.key)"
        >
          {{ option.label }}
        </div>
      </div>
    </div>
    <!-- reports-table from annualreports -->
    <div class="reports-table">
      <div class="table-container">
        <div class="table-header">
          <div
            class="column"
            v-for="col in columns"
            :key="col.key"
            :style="{
              width: col.width ? col.width + 'px' : 'auto',
              flex: col.width ? '0 0 ' + col.width + 'px' : '1 0 116px',
              'text-align': col.align,
            }"
          >
            {{ col.title }}
          </div>
        </div>
        <div class="reports-list">
          <div
            class="table-row"
            v-for="(row, index) in paginatedData"
            :key="index"
          >
            <div
              class="column"
              v-for="col in columns"
              :key="col.key"
              :style="{
                width: col.width ? col.width + 'px' : 'auto',
                flex: col.width ? '0 0 ' + col.width + 'px' : '1 0 116px',
                'text-align': col.align,
              }"
            >
              <span
                v-if="col.key === 'change'"
                :style="{
                  color:
                    parseFloat(row.change) < 0
                      ? '#cf3050'
                      : parseFloat(row.change) > 0
                      ? '#18a058'
                      : '',
                }"
              >
                {{ row[col.key] }}
              </span>
              <span v-else>
                {{ row[col.key] }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- pagination-container from annualreports -->
    <div class="pagination-container">
      <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 4.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>{{
            t("historic_stock.pagination.perPage", { size: state.pageSize })
          }}</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, 50, 100, 500, 1000]"
              :key="size"
              class="page-size-option"
              :class="{ active: state.pageSize === size }"
              @click="handlePageSizeChange(size)"
            >
              {{ t("historic_stock.pagination.perPage", { size: size }) }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination-info">
      {{
        t("historic_stock.pagination.displaying", {
          start: displayRange.start,
          end: displayRange.end,
          total: state.tableData.length,
        })
      }}
    </div>

    <!-- <div class="back-to-top-link">
      <a href="#" @click.prevent="scrollToTop">
        Back to Top
        <n-icon><arrow-up-outline /></n-icon>
      </a>
    </div> -->
  </div>
</template>

<script setup>
import { NDropdown, NIcon } from "naive-ui";
import { reactive, onMounted, h, computed, ref, watch, onUnmounted } from "vue";
import axios from "axios";
import { ChevronDownOutline, ArrowUpOutline } from "@vicons/ionicons5";
import defaultTableData from "../data";
import customEcharts from "@/components/customEcharts/index.vue";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();

// 数据筛选选项
const periodOptions = computed(() => [
  { label: t("historic_stock.daily"), key: "Daily" },
  { label: t("historic_stock.weekly"), key: "Weekly" },
  { label: t("historic_stock.monthly"), key: "Monthly" },
  { label: t("historic_stock.quarterly"), key: "Quarterly" },
  { label: t("historic_stock.annual"), key: "Annual" },
]);

const durationOptions = computed(() => [
  { label: t("historic_stock.duration.3_months"), key: "3 Months" },
  { label: t("historic_stock.duration.6_months"), key: "6 Months" },
  { label: t("historic_stock.duration.ytd"), key: "Year to Date" },
  { label: t("historic_stock.duration.1_year"), key: "1 Year" },
  { label: t("historic_stock.duration.5_years"), key: "5 Years" },
  { label: t("historic_stock.duration.10_years"), key: "10 Years" },
]);

// 分页大小选项
const pageSizeOptions = [
  { label: "10", key: 10 },
  { label: "50", key: 50 },
  { label: "100", key: 100 },
  { label: "500", key: 500 },
  { label: "1000", key: 1000 },
];

const state = reactive({
  selectedPeriod: "Daily",
  selectedDuration: "6 Months",
  tableData: [],
  currentPage: 1,
  pageSize: 10,
  gotoPage: 1,
});

const showPageSizeMenu = ref(false);

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(state.tableData.length / state.pageSize);
});

// 计算当前页的数据
const paginatedData = computed(() => {
  const start = (state.currentPage - 1) * state.pageSize;
  const end = start + state.pageSize;
  return state.tableData.slice(start, end);
});

// 表格列定义
const columns = computed(() => [
  {
    title: t("historic_stock.date"),
    key: "date",
    align: "left",
    fixed: "left",
    width: 152,
  },
  {
    title: t("historic_stock.open"),
    key: "open",
    align: "center",
    width: 116,
  },
  {
    title: t("historic_stock.high"),
    key: "high",
    align: "center",
    width: 116,
  },
  {
    title: t("historic_stock.low"),
    key: "low",
    align: "center",
    width: 116,
  },
  {
    title: t("historic_stock.close"),
    key: "close",
    align: "center",
    width: 116,
  },
  {
    title: t("historic_stock.adj_close"),
    key: "adjClose",
    align: "center",
    width: 116,
  },
  {
    title: t("historic_stock.change"),
    key: "change",
    align: "center",
    width: 116,
  },
  {
    title: t("historic_stock.volume"),
    key: "volume",
    align: "center",
    width: 116,
  },
]);

// 处理下拉选项变更
const handlePeriodChange = (key) => {
  state.selectedPeriod = key;
  if (key === "Annual") {
    handleDurationChange("Full History");
    return;
  }
  if (key === "Monthly") {
    handleDurationChange("10 Years");
    return;
  }
  if (key === "Quarterly") {
    handleDurationChange("10 Years");
    return;
  }
  getPageData();
};

const handleDurationChange = (key) => {
  state.selectedDuration = key;
  state.currentPage = 1;
  getPageData();
};

const displayRange = computed(() => {
  const start = (state.currentPage - 1) * state.pageSize + 1;
  const end = Math.min(
    state.currentPage * state.pageSize,
    state.tableData.length
  );
  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 handlePageSizeChange = (size) => {
  state.pageSize = size;
  state.currentPage = 1; // 重置到第一页
};

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 scrollToTop = () => {
  // 尝试多种方法
  // 1. 使用document.body
  document.body.scrollTop = 0;
  // 2. 使用document.documentElement (HTML元素)
  document.documentElement.scrollTop = 0;
  // 3. 使用scrollIntoView
  document.querySelector(".historic-data-container").scrollIntoView({
    behavior: "smooth",
    block: "start",
  });
};
onMounted(() => {
  getPageData();
  document.addEventListener("click", handleClickOutside);
});

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

const handleClickOutside = (event) => {
  if (!event.target.closest(".page-size-selector")) {
    showPageSizeMenu.value = false;
  }
};

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

const getPageDefaultData = async () => {
  try {
    let url =
      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M";
    const res = await axios.get(url);
    let originalData = res.data.data;

    // 转换为日期格式："Nov 26, 2024"
    let calcApiData = originalData.map((item) => [
      new Date(item[0]).toLocaleDateString("en-US", {
        month: "short",
        day: "numeric",
        year: "numeric",
      }),
      item[1],
    ]);
    // console.log('接口数据', calcApiData)

    // 使用API数据更新defaultTableData中的close和adjClose值
    const updatedTableData = defaultTableData.map((tableItem) => {
      // 查找对应日期的API数据
      const matchedApiData = calcApiData.find(
        (apiItem) => apiItem[0] === tableItem.date
      );

      if (matchedApiData) {
        // 更新close和adjClose值
        return {
          ...tableItem,
          close: matchedApiData[1].toFixed(2),
          adjClose: matchedApiData[1].toFixed(2),
        };
      }
      return tableItem;
    });

    state.tableData = updatedTableData;
  } catch (error) {
    // console.error('获取数据失败', error)
  }
};
const getPageData = async () => {
  let range = "";
  let now = new Date();
  const last = new Date(now);
  last.setMonth(now.getMonth() - 6);
  let fromDate = last;
  let toDate =
    now.getFullYear() +
    "-" +
    String(now.getMonth() + 1).padStart(2, "0") +
    "-" +
    String(now.getDate()).padStart(2, "0");
  if (state.selectedDuration === "3 Months") {
    range = "3M";
    const last = new Date(now);
    last.setMonth(now.getMonth() - 3);
    fromDate = last;
  } else if (state.selectedDuration === "6 Months") {
    range = "6M";
    const last = new Date(now);
    last.setMonth(now.getMonth() - 6);
    fromDate = last;
  } else if (state.selectedDuration === "Year to Date") {
    range = "YTD";
    fromDate = new Date(now.getFullYear(), 0, 1);
  } else if (state.selectedDuration === "1 Year") {
    range = "1Y";
    const last = new Date(now);
    last.setFullYear(now.getFullYear() - 1);
    fromDate = last;
  } else if (state.selectedDuration === "5 Years") {
    range = "5Y";
    const last = new Date(now);
    last.setFullYear(now.getFullYear() - 5);
    fromDate = last;
  } else if (state.selectedDuration === "10 Years") {
    range = "10Y";
    const last = new Date(now);
    last.setFullYear(now.getFullYear() - 10);
    fromDate = last;
  } else if (state.selectedDuration === "Full History") {
    range = "Max";
    fromDate = new Date("2009-10-07");
  }
  let finalFromDate =
    fromDate.getFullYear() +
    "-" +
    String(fromDate.getMonth() + 1).padStart(2, "0") +
    "-" +
    String(fromDate.getDate()).padStart(2, "0");
  let url =
    "https://common.szjixun.cn/api/stock/history/list?from=" +
    finalFromDate +
    "&to=" +
    toDate;
  const res = await axios.get(url);
  if (res.status === 200) {
    if (res.data.status === 0) {
      // 转换为日期格式："Nov 26, 2024"
      let resultData = res.data.data.map((item) => {
        return {
          date: new Date(item.date.replace(/-/g, "/")).toLocaleDateString(
            "en-US",
            {
              month: "short",
              day: "numeric",
              year: "numeric",
            }
          ),
          open: item.open != null ? Number(item.open).toFixed(2) : "",
          high: item.high != null ? Number(item.high).toFixed(2) : "",
          low: item.low != null ? Number(item.low).toFixed(2) : "",
          close: item.close != null ? Number(item.close).toFixed(2) : "",
          adjClose: item.close != null ? Number(item.close).toFixed(2) : "",
          change:
            item.changePercent != null
              ? Number(item.changePercent).toFixed(2) + "%"
              : "",
          volume: item.volume,
        };
      });
      state.tableData = resultData;
    }
  }
};
</script>

<style scoped lang="scss">
.historic-data-container {
  width: 343 * 5.12px;
  margin: 0 auto;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 40 * 2.5 * 5.12px;
      font-weight: bold;
      margin: 0;
    }
  }

  .filter-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8 * 5.12px;
    padding: 0 16 * 5.12px;
    margin-bottom: 32 * 5.12px;
    flex-wrap: wrap;
    gap: 10 * 5.12px;

    .range-label {
      font-family: "PingFang SC", sans-serif;
      font-weight: 400;
      font-size: 14 * 5.12px;
      line-height: 1.4;
      letter-spacing: 0.48 * 5.12px;
      color: #455363;
    }

    .filter-row {
      width: 311 * 5.12px;
      display: flex;
      flex-wrap: wrap;
      column-gap: 16 * 5.12px;
      row-gap: 8 * 5.12px;
    }

    .filter-option {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 34 * 5.12px;
      border-radius: 3 * 5.12px;
      background-color: #efefef;
      cursor: pointer;
      font-family: "PingFang SC", sans-serif;
      font-weight: 400;
      font-size: 14 * 5.12px;
      line-height: 1.4;
      color: #000000;
      transition: all 0.2s ease;
      width: 93 * 5.12px;

      &:hover {
        background-color: #e0e0e0;
      }

      &.active {
        background-color: #ff7bac;
        color: #ffffff;
      }
    }
  }
  .back-to-top-link {
    display: flex;
    justify-content: center;
    margin-top: 16 * 5.12px;

    a {
      display: flex;
      align-items: center;
      gap: 5 * 5.12px;
      color: #2563eb;
      font-size: 20 * 5.12px;
      font-weight: bold;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.reports-table {
  width: 100%;
  background: #ffffff;
  border-radius: 16 * 5.12px;
  box-shadow: 0 * 5.12px 3 * 5.12px 14 * 5.12px 0 * 5.12px rgba(0, 0, 0, 0.16);
  padding: 16 * 5.12px;
}

.table-container {
  width: 100%;
  overflow-x: auto;
}

.table-container::-webkit-scrollbar {
  height: 8 * 5.12px;
}

.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4 * 5.12px;
}

.table-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4 * 5.12px;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: #fff0f5;
  cursor: pointer;
}
.column {
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14 * 5.12px;
  line-height: 1.4;
  letter-spacing: 0.48 * 5.12px;
  color: #455363;
  padding: 16 * 5.12px;
  position: relative;
  font-variant-numeric: tabular-nums; /* 让数字等宽对齐 */
}
.table-header {
  display: flex;
  border-radius: 8 * 5.12px;
  margin-bottom: 4 * 5.12px;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 2;

  .column {
    background: #fff0f5;
    font-family: "PingFang SC", sans-serif;
    font-weight: 500;
    font-size: 14 * 5.12px;
    line-height: 1.4;
    letter-spacing: 0.48 * 5.12px;
    color: #000000;
  }
}

.table-row {
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 8 * 5.12px;
  &:hover .column {
    background: #fff8fb;
  }

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

  &:nth-child(even) {
    margin: 4 * 5.12px 0;
  }
}

.reports-list {
  display: flex;
  flex-direction: column;
  gap: 4 * 5.12px;
}

.table-row .column:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 40 * 5.12px;
  border-right: 1 * 5.12px dashed #e0e0e6;
}

.table-header .column:first-child {
  border-radius: 8 * 5.12px 0 0 8 * 5.12px;
}
.table-header .column:last-child,
.table-row .column:last-child {
  border-radius: 0 8 * 5.12px 8 * 5.12px 0;
}

.table-row .column:first-child {
  background: #ffffff;
}

.table-row:hover .column:first-child {
  background: #fff8fb;
}

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

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

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

.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.4;
  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.4;
  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.4;
  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: 5 * 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.4;
  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.4;
  color: #455363;
  margin-right: 16 * 5.12px;
}

.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.4;
  color: #455363;
  text-align: center;

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

.title-section {
  display: flex;
  flex-direction: column;
  gap: 16 * 5.12px;
  margin-bottom: 32 * 5.12px;
  margin-top: 43 * 5.12px;
  padding: 0 16 * 5.12px;
}

.title-decoration {
  width: 58 * 5.12px;
  height: 7 * 5.12px;
  background: #ff7bac;
  margin: auto 0;
  margin-top: 0;
}

.title-text {
  font-family: "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 24 * 5.12px;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: #000000;
}
</style>
