import React from "react";
import "./u3.css";
import { useNavigate } from "react-router-dom";
import DecorLine from "../../components/DecorLine";
import { getOptionalItemList } from "../../api/hisApi";

import BackButton from "../../components/BackButton";
import ConfirmButton from "../../components/ConfirmButton";
import QR from "../../assets/vip-qr.png";
import success from "../../assets/success.png";
const U3: React.FC = () => {
  const navigate = useNavigate();
  // 是否认证成功
  const isAuthenticated = false;
  const handleBack = () => {
    navigate(-1);
  };

  const handleConfirm = () => {
    // 根据本地身份证号检查是否有可选套餐
    const idCardNo = localStorage.getItem("lastIdCardNo");
    if (!idCardNo) {
      navigate("/");
      return;
    }

    // 调用接口判断是否有可选套餐
    getOptionalItemList(idCardNo)
      .then((res) => {
        if (res.Status === 200) {
          if (
            res.Data?.packageInfo?.is_optional_package === 1 &&
            res.Data.packageInfo.registration_time.length > 0
          ) {
            navigate("/u4", { state: { optionalData: res.Data } });
          } else {
            navigate("/UI6");
          }
        } else {
          alert(res.Message);
        }
      })
      .catch((err) => {
        console.error("getOptionalItemList error", err);
        alert("网络异常，无法获取可选套餐信息，请联系前台工作人员处理");
        navigate("/");
      });
  };

  return (
    <div className="u3-root">
      <span className="u3-title">太平VIP客户认证</span>
      <DecorLine />
      {isAuthenticated ? (
        <>
          <span className="u3-text">认证成功</span>
          <img className="u3-success-img" src={success} alt="success" />
        </>
      ) : (
        <>
          <span className="u3-text">检测到您是太平VIP客户</span>
          <span className="u3-text">需要完成身份认证后继续</span>
          {/* 认证二维码 */}
          <img className="u3-qrcode" src={QR} alt="二维码位置" />
          <span className="u3-instruction">请使用微信扫码实名认证</span>
        </>
      )}
      <div className="u3-confirm-section">
        <BackButton text="返回" onClick={handleBack} />
        <ConfirmButton text="确认" onClick={handleConfirm} />
      </div>
    </div>
  );
};

export default U3;
