import { promptAction } from '@kit.ArkUI'

interface RecordType {
  reason: string
  price: string
  date: Date
}

class RecordItem {
  reason: string = ''
  price: string = ''
  date: Date = new Date()
  constructor(record: RecordType) {
    this.reason = record.reason
    this.price = record.price
    this.date = record.date
  }
}
// TODOLIST
@Entry
@Component
struct PayRecordCase {
  @State
  list: RecordItem[] = [
    new RecordItem({
      reason: '给老婆买花',
      price: '99',
      date: new Date('2024/9/29')
    }),
    new RecordItem({
      reason: '给老婆买口红',
      price: '399',
      date: new Date('2024/9/29')
    }),
    new RecordItem({
      reason: '给自己买手机',
      price: '9999',
      date: new Date('2024/9/29')
    })
  ]
  @State
  showDialog: boolean = false
  @State
  reason: string = ''
  @State
  price: string = ''
  @State
  data: Date = new Date()
  @State
  searchText: string = ''

  build() {
    Stack() {
      // 页面
      Column() {
        Stack({ alignContent: Alignment.End }) {
          Text('支付记录')
            .textAlign(TextAlign.Center)
            .width('100%')
          Button('新增')
            .onClick(() => {
              this.showDialog = true
            })
        }
        .padding(20)

        Row() {
          TextInput({ text: $$this.searchText ,placeholder:'请输入消费原因'})
        }

        Scroll() {
          Column() {
            ForEach(this.list.filter(item=>item.reason.includes(this.searchText)), (item: RecordItem, index: number) => {
              // 循环的结构体
              Row() {
                Column({ space: 16 }) {
                  Row() {
                    Text(item.reason)
                      .fontWeight(FontWeight.Bold)
                  }
                  .width('100%')

                  Row() {
                    Text('￥' + Number(item.price).toFixed(2))
                      .fontColor(Color.Red)
                    Text(item.date.toLocaleDateString())
                  }
                  .width('100%')
                  .justifyContent(FlexAlign.SpaceBetween)
                }
                .padding(20)
                .layoutWeight(1)

                Row() {
                  Text('删除')
                    .fontColor(Color.White)
                }
                .width(80)
                .height(100)
                .backgroundColor('#ffdd5151')
                .justifyContent(FlexAlign.Center)
                .onClick(() => {
                  this.list.splice(index, 1)
                })
              }
              .width('100%')
            })

            if (this.list.filter(item=>item.reason.includes(this.searchText)).length === 0) {
              Row() {
                Text('暂无记录')
                  .fontColor('#ccc')
              }.width('100%')
              .padding(20)
              .justifyContent(FlexAlign.Center)
            }
          }
        }
      }
      .height('100%')
      .width('100%')

      if (this.showDialog) {
        //弹层
        Column() {
          Column({ space: 12 }) {
            //     title
            Row() {
              Text('新增记录')
                .padding(12)
            }

            //表单
            Row() {
              Text('消费内容：')
              TextInput({ placeholder: '请输入消费渠道', text: $$this.reason })
                .layoutWeight(1)
            }

            Row() {
              Text('消费价格：')
              TextInput({ placeholder: '请输入消费价格', text: $$this.price })
                .layoutWeight(1)
            }

            Row() {
              Text('消费时间：')
              DatePicker({
                selected: $$this.data
              })
                .layoutWeight(1)
            }

            Row({ space: 12 }) {
              Button('取消')
                .onClick(() => {
                  this.showDialog = false
                })
              Button('确定')
                .onClick(() => {
                  const record = new RecordItem({
                    reason: this.reason,
                    price: this.price,
                    date: this.data
                  })
                  this.list.unshift(record)
                  this.showDialog = false
                  promptAction.showToast({
                    message: '新增成功'
                  })
                  //   数据的初始化
                  this.reason = ''
                  this.price = ''
                  this.data = new Date()
                })
            }
          }
          .width('80%')
          .backgroundColor('#fff')
          .borderRadius(12)
          .padding(12)
        }
        .height('100%')
        .width('100%')
        .justifyContent(FlexAlign.Center)
        .backgroundColor('#6d000000')
      }

    }
  }
}