import { CommonData } from "../model/CommonData";

@Component
export struct BallComponents {
  @State commonData: CommonData = new CommonData()
  @State resultRed: Array<string> = []
  @State resultBlue: Array<string> = []

  redList: Array<[ResourceColor, number]> = [
    ['#ff0000', 0.0], // 起始颜色为红色，位置为0
    ['#00ff00', 0.5], // 中间颜色为绿色，位置为0.5
    ['#ffffff', 1.0]// 结束颜色为蓝色，位置为1
  ]

  blueList: Array<[ResourceColor, number]> = [
    ['#5B7EEF', 0.0], // 结束颜色为蓝色，位置为1
    ['#ffffff', 0.5], // 起始颜色为红色，位置为0
    ['#00ff00', 1.0],// 中间颜色为绿色，位置为0.5
  ]

  @Builder
  ballItemBuild(ballText: string, isRed: boolean, marginLeft?: number) {
    Button(ballText, { type: ButtonType.Circle })// .stateEffect(true)
      .fontSize(18)
      .size({ width: 50, height: 50 })
      .padding(10)
      .margin({ left: marginLeft })
      .alignSelf(ItemAlign.Center)
      .align(Alignment.Center)
      .shadow(ShadowStyle.OUTER_DEFAULT_MD)
      .hoverEffect(HoverEffect.Auto)
      .sweepGradient({
        center: [0, 0], // 渐变中心点坐标
        start: 20, // 起始角度为0度（正右方向）
        end: 360, // 结束角度为360度（形成一个完整的圆）
        colors: isRed ? this.redList : this.blueList
      });
  }

  build() {

    Column() {

      Column() {
        Text('预测结果：')
          .fontSize(18)
          .fontFamily('HarmonyHeiTi-Bold7&')
          .align(Alignment.Start)
          .width('100%')
        Row() {
          ForEach(this.resultRed, (item: string, index: number) => {
            this.ballItemBuild(item, true)
          }, (item: string, index: number) => item + index)
        }
        .padding({ top: 20 })
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')

        Row() {
          ForEach(this.resultBlue, (item: string, index: number) => {
            if (index > 0) {
              this.ballItemBuild(item, false, 15)
            } else {
              this.ballItemBuild(item, false)
            }
          }, (item: string, index: number) => item + index)
        }
        .padding({ top: 20 })
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.Start)
        .width('100%')
      }
      .width('100%')
      .height(550)
      .padding(10)
      .borderRadius(20)
      .backgroundColor(Color.White)

      Column({ space: 20 }) {
        Button('开 始 预 测 ')
          .stateEffect(true)
          .width('80%')
          .onClick(() => {
            this.resultRed = []
            this.resultBlue = []
            for (let i = 0; i < 6; i++) {
              let randomIndex = Math.floor(Math.random() * this.commonData.redBall.length)
              this.resultRed.push(this.commonData.redBall[randomIndex])
              this.commonData.redBall.splice(randomIndex, 1)
            }

            for (let i = 0; i < 2; i++) {
              let randomIndex = Math.floor(Math.random() * this.commonData.blueBall.length)
              this.resultBlue.push(this.commonData.blueBall[randomIndex])
              this.commonData.blueBall.splice(randomIndex, 1)
            }
            // 重新初始化数据
            this.commonData.initData()
          })

        Text("预测结果仅供娱乐使用，如出现一夜暴富，纯属巧合！")
      }
      .height(100)
      .width('100%')
      .margin({ bottom: 30, top: 10 })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
  }
}