<template>
  <div class="relative overflow-hidden z-[11] bg-[#ffffff]">
    <div class="fixed bottom-0 z-[] bg-[#ffffff]">
      <img
        src="@/assets/image/content/bg_27.png"
        class="w-[100vw] h-[611PX] relative"
        alt=""
      />
    </div>
    <div
      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[0]"
      style="width: 327px; pointer-events: none; mix-blend-mode: multiply"
    >
      <img src="@/assets/image/content/line375.png" class="w-[100%]" alt="" />
      <img
        src="@/assets/image/content/bg_25.png"
        class="w-[100vw] h-[611PX] relative"
        alt=""
      />
    </div>
    <div class="w-[327PX] mx-auto relative z-11">
      <div class="title mb-[50px] text-center text-left">
        <h1 style="font-size: 24px; margin-top: 60px">
          {{ $t("header_menu.corporate_information.governance") }}
        </h1>
      </div>
      <div
        v-for="(item, index) in state.list"
        :key="index"
        class="py-[8PX] px-[1PX] overflow-hidden border-0 border-b-[1px] border-[#E6EAEE] border-dashed"
      >
        <div
          class="flex justify-between items-center hover:bg-[#FFF8FB] min-h-[1px] h-[48PX]"
        >
          <div class="border-content text-[16PX] pl-[10PX] font-[500]">
            <n-tooltip
              trigger="hover"
              :disabled="!item.showTooltip"
              width="trigger"
            >
              <template #trigger>
                <div
                  :ref="(el) => setTitleRef(el, index)"
                  style="
                    font-size: 16px;
                    word-break: break-word;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                  class=""
                >
                  {{ item.title }}
                </div>
                <!-- <text> {{ item.date }}</text> -->
              </template>
              <div slot="content">
                {{ item.title }}
              </div>
            </n-tooltip>
          </div>
          <div
            class="flex items-center pr-[10PX] cursor-pointer"
            @click="handleViewDocument(item)"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="ml-3 -mr-1 h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="#FF7BAC"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 5l7 7-7 7"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, nextTick, watch } from "vue";
import axios from "axios";
import { NTooltip } from "naive-ui";

import quarterlyPdfone from "@/assets/file/FiEE, Inc._Audit Committee Charter.pdf";
import quarterlyPdftwo from "@/assets/file/FiEE, Inc. _Code of Business Conduct and Ethics.pdf";

import quarterlyPdfthree from "@/assets/file/FiEE, Inc._Compensation Committee Charter.pdf";

import quarterlyPdffour from "@/assets/file/FiEE, Inc. _Nominating and Corporate Governance Committee Charter.pdf";
import { useI18n } from "vue-i18n";

const { t, locale } = useI18n();

const state = reactive({
  list: [
    // {
    //   title: 'AUDIT COMMITTEE CHARTER',
    //   description:
    //     'Defines the purpose, composition, and responsibilities of the Audit Committee in overseeing financial reporting and disclosure.',
    //   url: quarterlyPdfone,
    //   date: 'May 30, 2025',
    // },
    // {
    //   title: 'CODE OF BUSINESS CONDUCT AND ETHICS',
    //   description:
    //     'Establishes the ethical standards and legal compliance expectations for all directors, officers and employees.',
    //   url: quarterlyPdftwo,
    //   date: 'May 30, 2025',
    // },
    // {
    //   title: 'COMPENSATION COMMITTEE CHARTER',
    //   description:
    //     'Outlines the duties and responsibilities for overseeing executive compensation and benefit plans.',
    //   url: quarterlyPdfthree,
    //   date: 'May 30, 2025',
    // },
    // {
    //   title: 'NOMINATING AND CORPORATE GOVERNANCE COMMITTEE CHARTER',
    //   description:
    //     'Provides the framework for director nominations and corporate governance matters.',
    //   url: quarterlyPdffour,
    //   date: 'May 30, 2025',
    // },
  ],
});

const titleRefs = ref([]);

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

const checkAllTitleOverflow = () => {
  state.list.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(() => {
  getGovernanceDisplay();
  nextTick(() => {
    checkAllTitleOverflow();
  });
});

watch(
  () => state.list,
  () => {
    nextTick(() => {
      checkAllTitleOverflow();
    });
  },
  { deep: true }
);
watch(
  () => locale.value,
  () => {
    getGovernanceDisplay();
  }
);

const map = {
  en: "enUS",
  ja: "jaJP",
  zh: "zhCN",
  "zh-TW": "zhTW",
};



//获取官网展示文档
const getGovernanceDisplay = () => {
  let url = `${import.meta.env.VITE_API_BASE_URL}/fiee/governance/display`;
  let params = { langType: map[locale.value] };
  axios
    .post(url, params)
    .then((res) => {
      // console.log(res)
      if (res.status === 200) {
        if (res.data.status === 0) {
          state.list = res.data.data.data || [];
        }
      }
    })
    .catch((err) => {
      // console.log(err)
    });
};

// 查看文档
const handleViewDocument = (item) => {
  // console.log(item)
  window.open(
    `${import.meta.env.VITE_PAGE_URL}/office?url=${
      item.attachment
    }&attachmentName=${item.attachmentName}`,
    "_blank"
  );
};
</script>

<style scoped lang="scss">
.border-content {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 1px;
    height: 20px;
    background: #ff7bac;
  }
}

/* 标题样式 */
.title h1 {
  position: relative;
  margin-left: 15px;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    width: 60px;
    height: 5px;
    background: #ff7bac;
  }

  &:hover::after {
    width: 120px;
  }
}

/* 卡片图标动画 */
.governance-icon {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.governance-card:hover .governance-icon {
  animation: float 2s ease-in-out infinite;
  box-shadow: 0 10px 20px rgba(255, 123, 172, 0.3) !important;
}

/* 卡片背景渐变效果 */
.governance-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 123, 172, 0.1) 0%,
    rgba(0, 0, 0, 0) 50%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.governance-card:hover::before {
  opacity: 1;
}

/* 浮动动画 */
@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(3deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}
.back-line {
  background: linear-gradient(to right, #fff0f6, #ffffff);
}
</style>
