<template>
  <div class="ranking-bg aspect-[0.8/1] px-[2.5rem] pt-[2.5rem] pb-[1.5rem]">
    <header class="flex items-center justify-between">
      <div class="flex items-center">
        <SvgComponent :content="arrowLeftSvg" class="w-[3.75rem] h-[3.75rem]" />
        <div class="text-color text-[3.5rem] ml-[1.25rem] font-700" data-text="获客排行榜">获客排行榜</div>
      </div>
      <div class="flex items-center" @click="isDrawerVisible = true">
        <div class="text-[3rem] text-[#84E8FF]">更多</div>
        <SvgComponent :content="moreArrowSvg" class="w-[2.2rem] h-[3.75rem]" />
      </div>
    </header>
    <main>
      <RankingTable :value="products.slice(0, 5)" :columns="columns" header-class="custom-table-header" body-class="custom-table-body">
        <template #rank="{ index }">
          <SvgComponent :content="goldMedalSvg" class="w-[6rem] h-[3.5rem]" v-if="index === 0" />
          <SvgComponent :content="silverMedalSvg" class="w-[6rem] h-[3.5rem]" v-if="index === 1" />
          <SvgComponent :content="bronzeMedalSvg" class="w-[6rem] h-[3.5rem]" v-if="index === 2" />
          <span class="text-[2.75rem] font-600" v-if="index > 2">{{ index + 1 }}</span>
        </template>
        <template #name="{ data }">
           <Tooltip :text="data.name" position="bottom">
             <span class="block max-w-[9rem] overflow-hidden text-ellipsis whitespace-nowrap text-[#C0EEFF] text-[2.75rem]">{{ data.name }}</span>
           </Tooltip>
        </template>
        <template #total="{ data }">
          <span class="text-[#C0EEFF] text-[2.75rem]">{{ data.total }}</span>
        </template>
      </RankingTable>
    </main>
  </div>
  <MobileDrawer v-model="isDrawerVisible" :transition-duration="300" panelStyle="border-radius:8rem 8rem 0 0;background-color:#072362;">
    <!-- 自定义头部 -->
    <template #header>
      <div class="drawer-header aspect-[10.7/1] w-full bg-[#072362] flex items-center justify-center relative rounded-[8rem_8rem_0_0]">
        <div class="text-color text-[4.5rem] font-700 italic" style="--mask-gradient: linear-gradient(to top, transparent, #000)" data-text="获客排行榜">
          获客排行榜
        </div>
        <img src="/images/close.png" class="w-[3rem] h-[3rem] absolute right-[5rem] top-[3.75rem]" alt="" @click="isDrawerVisible = false" />
      </div>
    </template>

    <!-- 自定义内容 -->
    <RankingTable :value="products" :columns="columns" header-class="custom-table-header" body-class="custom-table-body">
      <template #rank="{ index }">
        <SvgComponent :content="goldMedalSvg" class="w-[6rem] h-[3.5rem]" v-if="index === 0" />
        <SvgComponent :content="silverMedalSvg" class="w-[6rem] h-[3.5rem]" v-if="index === 1" />
        <SvgComponent :content="bronzeMedalSvg" class="w-[6rem] h-[3.5rem]" v-if="index === 2" />
        <span class="text-[2.75rem] font-600" v-if="index > 2">{{ index + 1 }}</span>
      </template>
      <template #name="{ data }">
         <Tooltip :text="data.name" position="bottom">
           <span class="block max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-[#C0EEFF] text-[2.75rem]">{{ data.name }}</span>
         </Tooltip>
      </template>
      <template #total="{ data }">
        <span class="text-[#C0EEFF] text-[2.75rem]">{{ data.total }}</span>
      </template>
    </RankingTable>
  </MobileDrawer>
</template>

<script lang="ts" setup>
  import SvgComponent from "@/components/SvgComponent.vue";
  import RankingTable from "@/components/table/RankingTable.vue";
  import MobileDrawer from "./MobileDrawer.vue";
    import Tooltip from "./Tooltip.vue";

  const columns = [
    { field: "rank", header: "名次", align: "justify-center", width: "6rem" },
    { field: "name", header: "姓名", align: "justify-left", width: "13.5rem" },
    { field: "total", header: "获客人数", align: "justify-center", width: "15rem" },
  ];
  const isDrawerVisible = ref(false);

  let products = ref<any[]>([]);
  const chargingRankingData = inject(
    "chargingRankingData",
    ref<{
      acqRanks: any[];
    }>({
      acqRanks: [],
    }),
  );

  watch(
    () => chargingRankingData.value,
    () => {
      PageTransitionEvent;
      initData();
    },
  );

  const initData = () => {
    if (chargingRankingData.value.acqRanks) {
      products.value = chargingRankingData.value.acqRanks;
    }
  };

  const headerLeftSvg = ref("");
  const headerRightSvg = ref("");

  const getHeaderLeftSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/header-bg-left-sort.svg?raw");
    headerLeftSvg.value = svg;
  };

  const getHeaderRightSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/header-bg-right-sort.svg?raw");
    headerRightSvg.value = svg;
  };

  const arrowLeftSvg = ref("");
  const getArrowLeftSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/arrow-left.svg?raw");
    arrowLeftSvg.value = svg;
  };

  const moreArrowSvg = ref("");
  const getMoreArrowSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/more-arrow.svg?raw");
    moreArrowSvg.value = svg;
  };

  const goldMedalSvg = ref("");
  const getGoldMedalSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/gold-medal.svg?raw");
    goldMedalSvg.value = svg;
  };

  const silverMedalSvg = ref("");
  const getSilverMedalSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/silver-medal.svg?raw");
    silverMedalSvg.value = svg;
  };

  const bronzeMedalSvg = ref("");
  const getBronzeMedalSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/bronze-medal.svg?raw");
    bronzeMedalSvg.value = svg;
  };

  onBeforeMount(() => {
    getHeaderLeftSvg();
    getHeaderRightSvg();
    getArrowLeftSvg();

    getMoreArrowSvg();

    getGoldMedalSvg();
    getSilverMedalSvg();
    getBronzeMedalSvg();

    initData();
  });
</script>

<style lang="scss" scoped>
  @use "@/styles/text-color.scss";

  .ranking-bg {
    background-image: url("/images/ranking-border.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  :deep(.custom-table-header) {
    tr {
      background-color: rgb(14, 39, 97);
      th {
        padding: 2rem 1.5rem;
        color: #44c1ef;
        line-height: 1;
        font-size: 2.75rem;
      }
    }
  }

  :deep(.custom-table-body) {
    tr {
      td {
        padding: 2rem;
        line-height: 1;
      }
    }
    tr:nth-child(even) {
      background: linear-gradient(270deg, rgba(62, 118, 171, 0) 0%, rgba(62, 118, 171, 0.2) 45%, rgba(62, 118, 171, 0) 100%);
    }
  }

  .drawer-header {
    background-image: url("/images/drawer-header.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
</style>
