<template>
  <div class="title mb-[50px] text-center">
    <h1 style="font-size: 40px; margin-top: 60px">Governance</h1>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div
      v-for="(item, index) in state.list"
      :key="index"
      class="governance-card relative overflow-hidden bg-white rounded-lg shadow-xl hover:shadow-2xl transition-all duration-500 border border-gray-100 transform hover:-translate-y-2"
    >
      <div
        class="absolute inset-0 bg-gradient-to-r from-[#f5f0ff] to-white opacity-80"
      ></div>
      <div class="relative p-8 flex flex-col h-full back-line">
        <div class="flex items-center mb-6 max-h-[3.5rem]">
          <div
            class="bg-[#ff7bac] p-3 rounded-lg shadow-md mr-6 transform hover:rotate-6 transition-transform duration-300 governance-icon"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-8 w-8 text-white"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
              />
            </svg>
          </div>
          <div>
            <n-tooltip
              trigger="click"
              :disabled="!item.showTooltip"
              width="trigger"
            >
              <template #trigger>
                <h1
                  :ref="(el) => setTitleRef(el, index)"
                  class="text-2xl font-medium text-gray-800"
                  style="
                    word-break: break-word;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                >
                  {{ item.title }}
                </h1>
                <!-- <text> {{ item.date }}</text> -->
              </template>
              <div slot="content">
                {{ item.title }}
              </div>
            </n-tooltip>
          </div>
        </div>
        <div class="mt-auto">
          <a
            class="inline-flex items-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#ff7bac] hover:bg-[#ff7bac] transition-all duration-300 transform hover:scale-105 shadow-md"
            target="_blank"
            style="cursor: pointer"
            @click="handleViewDocument(item)"
          >
            View Document
            <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="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 5l7 7-7 7"
              />
            </svg>
          </a>
        </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";

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 }
);

//获取官网展示文档
const getGovernanceDisplay = () => {
  // let url = 'https://erpapi.fiee.com/api/fiee/fiee/governance/display'
  let url = "https://erpapi.fiee.com/api/fiee/governance/display";
  let params = {};
  axios
    .get(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">
/* 标题样式 */
.title h1 {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: #ff7bac;
    border-radius: 3px;
    transition: width 0.3s ease;
  }

  &: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>
