import { YTAvoid, YTHeader } from 'basic'
import { CustomTextStyle } from '../../style/CustomTextStyle'
import { buttonComp } from '../../components/BuilderIndex'

@ComponentV2
struct CashPledgeSecond {

  // 缴纳押金方法
  payDeposit() {}

  build() {
    NavDestination() {
      Column() {
        YTHeader({
          defaultStyle: { title: '租赁押金' },
          bgc: Color.White
        })

        Column(){
          Column(){
            Column({space: 16}){
              Row({space: 11}){
                Image($r('[basic].media.icon_cash'))
                  .width(30)
                  .aspectRatio(1)

                Text('¥100.00')
                  .attributeModifier(new CustomTextStyle({size: 24, weight: 500}))
              }

              Text('租借图书需要支付押金')
                .attributeModifier(new CustomTextStyle({size: 14, weight: 500, color: '#888888'}))
            }.width('100%')
            .height(200)
            .borderRadius(8)
            .backgroundColor(Color.White)
            .justifyContent(FlexAlign.Center)
            .alignItems(HorizontalAlign.Center)
          }
          .padding({top: 16, left: 16, right: 16})


          Column(){
            buttonComp('立即缴纳', '100%', 10, new CustomTextStyle({size: 18, weight: 400, color: '#000000'}), () => {
              this.payDeposit()
            })
          }
          .width('100%')
          .backgroundColor(Color.White)
          .padding({top: 10, left: 16, right: 16, bottom: AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number})
        }.width('100%')
        .layoutWeight(1)
        .backgroundColor('#F7F9FA')
        .justifyContent(FlexAlign.SpaceBetween)
      }
    }
    .hideTitleBar(true)
  }
}

@Builder
function CashPledgeSecondBuilder() {
  CashPledgeSecond()
}