import { DataManagement } from '../view/DataManagement'
import { DetectingSystem } from '../view/DetectingSystem'
import { DeviceManagement } from '../view/DeviceManagement'
import { OperationTerminal } from '../view/OperationTerminal'
import process from '@ohos.process'

@Entry
@Component
struct Index {
  @State clickSelect:number=0
  build() {
    Column() {
      Row(){
        Image($r('app.media.logo'))
          .width(px2vp(210))
          .height(px2vp(50))
          .objectFit(ImageFit.Contain)
          .margin({left:px2vp(40)})
        Blank()
        Image($r('app.media.homePage'))
          .margin({right:px2vp(40)})
          .width(px2vp(48))
          .height(px2vp(48))
        Image($r('app.media.news'))
          .margin({right:px2vp(40)})
          .width(px2vp(48))
          .height(px2vp(48))
        Image($r('app.media.personal'))
          .margin({right:px2vp(40)})
          .width(px2vp(48))
          .height(px2vp(48))
          .onClick(()=>{
            let pro = new process.ProcessManager();
            pro.exit(0);
          })
      }.width(px2vp(1920))
      .height(px2vp(80))
      .alignItems(VerticalAlign.Center)
      Row(){
        Column(){
            Column(){
              Text('本地设备管理')
                .fontSize($r('app.float.fontSize_30'))
                .fontColor(this.clickSelect==0?'#FFFF':'#1a1a1a')
                .fontWeight(FontWeight.Medium)
              Text('PAC控制仪器仪表')
                .fontSize($r('app.float.fontSize_20'))
                .fontColor(this.clickSelect==0?'#FFFF':'#666666')
                .fontWeight(FontWeight.Regular)
            }.width(px2vp(542))
            .height(px2vp(186))
            .padding({left:px2vp(30)})
            .borderRadius(px2vp(8))
            .alignItems(HorizontalAlign.Start)
            .justifyContent(FlexAlign.Center)
            .backgroundImage(this.clickSelect===0?$r('app.media.device_management_black'):$r('app.media.device_management'))
            .onClick(()=>{
              this.clickSelect=0
            })
            Column(){
              Text('维修检测系统')
                .fontSize($r('app.float.fontSize_30'))
                .fontColor(this.clickSelect==1?$r('app.color.white_100'):'#1a1a1a')
                .fontWeight(FontWeight.Medium)
              Text('鸿蒙电子测试系统')
                .fontSize($r('app.float.fontSize_20'))
                .fontColor(this.clickSelect==1?$r('app.color.white_100'):'#666666')
                .fontWeight(FontWeight.Regular)


            }.width(px2vp(542))
            .height(px2vp(186))
            .alignItems(HorizontalAlign.Start)
            .justifyContent(FlexAlign.Center)
            .padding({left:px2vp(30)})
            .borderRadius(px2vp(8))
            .margin({top:px2vp(30)})
            .backgroundImage(this.clickSelect===1?$r('app.media.detecting_system_black'):$r('app.media.detecting_system'))
            .onClick(()=>{
              this.clickSelect=1
            })

            Column(){
              Text('维修操作终端')
                .fontSize($r('app.float.fontSize_30'))
                .fontColor(this.clickSelect==2?$r('app.color.white_100'):'#1a1a1a')
                .fontWeight(FontWeight.Medium)
              Text('维修功能子系统')
                .fontSize($r('app.float.fontSize_20'))
                .fontColor(this.clickSelect==2?$r('app.color.white_100'):'#666666')
                .fontWeight(FontWeight.Regular)
            }.width(px2vp(542))
            .height(px2vp(186))
            .margin({top:px2vp(30)})
            .alignItems(HorizontalAlign.Start)
            .justifyContent(FlexAlign.Center)
            .padding({left:px2vp(30)})
            .borderRadius(px2vp(8))
            .backgroundImage(this.clickSelect===2?$r('app.media.operation_terminal_black'):$r('app.media.operation_terminal'))
            .onClick(()=>{
              this.clickSelect=2
            })

            Column(){
              Text('维修数据管理')
                .fontSize($r('app.float.fontSize_30'))
                .fontColor(this.clickSelect==3?$r('app.color.white_100'):'#1a1a1a')
                .fontWeight(FontWeight.Medium)
              Text('维修进度与结果查询')
                .fontSize($r('app.float.fontSize_20'))
                .fontColor(this.clickSelect==3?$r('app.color.white_100'):'#666666')
                .fontWeight(FontWeight.Regular)


            }.width(px2vp(542))
            .height(px2vp(186))
            .alignItems(HorizontalAlign.Start)
            .justifyContent(FlexAlign.Center)
            .padding({left:px2vp(30)})
            .borderRadius(px2vp(8))
            .margin({top:px2vp(30)})
            .backgroundImage(this.clickSelect===3?$r('app.media.data_management_black'):$r('app.media.data_management'))
            .onClick(()=>{
              this.clickSelect=3
            })




        }.width(px2vp(542))
        .height(px2vp(900))
        .margin({left:px2vp(60),right:px2vp(40)})

        Image($r('app.media.midline')).width(px2vp(40))
        .height(px2vp(900))

        if (this.clickSelect===0){
          //本地设备管理

          DeviceManagement()
        }else if(this.clickSelect===1){
          //维修检测系统
          DetectingSystem()
        }
        else if(this.clickSelect===2){
          //维修操作终端
          OperationTerminal()
        }
        else if(this.clickSelect===3){
          //维修数据管理
          DataManagement()
        }


      }.width(px2vp(1920))
      .height(px2vp(900))
      .margin({top:px2vp(60),bottom:$r('app.float.topMargins_20')})
    }
    .padding({bottom:$r('app.float.topMargins_20')})
    .width(px2vp(1920))
    .height(px2vp(1080))
    .backgroundImage($r('app.media.background'))
  }
}
