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

@Entry
@Component
struct SwitchMatrix {

  @State clickGreen:number=1
  @State clickBlue:number=1
  private arr: 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]
  private oneArr: 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]
  build() {
    Column(){
      Stack(){
        TitleComponent()
        Text('开关矩阵')
          .fontSize($r('app.float.fontSize_30'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.black_100'))
      }
      Row(){
        Column(){
          Text('开关矩阵')
            .fontSize($r('app.float.fontSize_30'))
            .fontWeight(FontWeight.Medium)
            .width('100%')
            .height(px2vp(30))
            .textAlign(TextAlign.Start)
            .margin({bottom:px2vp(24)})
          Text('输入通道')
            .fontSize($r('app.float.fontSize_24'))
            .fontWeight(FontWeight.Medium)
            .width('100%')
            .height(px2vp(30))
            .textAlign(TextAlign.Start)
            .margin({bottom:px2vp(50)})
          Row(){
            Grid() {
              ForEach(this.arr, (item:number,index:number) => {
                GridItem() {
                  Stack(){
                    if (this.clickGreen===item) {
                      Image($r('app.media.number_background_green'))
                    }
                    Text(item.toString())
                      .fontSize($r('app.float.fontSize_24'))

                  }.width(px2vp(85))
                  .height(px2vp(85))
                  .onClick(()=>{
                    this.clickGreen=item
                  })
                }
              }, (item: string) => item)

            }
            .width(px2vp(765))
            .height(px2vp(255))
          }.width(px2vp(765))
          .height(px2vp(255))
          Text('输出通道')
            .fontSize($r('app.float.fontSize_24'))
            .fontWeight(FontWeight.Medium)
            .width('100%')
            .height(px2vp(30))
            .textAlign(TextAlign.Start)
            .margin({top:px2vp(84)})
            .margin({bottom:px2vp(33)})
          Row(){
            Grid() {
              ForEach(this.oneArr, (item:number,index:number) => {
                GridItem() {
                  Stack(){
                    if (this.clickBlue===item) {
                      Image($r('app.media.number_background_blue'))
                    }
                    Text(item.toString())
                      .fontSize($r('app.float.fontSize_24'))

                  }.width(px2vp(85))
                  .height(px2vp(85))
                  .onClick(()=>{
                    this.clickBlue=item
                  })
                }
              }, (item: string) => item)

            }
            .width(px2vp(765))
            .height(px2vp(255))
          }.width(px2vp(765))
          .height(px2vp(255))


        }.width(px2vp(1118))
        .height(px2vp(900))
        .padding(px2vp(30))
        .margin({left:px2vp(60),right:px2vp(40)})
        .backgroundColor($r('app.color.white_100'))
        Column(){
          Text('维修操作终端')
            .fontSize($r('app.float.fontSize_30'))
            .fontWeight(FontWeight.Medium)
            .width('100%')
            .height(px2vp(35))
            .textAlign(TextAlign.Start)
            .margin({bottom:px2vp(60)})

          Column(){
            Text('当前输入通道')
              .fontSize($r('app.float.fontSize_24'))
              .fontWeight(FontWeight.Medium)
              .width('100%')
              .height(px2vp(35))
              .textAlign(TextAlign.Start)
              .margin({bottom:px2vp(30)})
            Text(this.clickGreen.toString())
              .fontSize($r('app.float.fontSize_60'))
              .fontWeight(FontWeight.Bold)
              .width('100%')
              .height(px2vp(60))
              .textAlign(TextAlign.Center)
              .margin({bottom:px2vp(24)})
            Button('设置')
              .fontSize($r('app.float.fontSize_24'))
              .fontWeight(FontWeight.Medium)
              .width(px2vp(292))
              .height(px2vp(80))
              .margin({bottom:px2vp(30)})
          }.width(px2vp(450))
          .height(px2vp(279))
          .padding(px2vp(30))
          .backgroundColor($r('app.color.white_f1f3f5'))
          .margin({bottom:px2vp(60)})
          Column(){
            Text('当前输出通道')
              .fontSize($r('app.float.fontSize_24'))
              .fontWeight(FontWeight.Medium)
              .width('100%')
              .height(px2vp(35))
              .textAlign(TextAlign.Start)
              .margin({bottom:px2vp(30)})
            Text(this.clickBlue.toString())
              .fontSize($r('app.float.fontSize_60'))
              .fontWeight(FontWeight.Bold)
              .width('100%')
              .height(px2vp(60))
              .textAlign(TextAlign.Center)
              .margin({bottom:px2vp(24)})

            Button('设置')
              .fontSize($r('app.float.fontSize_24'))
              .fontWeight(FontWeight.Medium)
              .width(px2vp(292))
              .height(px2vp(80))
              .margin({bottom:px2vp(30)})

          }.width(px2vp(450))
          .height(px2vp(279))
          .padding(px2vp(30))
          .backgroundColor($r('app.color.white_f1f3f5'))
          .margin({bottom:px2vp(60)})


        }
        .padding(px2vp(30))
        .width(px2vp(642))
        .height(px2vp(900))
        .margin({left:px2vp(60)})
        .backgroundColor($r('app.color.white_100'))
        .margin({right:px2vp(60)})

      }.width(px2vp(1920))
      .height(px2vp(900))
      .margin({top:px2vp(60),bottom:px2vp(40)})
    }.width(px2vp(1920))
    .height(px2vp(1080))
    .backgroundColor($r('app.color.white_f1f3f5'))
  }
}