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

@Entry
@Component
struct ElectronicLoad {
  //端口 1:端口1， 2:端口2, 3：端口3, 4：端口4
  @State port:number=0

  //   //1：恒压模式，2：恒流 3：恒功率 4：恒电阻
  @State mode:number=0

  @State resistance:number=0
  @State power:number=0
  @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(this.port===1?('#1a0a59f7'):$r('app.color.white_100'))
          .borderRadius(px2vp(16))
          .onClick(()=>{
            this.port=1
          })
          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(this.port===2?('#1a0a59f7'):$r('app.color.white_100'))
          .borderRadius(px2vp(16))
          .onClick(()=>{
            this.port=2
          })
          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(this.port===3?('#1a0a59f7'):$r('app.color.white_100'))
          .borderRadius(px2vp(16))
          .onClick(()=>{
            this.port=3
          })
          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(this.port===4?('#1a0a59f7'):$r('app.color.white_100'))
          .borderRadius(px2vp(16))
          .onClick(()=>{
            this.port=4
          })

        }
        .width(px2vp(332))
        .height(px2vp(960))
        .backgroundColor($r('app.color.white_60'))
        .borderRadius(px2vp(16))
        .margin({ right: px2vp(20) })
        Column(){
          Row({space:px2vp(20)}){
            Row(){
              Image(this.mode===1?$r('app.media.choice'):$r('app.media.no_Choice'))
                .width(px2vp(24))
                .height(px2vp(24))
                .margin({right:px2vp(10)})
              Text('恒压模式(CV)')
                .fontSize($r('app.float.fontSize_24'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.black_100'))
                .textAlign(TextAlign.Start)

            }.width(px2vp(292))
            .height(px2vp(80))
            .alignItems(VerticalAlign.Center)
            .padding({left:px2vp(10),right:px2vp(10)})
            .borderRadius(px2vp(16))
            .backgroundColor(this.mode===1?$r('app.color.white_100'):'')
            .onClick(()=>{
              this.mode=1
            })
            Row(){
              Image(this.mode===2?$r('app.media.choice'):$r('app.media.no_Choice'))
                .width(px2vp(24))
                .height(px2vp(24))
                .margin({right:px2vp(10)})
              Text('恒流模式(CC)')
                .fontSize($r('app.float.fontSize_24'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.black_100'))
                .textAlign(TextAlign.Start)

            }.width(px2vp(292))
            .height(px2vp(80))
            .alignItems(VerticalAlign.Center)
            .backgroundColor(this.mode===2?$r('app.color.white_100'):'')
            .onClick(()=>{
              this.mode=2
            })
            .padding({left:px2vp(10),right:px2vp(10)})
            .borderRadius(px2vp(16))
            Row(){
              Image(this.mode===3?$r('app.media.choice'):$r('app.media.no_Choice'))
                .width(px2vp(24))
                .height(px2vp(24))
                .margin({right:px2vp(10)})
              Text('恒功率模式(CW)')
                .fontSize($r('app.float.fontSize_24'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.black_100'))
                .textAlign(TextAlign.Start)

            }.width(px2vp(292))
            .height(px2vp(80))
            .alignItems(VerticalAlign.Center)
            .backgroundColor(this.mode===3?$r('app.color.white_100'):'')
            .onClick(()=>{
              this.mode=3
            })
            .padding({left:px2vp(10),right:px2vp(10)})
            .borderRadius(px2vp(16))
            Row(){
              Image(this.mode===4?$r('app.media.choice'):$r('app.media.no_Choice'))
                .width(px2vp(24))
                .height(px2vp(24))
                .margin({right:px2vp(10)})
              Text('恒电阻模式(CR)')
                .fontSize($r('app.float.fontSize_24'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.black_100'))
                .textAlign(TextAlign.Start)

            }.width(px2vp(292))
            .height(px2vp(80))

            .alignItems(VerticalAlign.Center)
            .padding({left:px2vp(10),right:px2vp(10)})
            .borderRadius(px2vp(16))
            .backgroundColor(this.mode===4?$r('app.color.white_100'):'')
            .onClick(()=>{
              this.mode=4
            })

          }
          .width(px2vp(1448))
          .height(px2vp(80))
          .padding({left:px2vp(30),right:px2vp(30)})
          .margin({bottom: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.actual_value'))
                    .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('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()


              }
              .width(px2vp(448))
              .height(px2vp(610))
              .padding(px2vp(20))
              .borderRadius(px2vp(16))
              .backgroundColor($r('app.color.black_10'))
              Column({space:px2vp(26)}){
                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('设置(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(this.mode===1?$r('app.color.white_100'):'#00000000')
                        .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(this.mode===1?$r('app.color.white_100'):'')



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

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


                Column(){
                  Row(){
                    Image($r('app.media.power'))
                      .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('设置(W)')
                      .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.power++
                        })
                      TextInput({ text:this.power.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.power=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.power>0) {
                            this.power--
                          }

                        })
                    }.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)})
                  Blank()

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



              }
              .width(px2vp(448))
              .height(px2vp(610))
              .borderRadius(px2vp(16))
              Column({space:px2vp(26)}){
                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('设置(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]', () => {
                        })
                        .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.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)})
                  Blank()

                }
                .width(px2vp(448))
                .height(px2vp(292))
                .padding(px2vp(20))
                .borderRadius(px2vp(16))
                .backgroundColor($r('app.color.black_10'))
                Column(){
                  Row(){
                    Image($r('app.media.resistance'))
                      .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('设置(W)')
                      .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.resistance++
                        })
                      TextInput({ text:this.resistance.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.resistance=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.resistance>0) {
                            this.resistance--
                          }

                        })
                    }.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)})
                  Blank()

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



              }
              .width(px2vp(448))
              .height(px2vp(610))
              .borderRadius(px2vp(16))


            }
            .width(px2vp(1448))
            .height(px2vp(610))
            .padding({left:px2vp(30),right:px2vp(30)})
            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(43)})
          }
          .width(px2vp(1448))
          .height(px2vp(862))
          .padding(px2vp(30))
          .backgroundColor($r('app.color.white_60'))
          .borderRadius(px2vp(16))
        }
        .width(px2vp(1448))
        .height(px2vp(960))



      }.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'))
  }
}