import { it } from "@ohos/hypium";
import { MyPageSectionClass } from "../model/MyPageSectionClass";
import { MyPageSectionItem } from '../view/MyPageSectionItem'

@Preview
@Component
export struct TwoSection {
  @State sectionTitle:string="学习进步";
  @State currentIndex: number = 0;

  @State twoSectionList:Array<MyPageSectionClass> = [
    new MyPageSectionClass('oneItem',$r('app.media.app_icon'),'我的视频','/pages/MyHomePage'),
    new MyPageSectionClass('twoItem',$r('app.media.app_icon'),'我的课程','/pages/MyHomePage'),
    new MyPageSectionClass('threeItem',$r('app.media.app_icon'),'我的下载','/pages/MyHomePage'),
    new MyPageSectionClass('fourItem',$r('app.media.app_icon'),'我的收藏','/pages/MyHomePage')
  ];

  private getPagedItems(): Array<Array<MyPageSectionClass>> {
    const pages: Array<Array<MyPageSectionClass>> = [];
    const itemsPerPage = 4;
    for (let i = 0; i < this.twoSectionList.length; i += itemsPerPage) {
      pages.push(this.twoSectionList.slice(i, i + itemsPerPage));
    }
    return pages;
  }

  build() {
    Column() {
      // 标题
      Text(this.sectionTitle)
        .fontSize(17)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 10, left: 13 })
        .height(42)

      Column() {
        Stack({ alignContent: Alignment.Bottom }) {
          Swiper() {
            ForEach(this.getPagedItems(), (pageItems: Array<MyPageSectionClass>, index?: number) => {
              Grid() {
                ForEach(pageItems, (item: MyPageSectionClass) => {
                  GridItem() {
                    MyPageSectionItem({ sectionItem: item })
                  }
                }, (item: MyPageSectionClass) => item.id)
              }
              .columnsTemplate('1fr 1fr 1fr 1fr')
              .columnsGap(8)
              .rowsGap(8)
              .height('100%')
              .width('100%')
            })
          }
          .index(this.currentIndex)
          .onChange((index: number) => {
            this.currentIndex = index;
          })
          .height(78)
          .indicator(false)

          if (this.twoSectionList.length > 4) {
            Row() {
              ForEach(new Array(Math.ceil(this.twoSectionList.length / 4)).fill(0), (item: number, idx: number) => {
                Row()
                  .width('50%')
                  .height(6)
                  .borderRadius(3)
                  .backgroundColor(this.currentIndex === idx ? '#8B2316' :
                    '#D8D8D8')// .margin({ right: idx !== Math.ceil(this.oneSectionList.length / 4) - 1 ? 0 : 0 })
                  .margin({ right: 0 })
              }, (item: number, index: number) => index.toString())
            }
            .justifyContent(FlexAlign.Center)
            .backgroundColor('#D8D8D8')
            .height(6)
            .width(23)
            .borderRadius(3)
            .margin({ bottom: 8 })
          }
        }
      }
      .padding({ left: 20, right: 20 })
    }
    .alignItems(HorizontalAlign.Start)
    .backgroundColor(Color.White)
    .borderRadius(5)
    .margin({ top: 10, left: 10, right: 10 })
  }
}