<template>
  <div class="h-[320px] relative bg-[#082059] custom-border">
    <div class="flex">
      <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
      <div class="absolute top-[2px] left-[15px] flex items-center">
        <SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
        <div class="text-color text-[20px] ml-[9px] font-700" data-text="获客排行榜">获客排行榜</div>
      </div>
      <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
    </div>
    <div class="w-full h-[calc(100%-36px)] flex flex-col">
      <div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0" @click="show = true">
        <div class="text-[15px] text-[#84E8FF]">更多</div>
        <SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />
      </div>
      <div class="mt-[26px] mx-[16px]">
        <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-[34px] h-[20px]" v-if="index === 0" />
            <SvgComponent :content="silverMedalSvg" class="w-[34px] h-[20px]" v-if="index === 1" />
            <SvgComponent :content="bronzeMedalSvg" class="w-[34px] h-[20px]" v-if="index === 2" />
            <span class="text-[14px] font-600" v-if="index > 2">{{ index + 1 }}</span>
          </template>
          <template #name="{ data }">
            <span class="text-[#C0EEFF] text-[14px]">{{ data.name }}</span>
          </template>
        </RankingTable>
      </div>
    </div>
  </div>
  <Modal v-model="show" modal-class="modal-class">
    <template #title>
      <div class="modal-header h-[40px] w-full bg-[#051b36] flex items-center justify-center relative">
        <div class="text-color text-[24px] font-700 italic" style="--mask-gradient: linear-gradient(to top, transparent, #000)" data-text="获客排行榜">
          获客排行榜
        </div>
        <img src="/images/close-clip.png" class="w-[32px] h-[32px] absolute right-0 top-0 cursor-pointer" alt="" @click="show = false" />
      </div>
    </template>
    <RankingTable
      :value="paginatedProducts"
      class="bg-[#051b36] pl-[25px] pr-[35px] pt-[15px] max-h-[70vh] overflow-auto"
      :columns="columns"
      header-class="modal-table-header"
      body-class="modal-table-body">
      <template #rank="{ index }">
        <img src="@/assets/svg-img/gold-medal.svg" class="w-[34px] h-[20px]" v-if="page === 1 && index === 0" alt="" />
        <img src="@/assets/svg-img/silver-medal.svg" class="w-[34px] h-[20px]" v-else-if="page === 1 && index === 1" alt="" />
        <img src="@/assets/svg-img/bronze-medal.svg" class="w-[34px] h-[20px]" v-else-if="page === 1 && index === 2" alt="" />
        <span class="text-[14px] font-600" v-else>{{ (page - 1) * pageSize + index + 1 }}</span>
      </template>
      <template #name="{ data }">
        <span class="text-[#C0EEFF] text-[14px]">{{ data.name }}</span>
      </template>
    </RankingTable>
    <Pagination
      v-model="page"
      :total="products.length"
      v-model:pageSize="pageSize"
      :pageSizes="[15, 20, 50, 100]"
      @change="
        (p, s) => {
          page = p;
          pageSize = s;
        }
      " />
  </Modal>
</template>

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

  import Modal from "@/components/modal/Modal.vue";
  import Pagination from "@/components/pagination/index.vue";

  const page = ref(1);
  const pageSize = ref(15);
  const show = ref(false);

  const paginatedProducts = computed(() => {
    const start = (page.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return products.value.slice(start, end);
  });

  const columns = [
    { field: "rank", header: "名次", align: "justify-center", width: "68px" },
    { field: "name", header: "姓名", align: "justify-left", width: "100px" },
    { field: "total", header: "获客人数", align: "justify-center", width: "96px" },
  ];

  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 scoped lang="scss">
  @use "@/styles/text-color.scss";
  .custom-border {
    border-image-slice: 27 27 27 27;
    border-image-width: 1px 1px 2px 1px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url("src/assets/svg-img/border-image.png");
    border-style: solid;
  }

  :deep(.custom-table-header) {
    tr {
      background-color: rgb(14, 39, 97);
      th {
        padding: 13px 10px;
        color: #44c1ef;
        font-weight: 400;
        line-height: 1;
        font-size: 14px;
      }
    }
  }

  :deep(.custom-table-body) {
    tr {
      td {
        padding: 10px;
        line-height: 1;
        font-size: 14px;
      }
    }
  }

  .modal-header {
    background-image: url("/images/drawer-header.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
</style>
<style lang="scss">
  .modal-class {
    width: 560px;
    border: 1px solid #0e2744;
    background-color: #051b36;
  }

  .modal-table-header {
    background-color: #0d2744;

    .cell-content {
      padding-top: 7px;
      padding-bottom: 7px;
      color: #44c1ef;
      font-size: 14px;
    }
  }

  .modal-table-body {
    tr {
      td {
        div {
          padding-top: 10px;
          padding-bottom: 10px;
        }
      }
    }
    tr:nth-child(even) {
      background-color: #0d2744;
    }
  }
</style>
