import React, { useEffect, useState } from "react";
import "./UI6.css";
import "../../assets/css/basic.css";
import { useNavigate } from "react-router-dom";
import BackButton from "../../components/BackButton";
import ConfirmButton from "../../components/ConfirmButton";
import DecorLine from "../../components/DecorLine";
import { getPackagItemDetail } from "../../api/hisApi";

const UI6: React.FC = () => {
  const navigate = useNavigate();

  const handleBack = () => {
    navigate(-1);
  };

  const handleConfirm = () => {
    navigate("/UI7");
  };

  const [ListData, setListData] = useState<any[]>([]);
  const [PackageInfo, setPackageInfo] = useState<any>({});
  useEffect(() => {
    getListData();
  }, []);


  const getListData = async () => {
    const id_no = localStorage.getItem("lastIdCardNo");
    if (!id_no) {
      alert("请先输入身份证号");
      return;
    }
    const res = await getPackagItemDetail(id_no as string);
    if (res.Status === 200) {
      // 处理数据：将 project_id 和 project_name 字符串分离为数组
      const processedData = res.Data.listPackDetail.map((item: any) => {
        // 将 project_id 字符串按中文顿号分割为数组
        const project_ids = item.project_id 
          ? item.project_id.split("、").map((id: string) => id.trim()).filter((id: string) => id)
          : [];
        
        // 将 project_name 字符串按中文顿号分割为数组
        const project_names = item.project_name
          ? item.project_name.split("、").map((name: string) => name.trim()).filter((name: string) => name)
          : [];
        
        return {
          ...item,
          project_ids,
          project_names,
        };
      });
      
      setListData(processedData);
      setPackageInfo(res.Data.packagItemInfo);
    } else {
      alert(`获取列表数据失败: ${res.Message}`);
    }
  };


  return (
    <div className="basic-root">
      <div className="basic-white-block">
        <div className="basic-content">
          <span className="basic-title">体检套餐确认</span>
          <DecorLine />

          <span className="basic-paragraph">
              {localStorage.getItem("name")}{localStorage.getItem("gender") === "男" ? "先生" : "女士"}定制套餐
              <br />
              <br />
              已帮您成功预约 {PackageInfo.appointment_datetime} 的体检，以下是体检套餐详情和价格。
          </span>

          <div className="ui6-table-container">
            <table className="ui6-table">
              <thead>
                <tr>
                  <th className="ui6-table-header ui6-table-dept">科室</th>
                  <th className="ui6-table-header ui6-table-project">检查项目</th>
                </tr>
              </thead>
              <tbody>
                {ListData.map((item, index) => (
                  <tr key={index} className="ui6-table-row">
                    <td className="ui6-table-dept-cell">{item.department_name}</td>
                    <td className="ui6-table-project-cell">
                      {item.project_names.map((project: string, pIndex: number) => (
                        <div key={pIndex} className="ui6-project-item">
                          <span style={{ paddingLeft: 20 }}>{project}</span>
                        </div>
                      ))}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="basic-confirm-section">
            <BackButton text="返回" onClick={handleBack} />
            <ConfirmButton text="确定" onClick={handleConfirm} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default UI6;