Deer/features/feature/src/main/ets/pages/Order/OrderDetailPage.ets

import { BasicType, BookItem, DiaLogSheetControl, IBestToast, YTAvoid, YTHeader, yTRouter } from 'basic'
import { OrderApi } from '../../apis/OrderApi'
import { AddressComp } from '../../components/AddressComp'
import { AddressItemComp } from '../../components/AddressItemComp'
import { buttonComp } from '../../components/BuilderIndex'
import { Address } from '../../model/Address'
import { AddressAddPageState } from '../../model/EnumState'
import { OrderValidationData } from '../../model/OrderModelIndex'
import { CustomTextStyle } from '../../style/CustomTextStyle'

@ComponentV2
struct OrderDetailPage {
  @Local safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
  // 租借的图书 URL
  @Param bookList: BookItem[] = []

  @Local forEach: Array<BasicType> = []
  // 总价
  // todo 默认为邮费
  @Local totalPrice: number = 9.99
  // 地址信息
  @Local address: Address = {}

  // 用户订单备注
  remark: string = ''

  // 提交订单校验
  orderValidation: OrderValidationData = {
    bookIds: [],
    deliveryMethod: 2,
    deposit: 0,
    payWay: 0,
    postFee: 9.99,
    userName: '占三峰',
    phone: '13598728343',
    address: '高新区火炬园路321号韩菲诗.诚享大厦304室内',
    region: '福建-厦门-火炬园',
  }

  // 打开选择地址弹窗
  openAddressDialog() {
    if(true){
      yTRouter.router2IncreaseAddressPage(AddressAddPageState.ADD_AND_USE, (info) => {
        let ans = info.result
        console.log(`ans = ${JSON.stringify(ans)}`)
      })
      return
    }


    // todo 有 地址数据 打开弹窗， 没有进入地址管理页面添加页面添加地址
    let control: DiaLogSheetControl = new DiaLogSheetControl(this.getUIContext())
    yTRouter.router2BottomDialog({
      control: control,
      builder: () => { this.AddressSelection(control) },
    })
  }

  // 提交订单
  submitOrder() {
    if(!this.orderValidation?.phone) {
      IBestToast.show('请填写收件人信息')
      return
    }
    // yTRouter.router2BorrowAnsPage()

    this.orderValidation.orderPrice = Number.parseFloat(this.totalPrice.toFixed(2))
    this.orderValidation.remark = this.remark
    OrderApi.checkOrder(this.orderValidation)
  }


  aboutToAppear(): void {
    // 书本价格计算
    let total: number = 0.00
    this.bookList.forEach((item: BookItem, index) => {
      if(item.rentPerDay) {
        total += Number.parseFloat(item.rentPerDay)
      }
      this.orderValidation.bookIds?.push(item.id!)
    })

    // 生成明细
    this.forEach = [
      { text: '租借期限', message: '30天' },
      { text: '租借时间', message: '快递签收日起30天' },
      { text: '租借价格', message: `￥${total.toFixed(2)}` },
      { text: '往返运费', message: `￥9.99` },
      { text: '租借期限', message: '30天' },
    ]

    // todo 在有地址列表 或 默认地址的情况下添加地址信息



    // todo 订单校验数据结构整合
    this.totalPrice += total
    this.orderValidation.bookPrice = total
  }

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

        Column(){
          List({space: 16}){
            ListItem()

            // 地址栏
            ListItem(){
              // todo 订单地址校验
              if(this.address?.phone) {
                AddressItemComp({type: 0})
              } else {
                Row(){
                  Text('+ 添加收件人信息')
                    .attributeModifier(new CustomTextStyle({ size: 16, weight: 500 }))
                }.width('100%')
                .borderRadius(8)
                .border({width: 2})
                .padding({top: 30, bottom: 30})
                .justifyContent(FlexAlign.Center)
              }
            }
            .backgroundColor(Color.White)
            .onClick(() => { this.openAddressDialog() })

            // 租借的图书
            ListItem(){
              Column({space: 10}){
                Row({space: 10}){
                  Text('租借图书')
                    .attributeModifier(new CustomTextStyle({ size: 16, weight: 500, color: '#FF000000' }))

                  Text(`共${this.bookList.length}件`)
                    .attributeModifier(new CustomTextStyle({ size: 12, weight: 500, color: '#80000000' }))
                }

                List({space: 15}){
                  ForEach(this.bookList, (item: BookItem, index) => {
                    ListItem(){
                      Image(item.coverUrl)
                        .width(63)
                        .height(81)
                        .borderRadius(6)
                        .backgroundColor('#FFFECF2F')
                        .alt($r('[basic].media.png_defaultBook'))
                    }
                  })
                }.width("100%").height(81)
                .scrollBar(BarState.Off)
                .listDirection(Axis.Horizontal)
              }
              .width('100%')
              .alignItems(HorizontalAlign.Start)
              .padding({left: 16, right: 16, top: 9, bottom: 9})
            }
            .borderRadius(8)
            .border({width: 2})
            .backgroundColor(Color.White)

            // 订单信息
            ListItem(){
              Column({space: 16}){
                ForEach(this.forEach, (item: BasicType, index) => {
                  Row(){
                    Text(item.text)
                      .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF666666' }))

                    Text(item.message)
                      .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF333333' }))
                  }.width('100%').justifyContent(FlexAlign.SpaceBetween)
                })


                Divider().height(1).width('100%').backgroundColor('#FF666666')

                Row(){
                  Text('小计')
                    .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF666666' }))

                  Text(`¥${this.totalPrice.toFixed(2)}`)
                    .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF333333' }))
                }.width('100%').justifyContent(FlexAlign.SpaceBetween)
              }
              .padding({left: 16, right: 16, top: 13, bottom: 13})
            }
            .borderRadius(8)
            .border({width: 2})
            .backgroundColor(Color.White)

            // 支付方式
            ListItem(){
              Column({space: 16}){
                Text('支付方式')
                  .attributeModifier(new CustomTextStyle({ size: 16, weight: 500, color: '#000000' }))

                Divider().height(1).width('100%').backgroundColor('#FF666666')

                Row(){
                  Row({space: 5}){
                    Image($r('[basic].media.icon_wx'))
                      .width(20)
                      .aspectRatio(1)

                    Text('微信支付')
                      .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#666666' }))
                  }

                  Image($r('[basic].media.icon_selectSvg'))
                    .width(14)
                    .aspectRatio(1)
                    .fillColor('#20BB06')
                }
                .width('100%')
                .justifyContent(FlexAlign.SpaceBetween)
              }
              .justifyContent(FlexAlign.Start)
              .alignItems(HorizontalAlign.Start)
              .padding({left: 16, right: 16, top: 9, bottom: 9})
            }
            .borderRadius(8)
            .border({width: 2})
            .backgroundColor(Color.White)

            // 备注
            ListItem(){
              Row({space: 20}){
                Text('备注')
                  .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF666666' }))

                TextInput({placeholder: '请输入您的留言', text: $$this.remark})
                  .padding(0)
                  .borderRadius(0)
                  .layoutWeight(1)
                  .border({width: 0})
                  .textAlign(TextAlign.End)
                  .backgroundColor(Color.Transparent)
              }.width('100%').justifyContent(FlexAlign.SpaceBetween)
              .padding(16)
            }
            .borderRadius(8)
            .border({width: 2})
            .backgroundColor(Color.White)

            ListItem()
          }.width('100%').height('100%')
          .scrollBar(BarState.Off)
          .padding({left: 15, right: 15})
        }.width('100%').layoutWeight(1)

        Row(){
          Text(){
            Span('应付：')
            Span(`¥${this.totalPrice.toFixed(2)}`).fontColor('#FFFF0000').fontSize(20)
          }
          .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF000000' }))

          buttonComp('提交订单', 143, 10, new CustomTextStyle({size: 18}), () => {
            this.submitOrder()
          })
        }
        .width('100%')
        .backgroundColor(Color.White)
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.SpaceBetween)
        .shadow({radius: 5, offsetY: 5})
        .padding({bottom: this.safeBottom, top: 10, left: 15, right: 15})
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#F7F9FA')
    }
    .hideTitleBar(true)
  }


  @Builder
  AddressSelection(control: DiaLogSheetControl) {
    AddressComp({control: control})
  }
}

@Builder
function OrderDetailBuilder(_: string, param: Array<BookItem>) {
  OrderDetailPage({bookList: param})
}