import { BookItem, RouterPage, YTHeader } from 'basic';
import { BookItemComp } from '../../components/BookItemComp';
import { SchoolBag } from '../../components/SchoolBag';
import { BookListItem } from '../../model/BookModelIndex';
import { CustomTextStyle } from '../../style/CustomTextStyle';
import { BookListDetailViewModel } from '../viewModel/BookListDetailViewModel';

@ComponentV2
@RouterPage
struct BookListDetailPage {
  @Param @Require vm: BookListDetailViewModel;

  build() {
    NavDestination() {
      RelativeContainer(){
        Column() {
          YTHeader({
            defaultStyle: { title: '书单详情' },
            bgc: Color.White
          })

          Column(){
            List(){
              ListItem(){
                Column(){
                  Text(this.vm.item.bookListName)
                    .attributeModifier(new CustomTextStyle({size: 18, weight: 600, color: '#FF111111'}))

                  Row(){
                    Text(this.vm.item.author)
                      .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FF555555'}))

                    Row(){
                      // Text('2028人')
                      //   .attributeModifier(new CustomTextStyle({size: 14, weight: 600, color: '#FF111111'}))
                    }
                  }
                  .width('100%')
                  .margin({top: 30})
                  .justifyContent(FlexAlign.SpaceBetween)

                  Column(){
                    Text(this.vm.item.synopsis)
                      .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FF555555'}))
                  }
                  .height(100)
                  .width('100%')
                  .margin({top: 5})
                  .padding({top: 23, left: 5})
                  .alignItems(HorizontalAlign.Start)
                  .backgroundImageSize({width: '100%', height: '100%'})
                  .backgroundImage($r('[basic].media.png_ListDetailBg'))
                }
                .padding({bottom: 13})
                .backgroundColor(Color.White)
                .padding({left: 16, right: 16})
                .alignItems(HorizontalAlign.Start)
                .borderRadius({bottomLeft: 16, bottomRight: 16})
              }

              ListItem(){
                Row(){
                  Column(){
                    Text(`共${this.vm.item.bookCount}册`)
                      .zIndex(99)
                      .attributeModifier(new CustomTextStyle({size: 18, weight: 600}))

                    Image($r('[basic].media.icon_SelectBg'))
                      .width(45)
                      .height(16)
                      .margin({top:-10})
                  }

                  Text(``) // 已读xx本
                    .attributeModifier(new CustomTextStyle({size: 14, weight: 500, color: '#FF7C7D7D'}))
                }
                .width('100%')
                .justifyContent(FlexAlign.SpaceBetween)
              }
              .margin({top: 12})
              .padding({left: 16, right: 16})

              ForEach(this.vm.bookList, (item: BookItem, index) => {
                ListItem(){
                  Column(){
                    BookItemComp({ item: item })
                  }.alignItems(HorizontalAlign.End).justifyContent(FlexAlign.End)
                }
                .margin({top: 8})
                .padding({left: 16, right: 16})
              })

              ListItem().height(this.vm.safeBottom)
            }
            .width('100%')
            .height('100%')
            .scrollBar(BarState.Off)
            .backgroundColor('#F7F9FA')
          }
          .width("100%")
          .layoutWeight(1)
          .backgroundColor(Color.White)
        }

        Column({space: 3}){
          Column({space: 3}){
            Image($r('[basic].media.icon_deerIncrease'))
              .width(24)
              .aspectRatio(1)

            Text('一键\n添加')
              .attributeModifier(new CustomTextStyle({size: 12, weight: 400}))
          }
          .width(42)
          .padding(9)
          .borderRadius(8)
          .backgroundColor(Color.White)
          .shadow({ color: '#40000000', radius: 8 })

          SchoolBag({compMode: true})
        }
        .margin({ bottom: 53, right: 31})
        .backgroundColor(Color.Transparent)
        .alignRules({
          right: { anchor: '__container__', align: HorizontalAlign.End },
          bottom: { anchor: '__container__', align: VerticalAlign.Bottom}
        })
      }
    }
    .hideTitleBar(true)
  }
}


@Builder
function BookListDetailBuilder(_: string, item: BookListItem) {
  BookListDetailPage({ vm: new BookListDetailViewModel(item) })
}