import router from '@ohos.router'
import { TitleComponent } from '../../../commont/component/TitleComponent'

@Entry
@Component
struct PXISwitch {
  @State Thoroughfare1:number=0
  @State Thoroughfare2:number=0
  @State Thoroughfare3:number=0
  @State Thoroughfare4:number=0
  //点击选择通道变色
  @State clickBlue:number=-1
  @State thoroughfare:number[]=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64]
  //选择通道1：默认通道1，2：通道2,3：通道3，4：通道四
  @State selectThoroughfare:number=1
  @State text: string = "siot2"
  @State number1: string  ='1'
  @State index: number = 2
  @State index1: number = 2
  @State space: number = 8
  @State arrowPosition: ArrowPosition = ArrowPosition.END
  @State arrowPosition1: ArrowPosition = ArrowPosition.END
  build() {
    Column(){
      Stack(){
        TitleComponent()
        Text('PXI')
          .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))

          Row(){
            Text()
              .width(px2vp(20))
              .height(px2vp(20))
              .borderRadius(px2vp(200))
              .backgroundColor($r('app.color.green_100'))
              .margin({right:px2vp(10)})
            Text('1#')
              .fontSize($r('app.float.fontSize_24'))
              .fontWeight(FontWeight.Medium)
              .fontColor($r('app.color.black_100'))
            Blank()
            Column(){
              Text(this.Thoroughfare1.toString())
                .fontSize($r('app.float.fontSize_24'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.black_100'))
              Text('通道')
                .fontSize($r('app.float.fontSize_20'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.black_100'))
            }
            .justifyContent(FlexAlign.Center)
            .height(px2vp(80))


          }.width(px2vp(292))
          .height(px2vp(80))
          .padding({left:px2vp(10),right:px2vp(10)})
          .backgroundColor(this.selectThoroughfare===1?('#1a0a59f7'):$r('app.color.white_100'))
          .borderRadius(px2vp(16))
          .onClick(()=>{
            this.selectThoroughfare=1
          })
          Row(){
            Text()
              .width(px2vp(20))
              .height(px2vp(20))
              .borderRadius(px2vp(200))
              .backgroundColor($r('app.color.green_100'))
              .margin({right:px2vp(10)})
            Text('2#')
              .fontSize($r('app.float.fontSize_24'))
              .fontWeight(FontWeight.Medium)
              .fontColor($r('app.color.black_100'))
            Blank()
            Column(){
              Text(this.Thoroughfare2.toString())
                .fontSize($r('app.float.fontSize_24'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.black_100'))
              Text('通道')
                .fontSize($r('app.float.fontSize_20'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.black_100'))
            }
            .justifyContent(FlexAlign.Center)
            .height(px2vp(80))


          }.width(px2vp(292))
          .height(px2vp(80))
          .padding({left:px2vp(10),right:px2vp(10)})
          .backgroundColor(this.selectThoroughfare===2?('#1a0a59f7'):$r('app.color.white_100'))
          .borderRadius(px2vp(16))
          .onClick(()=>{
            this.selectThoroughfare=2
          })
          Row(){
            Text()
              .width(px2vp(20))
              .height(px2vp(20))
              .borderRadius(px2vp(200))
              .backgroundColor($r('app.color.green_100'))
              .margin({right:px2vp(10)})
            Text('3#')
              .fontSize($r('app.float.fontSize_24'))
              .fontWeight(FontWeight.Medium)
              .fontColor($r('app.color.black_100'))
            Blank()
            Column(){
              Text(this.Thoroughfare3.toString())
                .fontSize($r('app.float.fontSize_24'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.black_100'))
              Text('通道')
                .fontSize($r('app.float.fontSize_20'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.black_100'))
            }
            .justifyContent(FlexAlign.Center)
            .height(px2vp(80))


          }.width(px2vp(292))
          .height(px2vp(80))
          .padding({left:px2vp(10),right:px2vp(10)})
          .backgroundColor(this.selectThoroughfare===3?('#1a0a59f7'):$r('app.color.white_100'))
          .borderRadius(px2vp(16))
          .onClick(()=>{
            this.selectThoroughfare=3
          })
          Row(){
            Text()
              .width(px2vp(20))
              .height(px2vp(20))
              .borderRadius(px2vp(200))
              .backgroundColor($r('app.color.green_100'))
              .margin({right:px2vp(10)})
            Text('4#')
              .fontSize($r('app.float.fontSize_24'))
              .fontWeight(FontWeight.Medium)
              .fontColor($r('app.color.black_100'))
            Blank()
            Column(){
              Text(this.Thoroughfare4.toString())
                .fontSize($r('app.float.fontSize_24'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.black_100'))
              Text('通道')
                .fontSize($r('app.float.fontSize_20'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.black_100'))
            }
            .justifyContent(FlexAlign.Center)
            .height(px2vp(80))


          }.width(px2vp(292))
          .height(px2vp(80))
          .padding({left:px2vp(10),right:px2vp(10)})
          .backgroundColor(this.selectThoroughfare===4?('#1a0a59f7'):$r('app.color.white_100'))
          .borderRadius(px2vp(16))
          .onClick(()=>{
            this.selectThoroughfare=4
          })

        }
        .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))
            .height(px2vp(60))
          Blank()
          Column(){
            Grid() {
              ForEach(this.thoroughfare, (item:number,index:number) => {
                GridItem() {
                  Stack(){
                    if (this.clickBlue===item) {
                      Image($r('app.media.number_background_blue'))
                        .borderRadius(px2vp(50))
                        .width(px2vp(85))
                        .height(px2vp(85))
                    }
                    Text(item.toString())
                      .fontWeight(FontWeight.Medium)
                      .fontSize($r('app.float.fontSize_24'))
                  }.width(px2vp(85))
                  .height(px2vp(85))
                  .borderRadius(px2vp(50))
                  .onClick(()=>{
                    this.clickBlue=item
                    if (this.selectThoroughfare===1) {
                      this.Thoroughfare1=item
                    }else if (this.selectThoroughfare===2){
                      this.Thoroughfare2=item
                    }else if (this.selectThoroughfare===3){
                      this.Thoroughfare3=item
                    }else if (this.selectThoroughfare===4){
                      this.Thoroughfare4=item
                    }
                  })

                }
              }, (item: string) => item)

            }
            .width(px2vp(850))
            .height(px2vp(595))
          }
          .width(px2vp(850))
          .height(px2vp(595))
          Blank()
          Button('确认', { type: ButtonType.Capsule, stateEffect: true })
            .backgroundColor(0x317aff).width(px2vp(292))
            .height(px2vp(80))
          Blank()


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