import { yTRouter } from "basic"
import { CustomTextStyle } from "../style/CustomTextStyle"

// 标签Item
@Builder
export function tagItemComp(text: string, fontColor: ResourceColor, bgColor: ResourceColor){
  Row(){
    Text(text)
      .attributeModifier(new CustomTextStyle({size: 12, weight: 400 , color: fontColor}))
  }
  .padding(5)
  .backgroundColor(bgColor)
  .borderRadius({topLeft: 8.5, topRight: 8.5, bottomRight: 8.5, bottomLeft: 0})
}




// 书单Item
@Builder
export function bookListItemComp(title: string){
  Row({space: 11}){
    Image($r('[basic].media.png_TopRecommend'))
      .width(86)
      .aspectRatio(1)
      .borderRadius(12)

    Column({space: 3}){
      Text(title)
        .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))

      Text('豆瓣平均分9.2分推荐！红红火火恍恍惚惚哈哈哈哈哈给红红火火恍恍惚惚哈哈哈...')
        .width('100%')
        .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#FF555555'}))

      Blank()
        .layoutWeight(1)

      Text('共92本')
        .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#FF555555'}))
    }
    .layoutWeight(1)
    .alignItems(HorizontalAlign.Start)
  }
  .padding(8)
  .height(102)
  .width('100%')
  .borderRadius(12)
  .border({width: 2, color: '#FF000000'})
  .onClick(() => {
    yTRouter.router2BookListDetailPage()
  })
}



// 书籍Item
@Builder
export function bookItemComp(title: string, onClick: () => void){
  Row({space: 11}){
    Image($r('[basic].media.png_TopRecommend'))
      .width(86)
      .aspectRatio(1)
      .borderRadius(12)

    Column({space: 3}){
      Text(title)
        .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))

      Text('豆瓣平均分9.2分推荐！红红火火恍恍惚惚哈哈哈哈哈给红红火火恍恍惚惚哈哈哈...')
        .width('100%')
        .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#FF555555'}))

      Blank()
        .layoutWeight(1)

      Row(){
        Row({space: 13}){
          tagItemComp('情绪价值', '#FF4EB1EF', '#FFEDF7FD')
          tagItemComp('3-8岁', '#FFFC9911', '#FFFFF5E7')
        }

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