import { TitleComponent } from '../../../commont/component/TitleComponent';

@Entry
@Component
struct ProgrammablePower {
  @State outputState:number=0
  @State current:number=0
  @State voltage:number=0
  controller: TextInputController = new TextInputController()
  build() {
    Column() {
      Stack() {
        TitleComponent()
        Text('程控电源')
          .fontSize($r('app.float.fontSize_30'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.black_100'))
      }

      Row() {
        Column({ space: px2vp(20) }) {
          Text('设备')
            .fontSize($r('app.float.fontSize_30'))
            .fontWeight(FontWeight.Medium)
            .fontColor($r('app.color.black_100'))
            .textAlign(TextAlign.Start)
            .width(px2vp(280))
            .margin({ top: px2vp(20) })

          Row(){
            Text()
              .width(px2vp(20))
              .height(px2vp(20))
              .borderRadius(px2vp(200))
              .backgroundColor($r('app.color.green_100'))
              .margin({right:px2vp(10)})
            Column(){
              Text('192.168.11.123')
                .fontSize($r('app.float.fontSize_24'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.black_100'))
                .width(px2vp(220))
              Text('端口号')
                .fontSize($r('app.float.fontSize_20'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.black_100'))
                .width(px2vp(200))
            }
            .justifyContent(FlexAlign.Center)
            .height(px2vp(80))
            .width(px2vp(220))


          }.width(px2vp(292))
          .height(px2vp(80))
          .padding({left:px2vp(10),right:px2vp(10)})
          .backgroundColor('#1a0a59f7')
          .borderRadius(px2vp(16))

        }
        .width(px2vp(332))
        .height(px2vp(960))
        .backgroundColor($r('app.color.white_60'))
        .borderRadius(px2vp(16))
        .margin({ right: px2vp(20) })

        Column() {
          Text('控制')
            .fontSize($r('app.float.fontSize_30'))
            .fontWeight(FontWeight.Medium)
            .fontColor($r('app.color.black_100'))
            .textAlign(TextAlign.Start)
            .width(px2vp(1388))
          Row({space:px2vp(20)}){
            Column(){
              Row(){
                Image($r('app.media.voltage'))
                  .width(px2vp(48))
                  .height(px2vp(48))
                Text('电压')
                  .fontSize($r('app.float.fontSize_24'))
                  .fontWeight(FontWeight.Medium)
                  .fontColor($r('app.color.black_100'))
                  .textAlign(TextAlign.Start)
                  .width(px2vp(280))

              }
              .width(px2vp(408))
              .height(px2vp(48))
              Blank()
              Column(){
                Text('0'+'v')
                  .fontSize($r('app.float.fontSize_38'))
                  .fontWeight(FontWeight.Bold)
                  .fontColor($r('app.color.blue_100'))
                  .textAlign(TextAlign.Start)
                Text('实际电压')
                  .fontSize($r('app.float.fontSize_20'))
                  .fontWeight(FontWeight.Medium)
                  .fontColor($r('app.color.blue_20'))
                  .textAlign(TextAlign.Start)

              }
              .width(px2vp(408))
              .height(px2vp(100))
              Blank()
              Column(){
                Text('设置(v)')
                  .fontSize($r('app.float.fontSize_20'))
                  .fontWeight(FontWeight.Medium)
                  .fontColor($r('app.color.gray_6666'))
                  .textAlign(TextAlign.Start)
                  .width(px2vp(292))
                Row(){
                  Image($r('app.media.add'))
                    .width(px2vp(80))
                    .height(px2vp(80))
                    .backgroundColor($r('app.color.black_6'))
                    .borderRadius(px2vp(100))
                    .onClick(()=>{
                      this.voltage++
                    })
                  TextInput({ text:this.voltage.toString() , controller: this.controller })
                    .inputFilter('[(-1)-999]', () => {
                    })
                    .type(InputType.Normal)
                    .enableKeyboardOnFocus(false)
                    .fontSize($r('app.float.fontSize_38'))
                    .fontWeight(FontWeight.Bold)
                    .fontColor($r('app.color.black_100'))
                    .textAlign(TextAlign.Center)
                    .width(px2vp(132))
                    .height(px2vp(80))
                    .backgroundColor($r('app.color.white_100'))
                    .onChange((value: string) => {
                      if (Number(value)<999) {
                        this.voltage=Number(value)
                      }
                    })
                  Image($r('app.media.minus'))
                    .width(px2vp(80))
                    .height(px2vp(80))
                    .backgroundColor($r('app.color.black_6'))
                    .borderRadius(px2vp(100))
                    .onClick(()=>{
                      if (this.voltage>0) {
                        this.voltage--
                      }

                    })
                }.width(px2vp(292))
                .height(px2vp(80))
                .borderRadius(px2vp(50))
                .backgroundColor($r('app.color.white_100'))



              }.width(px2vp(408))
              .height(px2vp(100))
              .borderRadius(px2vp(16))
             .margin({bottom:px2vp(70)})

            }
            .width(px2vp(448))
            .height(px2vp(610))
            .padding(px2vp(20))
            .borderRadius(px2vp(16))
            .backgroundColor($r('app.color.black_10'))
            Column(){
              Row(){
                Image($r('app.media.current'))
                  .width(px2vp(48))
                  .height(px2vp(48))
                Text('电流')
                  .fontSize($r('app.float.fontSize_24'))
                  .fontWeight(FontWeight.Medium)
                  .fontColor($r('app.color.black_100'))
                  .textAlign(TextAlign.Start)
                  .width(px2vp(280))

              }
              .width(px2vp(408))
              .height(px2vp(48))
              Blank()
              Column(){
                Text('0'+'A')
                  .fontSize($r('app.float.fontSize_38'))
                  .fontWeight(FontWeight.Bold)
                  .fontColor($r('app.color.blue_100'))
                  .textAlign(TextAlign.Start)
                Text('实际电流')
                  .fontSize($r('app.float.fontSize_20'))
                  .fontWeight(FontWeight.Medium)
                  .fontColor($r('app.color.blue_20'))
                  .textAlign(TextAlign.Start)

              }
              .width(px2vp(408))
              .height(px2vp(100))
              Blank()
              Column(){
                Text('设置(A)')
                  .fontSize($r('app.float.fontSize_20'))
                  .fontWeight(FontWeight.Medium)
                  .fontColor($r('app.color.gray_6666'))
                  .textAlign(TextAlign.Start)
                  .width(px2vp(292))
                Row(){
                  Image($r('app.media.add'))
                    .width(px2vp(80))
                    .height(px2vp(80))
                    .backgroundColor($r('app.color.black_6'))
                    .borderRadius(px2vp(100))
                    .onClick(()=>{
                      this.current++
                    })
                  TextInput({ text:this.current.toString() , controller: this.controller })
                    .inputFilter('[(-1)-999]', () => {
                    })
                    .enableKeyboardOnFocus(false)
                    .fontSize($r('app.float.fontSize_38'))
                    .fontWeight(FontWeight.Bold)
                    .fontColor($r('app.color.black_100'))
                    .textAlign(TextAlign.Center)
                    .width(px2vp(132))
                    .height(px2vp(80))
                    .backgroundColor($r('app.color.white_100'))
                    .onChange((value: string) => {
                      if (Number(value)<999) {
                        this.current=Number(value)
                      }
                    })
                  Image($r('app.media.minus'))
                    .width(px2vp(80))
                    .height(px2vp(80))
                    .backgroundColor($r('app.color.black_6'))
                    .borderRadius(px2vp(100))
                    .onClick(()=>{
                      if (this.current>0) {
                        this.current--
                      }

                    })
                }.width(px2vp(292))
                .height(px2vp(80))
                .borderRadius(px2vp(50))
                .backgroundColor($r('app.color.white_100'))



              }.width(px2vp(408))
              .height(px2vp(100))
              .borderRadius(px2vp(16))
              .margin({bottom:px2vp(70)})

            }
            .width(px2vp(448))
            .height(px2vp(610))
            .padding(px2vp(20))
            .borderRadius(px2vp(16))
            .backgroundColor($r('app.color.black_10'))

          }
          .width(px2vp(916))
          .height(px2vp(610))
          Column(){
            Row(){
              Text('输入状态:')
                .fontSize($r('app.float.fontSize_20'))
                .fontWeight(FontWeight.Regular)
                .fontColor($r('app.color.black_100'))
                .textAlign(TextAlign.Center)
                .margin({right:px2vp(5)})
              Text(this.outputState===1?'正在输出':this.outputState===2?'未输出':'')
                .fontSize($r('app.float.fontSize_24'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.black_100'))
                .textAlign(TextAlign.Center)
            }
            .width(px2vp(916))
            .height(px2vp(30))
            .justifyContent(FlexAlign.Center)
            Row({space:px2vp(20)}){
              Button('输出', { type: ButtonType.Normal, stateEffect: true })
                .borderRadius(8)
                .backgroundColor($r('app.color.green_100'))
                .width(px2vp(292))
                .borderRadius(px2vp(76))
                .height(px2vp(80))
                .onClick(()=>{
                  this.outputState=1
                })
              Button('停止输出', { type: ButtonType.Normal, stateEffect: true })
                .borderRadius(8)
                .backgroundColor($r('app.color.red_100'))
                .width(px2vp(292))
                .borderRadius(px2vp(76))
                .height(px2vp(80))
                .onClick(()=>{
                  this.outputState=2
                })
            } .width(px2vp(650))
            .height(px2vp(80))
            .justifyContent(FlexAlign.Center)
          }
          .width(px2vp(916))
          .height(px2vp(110))
          .margin({top:px2vp(122)})
        }
        .width(px2vp(1448))
        .height(px2vp(960))
        .padding(px2vp(30))
        .backgroundColor($r('app.color.white_60'))
        .borderRadius(px2vp(16))

      }.width(px2vp(1920))
      .height(px2vp(1000))
      .padding({ top: px2vp(20), bottom: px2vp(20), right: px2vp(60), left: px2vp(60) })

    }.width(px2vp(1920))
    .height(px2vp(1080))
    .backgroundImage($r('app.media.BG_two'))
  }
}