nshop-front-m/src/app/(public)/customer/account/_components/AccountHeader.tsx

"use client";
import Link from "next/link";
import { useState } from "react";
import type {CustomerVipGrowthData,CustomerProfileUser} from "@/types/api/customer/profile/type";
import SettingModal from "@/components/customer/SettingModal";
import AccountVipPopup from "./AccountVipPopup";
import Image from "next/image";

interface AccountHeaderProps {
  user: CustomerProfileUser;

  points: number;
  coupon_count: number;
  wishlist_count?: number;
  vipData: CustomerVipGrowthData;
}

export default function AccountHeader({
  user,
  points,
  coupon_count,
  vipData
}: AccountHeaderProps) {
  const [showSetting, setShowSetting] = useState(false);
  const [showVip, setShowVip] = useState(false);
  let progressPercent = 0;
  let progressText = "";
  if (vipData.next_level.min_growth_value > 0) {
    const rawPercent = (vipData.growth_value / vipData.next_level.min_growth_value) * 100;
    progressPercent = Math.min(Math.max(rawPercent, 0), 100);
    progressText = `growth value ${vipData.growth_value}/${vipData.next_level.min_growth_value}`;
  } else {
  
    progressText = String(vipData.growth_to_next_level);
    progressPercent = 0; 
  }
  return (
    <>
      {/* 顶部浅橙色背景 */}
      <div className="text-center relative pb-8 bg-[url('/image/account/202608271600.png')] bg-no-repeat bg-size-[100%_100%]">
        {/* 标题 + 设置 */}

        {/* <h1 className="absolute top-2.5   left-4 margin-0 text-base">
          My Account
        </h1> */}
        <div
          className="absolute top-4 right-4 z-[9]"
          onClick={() => {
            setShowSetting(true);
          }}
        >
          <svg
            className="text-2xl w-6 h-6 "
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3492"
            width="200"
            height="200"
            fill="#FFFFFF"
          >
            <path
              d="M0 0h1024v1024H0z"
              fill="#FFFFFF"
              fillOpacity="0.01"
              p-id="3493"
            ></path>
            <path
              d="M629.077333 935.253333a21.333333 21.333333 0 0 1-20.309333-14.848 105.728 105.728 0 0 0-201.386667 0 21.333333 21.333333 0 0 1-26.410666 13.952 445.354667 445.354667 0 0 1-193.365334-117.930666 21.333333 21.333333 0 0 1-0.938666-28.544 105.685333 105.685333 0 0 0-80.64-173.824c-3.498667 0-7.04 0-10.496 0.512a21.333333 21.333333 0 0 1-22.997334-17.066667 448 448 0 0 1 11.349334-222.976 21.333333 21.333333 0 0 1 20.650666-14.933333h1.493334a105.813333 105.813333 0 0 0 105.514666-105.557334 104.618667 104.618667 0 0 0-10.837333-46.677333 21.333333 21.333333 0 0 1 4.608-25.045333 445.909333 445.909333 0 0 1 183.850667-102.869334 21.333333 21.333333 0 0 1 24.704 10.88 105.728 105.728 0 0 0 188.416 0 21.333333 21.333333 0 0 1 24.704-10.88 445.909333 445.909333 0 0 1 183.850666 102.869334 21.333333 21.333333 0 0 1 4.608 25.045333 104.618667 104.618667 0 0 0-10.837333 46.677333 105.813333 105.813333 0 0 0 105.685333 105.642667h1.493334a21.333333 21.333333 0 0 1 20.650666 14.933333 448 448 0 0 1 11.349334 222.976 21.333333 21.333333 0 0 1-22.997334 17.066667 107.392 107.392 0 0 0-10.496-0.512 105.685333 105.685333 0 0 0-80.810666 173.781333 21.333333 21.333333 0 0 1-0.938667 28.544 445.354667 445.354667 0 0 1-193.450667 117.845334 21.333333 21.333333 0 0 1-6.016 0.938666z m-398.08-135.850666A402.901333 402.901333 0 0 0 374.826667 887.466667a148.48 148.48 0 0 1 266.709333 0 402.901333 402.901333 0 0 0 143.701333-88.064 148.352 148.352 0 0 1 120.021334-227.925334A405.717333 405.717333 0 0 0 896 401.664a148.48 148.48 0 0 1-125.184-198.058667 403.584 403.584 0 0 0-139.562667-78.421333 148.437333 148.437333 0 0 1-246.186666 0 403.584 403.584 0 0 0-139.605334 78.464 148.48 148.48 0 0 1-125.184 198.058667 405.717333 405.717333 0 0 0-9.258666 169.813333 148.352 148.352 0 0 1 120.021333 227.925333z"
              p-id="3494"
            ></path>
            <path
              d="M508.074667 677.589333a169.514667 169.514667 0 1 1 169.514666-169.514666 169.728 169.728 0 0 1-169.514666 169.514666z m0-296.362666a126.848 126.848 0 1 0 126.848 126.848 126.976 126.976 0 0 0-126.848-126.848z"
              p-id="3495"
            ></path>
          </svg>
        </div>
        {/* 头像 + 用户信息 */}
        <div className="flex items-center h-26 box-unset mt-0 pt-4 p-4 pb-0">
          <div className="relative text-5xl w-17.5 h-17.5 rounded-full bg-[rgba(249,249,249,1)] mr-3 uppercase flex  items-center justify-center">
            <Image
              className=" block"
              src={ user.image_url || "/image/account/202608271601.png" }
              alt={"userphoto"}
              width={48}
              height={48}
            />
          </div>
          <div className="align-left leading-5">
            <h2 className="font-semibold text-lg text-white">  {user.name}</h2>
            <p className="text-xs mt-1.5 text-white"> {user.email}</p>
          </div>
        </div>

        {/* 积分 / 优惠券 / 余额 */}
        <div className="flex justify-between items-center p-4 pt-0 pb-0  mt-5 text-sm ">
          <Link
            className="leading-5 text-xs pt-1 w-26.5 h-11 rounded-2xl bg-[rgba(0,0,0,0.3)] shadow-[0px_1px_4px_rgba(0,0,0,0.25)] text-white"
            href="/customer/account/mypoints"
            aria-label="Go to customer account mypoints page"
          >
            <strong> {points}</strong> <br />{" "}
            <span className="flex items-center justify-center">
              {" "}
              Points{" "}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="12"
                height="12"
                viewBox="0 0 12 12"
                fill="none"
              >
                <path
                  stroke="rgba(255, 255, 255, 1)"
                  stroke-width="1"
                  stroke-linejoin="round"
                  stroke-linecap="square"
                  d="M4.5 9L7.5 6L4.5 3"
                ></path>
              </svg>
            </span>
          </Link>
          {/* <div>|</div> */}
          <Link
            className="leading-5 text-xs pt-1 w-26.5 h-11 rounded-2xl bg-[rgba(0,0,0,0.3)] shadow-[0px_1px_4px_rgba(0,0,0,0.25)] text-white"
            href="/customer/account/mycoupon"
            aria-label="Go to customer account mycoupon page"
          >
            <strong className="coupons-number"> {coupon_count}</strong> <br />{" "}
            <span className="flex items-center justify-center">
              {" "}
              Coupon{" "}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="12"
                height="12"
                viewBox="0 0 12 12"
                fill="none"
              >
                <path
                  stroke="rgba(255, 255, 255, 1)"
                  stroke-width="1"
                  stroke-linejoin="round"
                  stroke-linecap="square"
                  d="M4.5 9L7.5 6L4.5 3"
                ></path>
              </svg>
            </span>
          </Link>
          {/* <div>|</div> */}
          <Link
            className="leading-5 text-xs pt-1 flex flex-col items-center w-26.5 h-11 rounded-2xl bg-[rgba(0,0,0,0.3)] shadow-[0px_1px_4px_rgba(0,0,0,0.25)] text-white"
            href="/koc/user/mybalance"
            aria-label="Go to koc user mybalance page"
          >
            0
            {/* <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-6 w-6 "
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
              />
            </svg> */}
            <span className="flex items-center justify-center">
              Wishlist
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="12"
                height="12"
                viewBox="0 0 12 12"
                fill="none"
              >
                <path
                  stroke="rgba(255, 255, 255, 1)"
                  stroke-width="1"
                  stroke-linejoin="round"
                  stroke-linecap="square"
                  d="M4.5 9L7.5 6L4.5 3"
                ></path>
              </svg>
            </span>
            {/* <strong>$0</strong> <br /> Balance */}
          </Link>
        </div>
      </div>
      {/* VIP 等级 */}
      <div
        onClick={() => {
          setShowVip(true);
          console.log("aaaa", showVip, showSetting);
        }}
        className=" block relative
    w-83 h-18
    mx-auto -mt-3 mb-8
    text-center text-white
    text-base leading-14
    rounded-[18px] bg-white shadow-[0px_2px_12px_rgba(0,0,0,0.1)]
    "
    // bg-[url('https://cdn.alipearlhair.com/media/wysiwyg/wap/202308221143.png')] bg-no-repeat bg-[length:100%_100%]
      >
        <span
          className="  absolute
    top-4 left-4
    text-black
    font-semibold
    text-4.5
    leading-normal"
        >
          {vipData.level_name}
        </span>
        <p className="text-black text-right pr-10" >{progressText}</p>
        <svg
          className="absolute top-4 right-4 text-4 w-5 h-5"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1446"
          width="200"
          height="200"
           fill="#000"
        >
          <path
            d="M761.055557 532.128047c0.512619-0.992555 1.343475-1.823411 1.792447-2.848649 8.800538-18.304636 5.919204-40.703346-9.664077-55.424808L399.935923 139.743798c-19.264507-18.208305-49.631179-17.344765-67.872168 1.888778-18.208305 19.264507-17.375729 49.631179 1.888778 67.872168l316.960409 299.839269L335.199677 813.631716c-19.071845 18.399247-19.648112 48.767639-1.247144 67.872168 9.407768 9.791372 21.984142 14.688778 34.560516 14.688778 12.000108 0 24.000215-4.479398 33.311652-13.439914l350.048434-337.375729c0.672598-0.672598 0.927187-1.599785 1.599785-2.303346 0.512619-0.479935 1.056202-0.832576 1.567101-1.343475C757.759656 538.879828 759.199462 535.391265 761.055557 532.128047z"
            // fill="#ffffff"
            p-id="1447"
          ></path>
        </svg>
          <div className="relative h-1 w-75 bg-[#E5E5E5FF] ml-4">
            {/* <div
              className="w-4 h-4 rounded-full bg-black absolute top-1/2 -translate-y-1/2  block"
              style={{ left: `${progressPercent}%` }}
            ></div> */}
            <div
              className="rounded-[1.2821vw] h-full bg-[#01754AFF]"
              style={{ width: `${progressPercent}%` }}
            ></div>
          </div>
      </div>
      {/* 弹窗组件 */}
      <SettingModal
        visible={showSetting}
        onClose={() => setShowSetting(false)}
      />
      <AccountVipPopup visible={showVip} onClose={() => setShowVip(false)} />
    </>
  );
}