Deer/features/feature/src/main/ets/view/ThirdView.ets

import { yTRouter } from "basic";
import { tagItemComp } from "../components/BuilderIndex";
import { CustomTextStyle } from "../style/CustomTextStyle";
import { ThirdViewModel } from "./viewModel/ThirdViewModel";


@ComponentV2
export struct ThirdView {
  vm: ThirdViewModel = new ThirdViewModel();

  build() {
    Column() {
      Column({space: 20}){
        Row(){
          Text('书包')
            .attributeModifier(new CustomTextStyle({size: 18, weight: 500, color: '#FF111111'}))
        }.justifyContent(FlexAlign.Center)

        this.classify()
      }
      .width('100%')
      .backgroundColor(Color.White)
      .padding({top: this.vm.safeTop, bottom: 15})
      .borderRadius({bottomLeft: 16, bottomRight: 16})

      Column(){
        if(true) {
          this.bookList()
        } else {
          this.emptyView()
        }
      }.width('100%').layoutWeight(1)
      .padding({left: 12, right: 12})


      // 底部按钮
      Row(){
        Row(){
          if(true) {
            Row().width(15).aspectRatio(1).borderRadius(15).border({width: 1})
          } else {
            Image($r('[basic].media.icon_select')).width(15).aspectRatio(1)
          }

          Text('全选')
            .margin({left: 6, right: 19})
            .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#80000000'}))

          Text(){
            Span('已选：')
            Span(`1`).fontWeight(700).fontColor('#FFFFC500')
            Span('本书').fontColor('#FF333333')
          }
          .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#80000000'}))
        }


        Row(){
          Text(this.vm.editMode ? '移除书包' : '立即借阅')
            .attributeModifier(new CustomTextStyle({
              size: 18,
              weight: 600,
              color: this.vm.editMode ? '#FFFECF2F' : '#FF000000'
            }))
        }
        .width(143)
        .borderRadius(25)
        .border({width: 2, color: this.vm.editMode ? '#FFFECF2F' : '#FF000000'})
        .backgroundColor(this.vm.editMode ? Color.White : '#FECF2F')
        .padding({top: 10, bottom: 10})
        .justifyContent(FlexAlign.Center)
        .onClick(() => {
          this.vm.clickButton()
        })
      }
      .height(60)
      .width("100%")
      .backgroundColor(Color.White)
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({left: 17, top: 8, right: 17, bottom: 8})
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F7F9FA')

  }

  @Builder
  classify(){
    Row(){
      Row(){
        List({space: 15}){
          ForEach(this.vm.categoryList, (item: string, index) => {
            ListItem(){
              Column(){
                Text(item)
                  .zIndex(99)
                  .width(50)
                  .textAlign(TextAlign.Center)
                  .onClick(() => { this.vm.changeCategory(index) })
                  .attributeModifier(new CustomTextStyle({size: 16, weight: 600, color: this.vm.categoryIndex == index ? '#FF111111' : '#FF777777'}))

                if(this.vm.categoryIndex == index){
                  Image($r('[basic].media.icon_SelectBg'))
                    .width(45)
                    .height(16)
                    .margin({top:-10})
                    .transition(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.TOP), TransitionEffect.move(TransitionEdge.TOP)).animation({ duration: 100, curve: Curve.Smooth }))
                }
              }
              .alignItems(HorizontalAlign.Center)
            }
          })
        }
        .height(40)
        .width("100%")
        .padding({top: 10})
        .scrollBar(BarState.Off)
        .listDirection(Axis.Horizontal)
      }
      .layoutWeight(1)
      .alignItems(VerticalAlign.Center)

      Row(){
        Text(this.vm.editMode ? '完成' : '编辑')
          .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))
      }
      .width(60)
      .borderRadius(25)
      .border({width: 2})
      .backgroundColor('#FECF2F')
      .padding({top: 8, bottom: 8})
      .justifyContent(FlexAlign.Center)
      .onClick(() => { this.vm.changeEditMode() })
    }
    .width("100%")
    .alignItems(VerticalAlign.Center)
    .padding({left: 16, right: 16})
  }

  @Builder
  emptyView(){
    Column(){
      Column(){
        this.tip()

        Column(){
          Image($r('[basic].media.png_schoolBag'))
            .width(115)
            .height(152)

          Text('书包空荡荡，赶快去选书！')
            .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#80000000'}))
            .margin({top: 18, bottom: 8})

          Text('去选书')
            .borderRadius(25)
            .backgroundColor('#FFFECF2F')
            .border({width: 2, color: '#FF000000'})
            .padding({left: 45, top: 10, right: 45, bottom: 10})
            .attributeModifier(new CustomTextStyle({size: 18, weight: 400, color: '#FF000000'}))
        }
        .width("100%")
        .layoutWeight(1)
        .alignItems(HorizontalAlign.Center)
        .justifyContent(FlexAlign.Center)
      }
      .width("100%")
      .height('100%')
    }
  }

  @Builder
  bookList(){
    List({space: 12}){
      ListItem(){
        this.tip()
      }

      ForEach(new Array(10).fill(1), (item: number, index) => {
        ListItem(){
          Row({space: 7}){
            Row(){
              if(index%2 == 1) {
                Row().width(15).aspectRatio(1).borderRadius(15).border({width: 1})
              } else {
                Image($r('[basic].media.icon_select')).width(15).aspectRatio(1)
              }
            }.height('100%')
            .onClick(() => { this.vm.changeSelect() })

            Row({space: 11}){
              Image($r('[basic].media.png_defaultBook'))
                .borderRadius(16)
                .width(86).aspectRatio(1)
                .backgroundColor('#FECF2F')

              Column(){
                Text('我不愿嫉妒')
                  .attributeModifier(new CustomTextStyle({size: 14, weight: 400, color: '#FF111111'}))

                Row(){
                  Text('哈哈哈哈哈哈哈哈哈哈')
                    .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#FF555555'}))
                }
                .width('100%').layoutWeight(1)
                .justifyContent(FlexAlign.Start)

                Row({space: 8}){
                  tagItemComp('情绪价值', '#FF4EB1EF', '#FFEDF7FD')
                  tagItemComp('3-8岁', '#FFFC9911', '#FFFFF5E7')
                }
              }
              .width("100%")
              .alignItems(HorizontalAlign.Start)
            }
            .onClick(() => {
              // todo 暂时注释
              // yTRouter.router2BookItemDetailPage()
            })
          }
          .width("100%")
          .height(102)
          .borderRadius(12)
          .border({width: 2})
          .backgroundColor(Color.White)
          .alignItems(VerticalAlign.Center)
          .padding({left: 9, top: 8, right: 9, bottom: 8})
        }
        .swipeAction({ end: () => { this.swipeAction() } })
      })
    }
    .width("100%").height("100%")
    .scrollBar(BarState.Off)
  }

  @Builder
  tip(){
    Row(){
      Row(){
        Image($r('[basic].media.icon_plaint')).width(13).aspectRatio(1)
        Text('单次可借阅10本书')
          .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#80000000'}))
      }

      Text(){
        Span('新人首单')
        Span('¥19.9').fontColor('#FFFF0000')
        Span('可借')
        Span('5本').fontColor('#FFFF0000')
      }
      .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#80000000'}))
    }
    .width("100%")
    .padding({top: 10})
    .justifyContent(FlexAlign.SpaceBetween)
  }

  @Builder
  swipeAction(){
    Row(){
      Text('移除')
        .attributeModifier(new CustomTextStyle({size: 16, weight: 400, color: '#FFFFFFFF'}))
    }
    .height('100%')
    .borderRadius(12)
    .margin({left: 10})
    .backgroundColor(Color.Red)
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .padding({left: 15, right: 15})
  }
}