@Component
export struct InfoRow {
  label: string = ''
  @Prop value: string = ''
  valueColor?: Resource = $r('app.color.FFFFFF') // 默认白色，可覆盖

  build() {
    Row({ space: 5 }) {
      Circle()
        .width($r('app.float.virtualSize_3'))
        .height($r('app.float.virtualSize_3'))
        .fill($r('app.color.FFFFFF'))

      Text(this.label)
        .fontColor($r('app.color.FFFFFF'))
        .fontSize($r('app.float.fontSize_8'))

      Text(this.value)
        .fontColor(this.valueColor)
        .fontSize($r('app.float.fontSize_8'))
    }
    .width('100%')
  }
}

@Component
export struct RgvButton {
  @Prop text: string = ''
  // 按钮图标资源
  @Prop icon: Resource = $r('app.media.rgv_turn_off')
  @State scaleValue : number = 1
  onButtonClick: () => void = () => {}
  build() {
    Button({type: ButtonType.Normal}) {
      Row() {
        Image(this.icon)
          .width('10%')
          .height('50%')
          .margin({ right: '5%' ,left:'10%'})
        Text(this.text)
          .fontSize($r('app.float.fontSize_12'))
          .fontColor($r('app.color.FFFFFF'))
      }.justifyContent(FlexAlign.Start).width('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.20FFFFFF'))
    .borderRadius($r('app.float.virtualSize_6_4'))
    .scale({ x: this.scaleValue, y: this.scaleValue })
    .animation({
      duration: 200,
      curve: Curve.Linear  // 弹性曲线更生动
    })
    .onClick(() => {
      this.scaleValue = 0.9;  // 点击时缩小
      setTimeout(() => {
        this.scaleValue = 1; // 0.2秒后恢复
      }, 200);
      if (this.onButtonClick) {
        this.onButtonClick()
      }
    })
  }
}

@Entry
@Component
export struct RobotSelector {
  private scrollerForList: Scroller = new Scroller()
  @State isListVisible: boolean = false
  @Prop robotsList: string[] = ["",""]
  // @Link selectRobotIndex: number
  @State selectedRobot: string =''

  build() {
    Column() {
      // 主体按钮
      Button({type:ButtonType.Normal}) {
        Row() {
          Text(this.selectedRobot)
            .fontColor($r('app.color.FFFFFF'))
            .fontSize($r('app.float.fontSize_12'))
            .margin({left:'5%'})
          Image($r('app.media.general_return'))
            .height($r('app.float.virtualSize_22_4'))
            .width($r('app.float.virtualSize_22_4'))
            .fillColor($r('app.color.FFFFFF'))
            .margin({left:'30%'})
            .rotate({ // 添加旋转属性
              angle: -90, // 逆时针旋转90度（负值表示逆时针）
              centerX: '50%', // 旋转中心X轴位置（相对宽度）
              centerY: '50%'  // 旋转中心Y轴位置（相对高度）
            })
        }
        .width('100%')
        .justifyContent(FlexAlign.Start)
      }
      .width('100%')
      .height('25%')
      .backgroundColor($r('app.color.20FFFFFF')) // 灰色背景
      .borderRadius($r('app.float.virtualSize_6_4'))
      .onClick(() => {
        this.isListVisible = !this.isListVisible
      })

      if (this.isListVisible) {
        Column() {
          List({ space: 8, scroller: this.scrollerForList }) {
            ForEach(this.robotsList, (item: string) => {
              ListItem() {
                Column() {
                  Text(item)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_12'))
                }
                .padding(12)
              }
              .onClick(() => {
                this.selectedRobot = item
                this.isListVisible = false
              })
            })
          }. divider({
            strokeWidth: 1,
            color: $r('app.color.20FFFFFF')
          })
        }
        .width('100%')
        .borderRadius(8)
        .backgroundColor($r('app.color.20FFFFFF')) // 列表背景色
        .height('80%')
        .margin({top:'1%'})
      }
    }
    .width('100%')
    .height('100%')
  }
}


@Component
export struct MoveControllerButton {
  @State scaleValue : number = 1
  @Prop icon: Resource = $r('app.media.rgv_turn_off')
  onButtonClick: () => void = () => {}
  build() {
    Row() {
      Button({ type: ButtonType.Normal }) {
        Image(this.icon)
          .width('50%')
          .height('50%')
          .objectFit(ImageFit.Contain)
          .fillColor($r('app.color.FFFFFF'))
      }
      .width('100%')
      .height('100%')
      .backgroundColor($r('app.color.20FFFFFF'))
      .borderRadius($r('app.float.virtualSize_6_4'))
      .scale({ x: this.scaleValue, y: this.scaleValue })
      .animation({
        duration: 200,
        curve: Curve.Linear  // 弹性曲线更生动
      })
      .onClick(() => {
        this.scaleValue = 0.9; // 点击时缩小
        setTimeout(() => {
          this.scaleValue = 1; // 0.2秒后恢复
        }, 200);
        if (this.onButtonClick) {
          this.onButtonClick()
        }
      })
    }
  }
}


// 在文件顶部或单独组件文件中定义
@CustomDialog
export struct CommonConfirmDialog {
  @State title: string = '提示'
  @State message: string = '确定要执行此操作吗？'
  @State confirmText: string = '确定'
  @State cancelText: string = '取消'

  controller: CustomDialogController
  onConfirm: () => void = () => {}

  build() {
    Column() {
      // 标题
      Column(){
        Text(this.title)
          .fontColor($r('app.color.FFFFFF'))
          .fontSize($r('app.float.fontSize_15_2'))
      }.height('30%')
      .justifyContent(FlexAlign.Center)
      Column(){
        Text(this.message)
          .fontColor($r('app.color.30FFFFFF'))
          .fontSize($r('app.float.fontSize_12'))
      }.height('30%')
      .justifyContent(FlexAlign.Center)

      Column(){
        Divider()
          .vertical(false)
          .strokeWidth(1)
          .color($r('app.color.20FFFFFF'))
        Row(){
          Row(){
            Text('取消')
              .fontColor($r('app.color.60FFFFFF'))
              .fontSize($r('app.float.fontSize_12'))
          }
          .justifyContent(FlexAlign.Center)
          .width('50%')
          .onClick(() => this.controller.close())
          Divider()
            .vertical(true)
            .strokeWidth(1)
            .color($r('app.color.20FFFFFF'))
          Row(){
            Text('确认')
              .fontColor($r('app.color.007AFF'))
              .fontSize($r('app.float.fontSize_12'))
          }
          .justifyContent(FlexAlign.Center)
          .width('50%')
          .onClick(() => {
            this.onConfirm();
            this.controller.close();
          })
        }
      }
      .width('100%')
      .height('30%')
      // // 按钮区域
      // Flex({ justifyContent: FlexAlign.SpaceAround }) {
      //   Button(this.cancelText, { type: ButtonType.Normal })
      //     .width('45%')
      //     .backgroundColor('#0A84FF')
      //     .fontColor($r('app.color.FFFFFF'))
      //     .onClick(() => this.controller.close())
      //
      //   Button(this.confirmText, { type: ButtonType.Normal })
      //     .width('45%')
      //     .backgroundColor($r('app.color.0A84FF'))
      //     .fontColor($r('app.color.FFFFFF'))
      //     .onClick(() => {
      //       this.onConfirm();
      //       this.controller.close();
      //     })
      // }
      // .width('100%')
      // .margin({ bottom: 20 })
    }
    .height(200)
    .width(400)
    .backgroundColor($r('app.color.2A2A2A'))
    .justifyContent(FlexAlign.End)
    .borderRadius(16)
  }
}

// 弹窗组件定义
@CustomDialog
export struct MoveDialog {
  @Link rgvEndX: number
  @Link rgvEndY: number
  controller: CustomDialogController
  onConfirm: () => void = () => {}

  build() {
    Column() {
      Column(){
        Text('终点移动')
          .fontColor($r('app.color.FFFFFF'))
          .fontSize($r('app.float.fontSize_15_2'))
      }.height('30%')
      .justifyContent(FlexAlign.Center)

      Text('设置终点坐标')
        .fontColor($r('app.color.FFFFFF'))
        .fontSize($r('app.float.fontSize_8'))
        .width('70%')
        .textAlign(TextAlign.Start)
        .margin({ bottom: '2%'})

      // 输入区域
      Column() {
        // 第一个X轴输入
        Row() {
          Text('X轴')
            .fontColor($r('app.color.30FFFFFF'))
            .fontSize($r('app.float.fontSize_12'))
            .width('15%')
            .textAlign(TextAlign.Center)
            .margin({top:'10%',bottom:'10%'})

          Divider()
            .vertical(true)
            .strokeWidth(1)
            .color($r('app.color.20FFFFFF'))
            .margin({top:'2%',bottom:'2%'})
          TextInput({ text: `${this.rgvEndX }`})
            .width('85%')
            .height('100%')
            .backgroundColor('#000000')
            .fontSize($r('app.float.fontSize_12'))
            .fontColor($r('app.color.FFFFFF'))
            .type(InputType.Number)
            .maxLength(2)
            .onChange((value: string) => {
              let num = Number(value);
              num = Math.max(1, Math.min(num, 9));
              this.rgvEndX = num;
            })
        }
        .backgroundColor($r('app.color.000000'))
        .width('70%')
        .height('40%')
        .borderRadius($r('app.float.virtualSize_11_6'))

        // 第二个X轴输入
        Row() {
          Text('Y轴')
            .fontColor($r('app.color.30FFFFFF'))
            .fontSize($r('app.float.fontSize_12'))
            .width('15%')
            .textAlign(TextAlign.Center)
          Divider()
            .vertical(true)
            .strokeWidth(1)
            .color($r('app.color.20FFFFFF'))
            .margin({top:'2%',bottom:'2%'})

          TextInput({ text: String(this.rgvEndY)})
            .width('85%')
            .height('100%')
            .backgroundColor('#000000')
            .fontSize($r('app.float.fontSize_12'))
            .fontColor($r('app.color.FFFFFF'))
            .type(InputType.Number)
            .maxLength(2)
            .onChange((value: string) => {
              let num = Number(value);
              num = Math.max(1, Math.min(num, 13));
              this.rgvEndY = num;
            })
        }
        .width('70%')
        .height('40%')
        .backgroundColor($r('app.color.000000'))
        .borderRadius($r('app.float.virtualSize_11_6'))
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .height('35%')
      .margin({bottom:'10%'})
      // 按钮区域
      Column(){
        Divider()
          .vertical(false)
          .strokeWidth(1)
          .color($r('app.color.20FFFFFF'))
        Row(){
          Row(){
            Text('取消')
              .fontColor($r('app.color.60FFFFFF'))
              .fontSize($r('app.float.fontSize_12'))
          }
          .justifyContent(FlexAlign.Center)
          .width('50%')
          .onClick(() => this.controller.close())
          Divider()
            .vertical(true)
            .strokeWidth(1)
            .color($r('app.color.20FFFFFF'))
          Row(){
            Text('确认')
              .fontColor($r('app.color.007AFF'))
              .fontSize($r('app.float.fontSize_12'))
          }
          .justifyContent(FlexAlign.Center)
          .width('50%')
          .onClick(() => {
            this.onConfirm();
            this.controller.close();
          })
        }
      }
      .width('100%')
      .height('15%')

    }
    .height('40%')
    .width('30%')
    .backgroundColor($r('app.color.2A2A2A'))
    .justifyContent(FlexAlign.End)
    .borderColor($r('app.color.000000'))
    .borderWidth(1)
    .borderRadius($r('app.float.virtualSize_11_6'))
  }
}