import { ComponentTableThree, Maybe, Table } from "@/type/gpl/graphql";
import s from "./index.module.scss";

interface Props {
  param: Maybe<ComponentTableThree> | undefined;
}

export default function tableOne({ param }: Props) {
  return (
    <>
      <div className={s.content}>
        <div className={s.center}>
          <table>
            <thead>
              {param?.thead?.tr?.map((item, index) => {
                return (
                  <tr key={index}>
                    {item?.td?.map((it, i) => {
                      return <th key={i}>{it?.text}</th>;
                    })}
                  </tr>
                );
              })}
            </thead>
            <tbody>
              {param?.tbody?.group?.map((groupItem, groupIndex) => {
                // console.log(groupItem)
                return (
                  <>
                  <tr key={groupIndex} className={s.group}>
                    <td colspan={param?.thead?.tr?.[0]?.td?.length}>
                      {groupItem?.description}
                    </td>
                  </tr>
                  {groupItem?.tr?.map((trItem,trIndex)=>{
                    
                    return (
                      <tr key={trIndex}>
                        {trItem?.td?.map((tdItem,tdIndex)=>{
                          return (
                            <td key={tdIndex}>
                                {tdItem?.text}
                            </td>
                          )
                        })}
                      </tr>
                    )
                  })}
                  </>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

.content {
  width: 100%;
  overflow-x: scroll;
  .center {
    display: flex;
    justify-content: center;

    table {
      border-collapse: collapse;   // 让相邻边框合并成一条
      width: 100%;
    //   max-width: 800px;            // 可选，控制表格最大宽度
      border: 1px solid var(--border-color);   // 表格外边框

      thead {
        tr {
          th {
            white-space: nowrap;
            color: #fff;
            background-color: var(--primary-color);  // 表头底色
            font-weight: 600;
            text-align: left;
            padding: 12px 16px;
            border: 1px solid var(--border-color);  // 表头单元格边框
          }
        }
      }

      tbody {
        tr {

          td {
            
            padding: 12px 16px;
            border: 1px solid var(--border-color);  // 数据单元格边框

            
          }

          &.group{
            color:var(--primary-color);
            font-weight: 500;
          }

          &:hover {
            background-color: var(--primary-color);  // 可选：鼠标悬停高亮
            color:#fff;
          }
        }
      }
    }
  }
}