---
const domId = `tab-${Math.random().toString(36).substring(2, 7)}`
const {
  list,
  Children,
  componentTitle,
  mdSize = '4',
  textAlign = 'text-center',
  titleTextAlign,
  ...right
} = Astro.props
// console.log('--------方方-->', list)
---

<!-- 竖形导航内容 -->
<div class="container">
  <div class={`fs-1 ${titleTextAlign} mt-5`} id={componentTitle}>
    {componentTitle}
  </div>
  <div class={`${textAlign}`}><div class="text-underline"></div></div>
  <div class="d-flex align-items-start mt-5">
    <div class="row">
      <div class="col-md-2">
        <div
          class="nav flex-column nav-pills me-3"
          id="v-pills-tab"
          role="tablist"
          aria-orientation="vertical"
        >
          {
            list?.map((item, index) => (
              <a
                class={index == 0 ? 'nav-link active mt-5' : 'nav-link mt-5'}
                id={`v-pills-${index}-tab`}
                data-bs-toggle="pill"
                href={`#v-pills-${index}`}
                role="tab"
                aria-controls={`v-pills-${index}`}
                aria-selected={index == 0 ? 'true' : 'false'}
              >
                {item?.tabName}
              </a>
            ))
          }
        </div>
      </div>
      <div class="col-md-10">
        <div class="tab-content" id="v-pills-tabContent">
          {
            list?.map((item, index) => (
              <div
                class={
                  index == 0 ? 'tab-pane fade show active' : 'tab-pane fade'
                }
                id={`v-pills-${index}`}
                role="tabpanel"
                aria-labelledby={`v-pills-${index}-tab`}
              >
                <div class="row">
                  {item?.children?.map((item, index) => (
                    <div class={`col-md-${mdSize}`} id={index}>
                      <Children listOrData={item} {...right} />
                    </div>
                  ))}
                </div>
              </div>
            ))
          }
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  .nav-link {
    color: #787878;
  }
  .nav-link.active {
    background-color: #c80510;
  }
  .text-underline {
    display: inline-block;
    width: 100px;
    border-bottom: 2px solid red;
  }
</style>
