import { BookItem, userInfo, yTRouter } from "basic"
import { OrderApi } from "../apis/OrderApi"
import { CustomTextStyle } from "../style/CustomTextStyle"
import { tagItemComp } from "./BuilderIndex"

@ComponentV2
export struct BookItemComp {
  @Param @Require item: BookItem
  // 是否为列表模式， true - 列表模式 false - 封面模式
  @Param showModel: boolean = true

  @Event addCar: () => void

  // 添加至购物车
  async addCarEvent(){
    // 添加购物车需要校验是否登录
    if (!userInfo.checkLogin()) {
      yTRouter.router2LoginPage(true)
      return
    }

    if(this.item.schoolbagFlag == '0') {
      await OrderApi.addBookToBag(this.item.id!)
      this.item.schoolbagFlag = '1'
    } else {
      await OrderApi.removeBookFromBag([this.item.id!])
      this.item.schoolbagFlag = '0'
    }

    if(this.addCar){
      this.addCar()
    }
  }

  router2DetailPage() {
    yTRouter.router2BookItemDetailPage(this.item)
  }

  build() {
    if(this.showModel) {
      this.bookItemComp()
    } else {
      this.bookItemCompCover()
    }
  }


  // 书籍Item - 封面模式
  @Builder
  bookItemCompCover(){
  Row(){
    RelativeContainer(){
      Image(this.item.coverUrl)
        .width(200)
        .aspectRatio(1)
        .alt($r('[basic].media.png_TopRecommend'))
        .alignRules({
          middle: { anchor: '__container__', align: HorizontalAlign.Center },
          top: { anchor: '__container__', align: VerticalAlign.Top }
        })

      Image(this.item.schoolbagFlag == '0' ? $r('[basic].media.icon_deerIncrease') : $r('[basic].media.icon_reduce'))
        .width(24)
        .aspectRatio(1)
        .alignRules({
          right: { anchor: '__container__', align: HorizontalAlign.End },
          bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
        })
        .onClick(() => {
          this.addCarEvent()
        })
    }.width('100%').height('100%')
  }
  .width('100%').height(214)
  .padding({right: 19, bottom: 15, top: 2})
  .backgroundImageSize({width: '100%', height: '100%'})
  .backgroundImage($r('[basic].media.png_book_CompCover'))
}

  // 书籍Item - 列表模式
  @Builder
  bookItemComp(){
  Row({space: 11}){
    Image(this.item.coverUrl)
      .width(86)
      .aspectRatio(1)
      .borderRadius(12)
      .alt($r('[basic].media.png_TopRecommend'))

    Column({space: 3}){
      Text(this.item?.bookTitle)
        .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))
        .onClick(() => {
          this.item.bookTitle = 'hhhhhhh'
        })

      Text(this.item?.bookSubtitle)
        .width('100%')
        .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#FF555555'}))

      Blank()
        .layoutWeight(1)

      Row(){
        Row({space: 13}){
          tagItemComp(`${this.item.minAge}-${this.item.maxAge}岁`, '#FFFC9911', '#FFFFF5E7')
          tagItemComp('情绪价值', '#FF4EB1EF', '#FFEDF7FD')
        }

        Image(this.item.schoolbagFlag == '1' ? $r('[basic].media.icon_reduce') : $r('[basic].media.icon_deerIncrease'))
          .width(24)
          .aspectRatio(1)
          .onClick(() => {
            this.addCarEvent()
          })
      }
      .width("100%")
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .layoutWeight(1)
    .alignItems(HorizontalAlign.Start)
  }
  .padding(8)
  .height(102)
  .width('100%')
  .borderRadius(12)
  .border({width: 2, color: '#FF000000'})
  .onClick(() => {
    this.router2DetailPage()
  })
}
}