---
const domId = `tab-${Math.random().toString(36).substring(2, 7)}`
import Text from '@/components/children/Text.astro'
const list = [
  {
    id: '1',
    tabName: '精选视频',
    children: [
      {
        title: '中信银行携手华为的数字化转型实践',
      },
      {
        title: 'HIFS2023 曹冲丨拥抱大模型，构建无所不及的金融智能',
      },
      {
        title: 'BDO携手华为共同应对数字化转型的新挑战',
      },
      {
        title: '申万宏源通过基础设施现代化为数字化转型夯基垒台',
      },
      {
        title: '华为iMaster NCE助力华夏银行网络自服务平台搭建',
      },
      {
        title: '常熟农商银行科技创新之路',
      },
    ],
  },
  {
    id: '2',
    tabName: '会议演讲材料',
    children: [
      {
        title: '智领睿变，共建数智金融未来——曹冲',
      },
      {
        title: '金融级PaaS 3.0 应用现代化新引擎',
      },
      {
        title: '深化核心现代化 ，共绘数智金融新蓝图',
      },
      {
        title: 'AI新生代银行的机遇与变革',
      },
    ],
  },
  {
    id: '3',
    tabName: '白皮书/第三方报告',
    children: [],
  },
  {
    id: '4',
    tabName: '快捷书架',
    children: [],
  },
]
---

<!-- 竖形导航内容 -->
<div class="d-flex align-items-start">
  <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-4" id={index}>
                    <Text
                      list={item}
                      ellipsis="line-ellipsis-small"
                      btnDisplay={true}
                    />
                  </div>
                ))}
              </div>
            </div>
          ))
        }
      </div>
    </div>
  </div>
</div>
<style>
  .nav-link {
    color: #787878;
  }
  .nav-link.active {
    background-color: #c80510;
  }
</style>
