import router from '@ohos.router'
import { DeviceDialog } from '../../../commont/component/DeviceDialog'
import { BAUDClass } from './BoardTesting'

@Entry
@Component
struct CanTest {
  @State timeInterval:number=1000
  @State numberTimes:number=1
  @State data:string='00 01 02 03 04 05 06 07'
  @State index: number = 1
  @State text: string = "8"
  controller: TextInputController = new TextInputController()
  @State MultipleTransmissions:number=0
  //帧id
  @State frameId:string=''
  //连接状态1有，0没有
  @State connect:number=0
  //校验位
  @State frameFormat:string=''
  //数据位
  @State sendingMethod:string=''
  //波特率
  @State BAUD:string=''
  @State select:number=0
  //停止位
  @State frameType:string=''
  //0:表示没有，1：表示AI，2：表示通道，3：表示CAN
  @State select1:number=1
  //todo 删除
  @State select2:number=2
  @State select3:number=3
  @State select4:number=0
  @State length:number=0
  @State private lengthList:number[]=[1,2,3,4,5,6,7,8]
  @State private Number:number[]=[1,2,3,4,5,6,7,8]
  scroller: Scroller = new Scroller()
  @State clickStatus:number=0
  private dialogController: CustomDialogController = new CustomDialogController({
    builder:DeviceDialog({
      Number:this.Number,
      select1:this.select1,
      select2:this.select2,
      select3:this.select3,
      select4:this.select4,
    }),
    alignment: DialogAlignment.Center,
    customStyle:true,
    autoCancel:true,
  })
  @State SerialNumber:number=0
  aboutToAppear(): void {
    const params = router.getParams() as Record<string, number>; // 获取传递过来的参数对象
    if (params) {
      this.SerialNumber = params.info as number; // 获取info属性的值
      console.log("textTag" + this.SerialNumber)
    }
  }
  //通道号
  @State channelNumber: string = '';

  @State private receiveMessagesList:Array<receiveMessages>=[
    {SerialNumber:'000001',IntervalTime:'10805.607.490',name:"发送失败",ID:"000",typesOf:"DATA",format:"STANDARD",DLC:"8",data:"00 01 02 03 04 05 06 07",number:"1"},
  {SerialNumber:'000002',IntervalTime:'10805.607.4400',name:"发送成功",ID:"0001",typesOf:"DATA",format:"STANDARD",DLC:"2",data:"00 01 02 03 04 05 06 17",number:"8"}]
  @State private serialPort:Array<channelNumberClass>=[
    {channelNumber:'通道号1'},
    {channelNumber:'通道号2'},
    {channelNumber:'通道号3'},
    {channelNumber:'通道号4'},
    {channelNumber:'通道号5'}]
  @State private frameFormatLink:Array<frameFormatClass>=[
    {frameFormatName:'帧格式1'},
    {frameFormatName:'帧格式2'},
    {frameFormatName:'帧格式3'},
    {frameFormatName:'帧格式4'},
    {frameFormatName:'帧格式5'}]

  @State private BAUDNameList:Array<BAUDClass>=[
    {BAUDName:'波特率1'},
    {BAUDName:'波特率2'},
    {BAUDName:'波特率3'},
    {BAUDName:'波特率4'},
    {BAUDName:'波特率5'}]
  @State private sendingMethodList:Array<sendingMethodClass>=[
    {sendingMethod:'发送方式1'},
    {sendingMethod:'发送方式2'},
    {sendingMethod:'发送方式3'},
    {sendingMethod:'发送方式4'},
    {sendingMethod:'发送方式5'}]

  @State private frameTypeList:Array<frameTypeClass>=[
    {frameTypeName:'帧类型1'},
    {frameTypeName:'帧类型2'},
    {frameTypeName:'帧类型3'},
    {frameTypeName:'帧类型4'},
    {frameTypeName:'帧类型5'}]
  serialPortController: CustomDialogController = new CustomDialogController({
    builder:serialPort({
      frameFormatLink:this.frameFormatLink,
      frameFormat:this.frameFormat,
      frameTypeList:this.frameTypeList,
      frameType:this.frameType,
      sendingMethod:this.sendingMethod,
      BAUD:this.BAUD,
      select:this.select,
      serialPort:this.serialPort,
      channelNumber:this.channelNumber,
      BAUDNameList:this.BAUDNameList,
      sendingMethodList:this.sendingMethodList
    }),
    alignment: DialogAlignment.Center,
    customStyle:true,
    autoCancel:true,
  })
  lengthController: CustomDialogController = new CustomDialogController({
    builder:length({
      lengthList:this.lengthList,
      length:this.length

    }),
    alignment: DialogAlignment.Center,
    customStyle:true,
    autoCancel:true,
  })
  build() {
    Column(){
      Row() {
        Row() {
          Image($r('app.media.return'))
            .width(px2vp(48))
            .height(px2vp(48))
            .objectFit(ImageFit.Contain)
            .margin({ left: px2vp(40) })
        }.width(px2vp(500))
        .height(px2vp(80))
        .onClick(() => {
          router.back();
        })
        Blank()
        Column(){
          Text('板卡测试')
            .fontSize($r('app.float.fontSize_24'))
            .fontWeight(FontWeight.Medium)
            .fontColor($r('app.color.black_100'))
            .textAlign(TextAlign.Center)
            .width(px2vp(608))
            .height(px2vp(80))
            .borderRadius($r('app.float.borderRadius_16'))
        }
        .justifyContent(FlexAlign.Center)
        Blank()
        Row() {
          Blank()
          Image($r('app.media.homePage'))
            .margin({ right: px2vp(40) })
            .width(px2vp(48))
            .height(px2vp(48))
            .onClick(()=>{
              router.pushUrl({
                url:'pages/Index'
              })
            })
          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))
        }.width(px2vp(500))

      }.width(px2vp(1920))
      .height(px2vp(80))
      .alignItems(VerticalAlign.Center)
      .margin({bottom:px2vp(20)})
      Row() {
        Column(){
          Column(){
            Image(this.SerialNumber===1?$r('app.media.serial1'):this.SerialNumber===2?$r('app.media.serial2'):
              this.SerialNumber===3?$r('app.media.serial3'):this.SerialNumber===4?$r('app.media.serial4'):
                this.SerialNumber===5?$r('app.media.serial5'):this.SerialNumber===6?$r('app.media.serial6'):
                  this.SerialNumber===7?$r('app.media.serial7'):this.SerialNumber===8?$r('app.media.serial8'): '')
              .width(px2vp(292))
              .height(px2vp(80))
              .margin({bottom:px2vp(20)})
            Row(){
              Column(){
                Text(this.SerialNumber.toString()+'#')
                  .fontSize($r('app.float.fontSize_30'))
                  .fontWeight(FontWeight.Medium)
                  .width('100%')
                  .textAlign(TextAlign.Start)
                Text('CAN测试')
                  .fontSize($r('app.float.fontSize_24'))
                  .fontWeight(FontWeight.Medium)
                  .width('100%')
                  .fontColor('#666666')
                  .textAlign(TextAlign.Start)
              }
              .width(px2vp(200))
              Blank()
              Image($r('app.media.subscript_space'))
                .height(px2vp(45))
                .width(px2vp(45))

            }
            .alignItems(VerticalAlign.Bottom)
            .width(px2vp(292))
            .height(px2vp(75))
          }.width(px2vp(332))
          .height(px2vp(215))
          .padding(px2vp(20))
          .margin({bottom:px2vp(20)})
          .backgroundColor($r('app.color.white_100'))
          .borderRadius(px2vp(16))
          .onClick(()=>{
            this.dialogController.open()
          })
          Column(){
            Text('配置')
              .fontSize($r('app.float.fontSize_30'))
              .fontWeight(FontWeight.Medium)
              .width('100%')
              .height(px2vp(60))
              .textAlign(TextAlign.Start)
              .margin({bottom:px2vp(10)})
            Stack(){
              if (this.channelNumber===''){
                Text('选择通道号')
                  .height(px2vp(80))
                  .width(px2vp(292))
                  .fontColor($r('app.color.D1D1D1_100'))
                  .fontSize($r('app.float.fontSize_24'))
                  .padding({left:px2vp(20)})
              }
              Row(){
                Text(this.channelNumber)
                  .width(px2vp(247))
                  .height(px2vp(80))
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Center)
                  .fontSize($r('app.float.fontSize_24'))
                Blank()
                Column(){
                  Image($r('app.media.subscript_space'))
                    .height(px2vp(45))
                    .width(px2vp(45))
                }
                .width(px2vp(45))
                .height(px2vp(80))
                .justifyContent(FlexAlign.End)
              }.height(px2vp(80))
              .width(px2vp(292))
              .borderRadius(px2vp(16))
            }.height(px2vp(80))
            .width(px2vp(292))
            .borderRadius(px2vp(16))
            .margin({bottom:px2vp(20)})
            .border({width:1})
            .onClick(()=>{
              this.select=1
              this.serialPortController.open()
            })

            Stack(){
              if (this.BAUD===''){
                Text('选择波特率')
                  .height(px2vp(80))
                  .width(px2vp(292))
                  .fontColor($r('app.color.D1D1D1_100'))
                  .fontSize($r('app.float.fontSize_24'))
                  .padding({left:px2vp(20)})
              }
              Row(){
                Text(this.BAUD)
                  .width(px2vp(247))
                  .height(px2vp(80))
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Center)
                  .fontSize($r('app.float.fontSize_24'))
                Blank()
                Column(){
                  Image($r('app.media.subscript_space'))
                    .height(px2vp(45))
                    .width(px2vp(45))
                }
                .width(px2vp(45))
                .height(px2vp(80))
                .justifyContent(FlexAlign.End)
              }.height(px2vp(80))
              .width(px2vp(292))

              .borderRadius(px2vp(16))
            }.height(px2vp(80))
            .width(px2vp(292))
            .borderRadius(px2vp(16))
            .margin({bottom:px2vp(20)})
            .border({width:1})
            .onClick(()=>{
              this.select=2
              this.serialPortController.open()
            })

            Stack(){
              if (this.sendingMethod===''){
                Text('发送方式')
                  .height(px2vp(80))
                  .width(px2vp(292))
                  .fontColor($r('app.color.D1D1D1_100'))
                  .fontSize($r('app.float.fontSize_24'))
                  .padding({left:px2vp(20)})
              }
              Row(){
                Text(this.sendingMethod)
                  .width(px2vp(247))
                  .height(px2vp(80))
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Center)
                  .fontSize($r('app.float.fontSize_24'))
                Blank()
                Column(){
                  Image($r('app.media.subscript_space'))
                    .height(px2vp(45))
                    .width(px2vp(45))
                }
                .width(px2vp(45))
                .height(px2vp(80))
                .justifyContent(FlexAlign.End)
              }.height(px2vp(80))
              .width(px2vp(292))
              .borderRadius(px2vp(16))
              .onClick(()=>{
                this.select=3
                this.serialPortController.open()
              })

            }.height(px2vp(80))
            .width(px2vp(292))
            .borderRadius(px2vp(16))
            .margin({bottom:px2vp(20)})
            .border({width:1})

            Stack(){
              if (this.frameType===''){
                Text('帧类型')
                  .height(px2vp(80))
                  .width(px2vp(292))
                  .fontColor($r('app.color.D1D1D1_100'))
                  .fontSize($r('app.float.fontSize_24'))
                  .padding({left:px2vp(20)})
              }
              Row(){
                Text(this.frameType)
                  .width(px2vp(247))
                  .height(px2vp(80))
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Center)
                  .fontSize($r('app.float.fontSize_24'))
                Blank()
                Column(){
                  Image($r('app.media.subscript_space'))
                    .height(px2vp(45))
                    .width(px2vp(45))
                }
                .width(px2vp(45))
                .height(px2vp(80))
                .justifyContent(FlexAlign.End)
              }.height(px2vp(80))
              .width(px2vp(292))

              .borderRadius(px2vp(16))

            }.height(px2vp(80))
            .width(px2vp(292))
            .borderRadius(px2vp(16))
            .margin({bottom:px2vp(20)})
            .border({width:1})
            .onClick(()=>{
              this.select=4
              this.serialPortController.open()
            })

            Stack(){
              if (this.frameFormat===''){
                Text('帧格式')
                  .height(px2vp(80))
                  .width(px2vp(292))
                  .fontColor($r('app.color.D1D1D1_100'))
                  .fontSize($r('app.float.fontSize_24'))
                  .padding({left:px2vp(20)})
              }
              Row(){
                Text(this.frameFormat)
                  .width(px2vp(247))
                  .height(px2vp(80))
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Center)
                  .fontSize($r('app.float.fontSize_24'))
                Blank()
                Column(){
                  Image($r('app.media.subscript_space'))
                    .height(px2vp(45))
                    .width(px2vp(45))
                }
                .width(px2vp(45))
                .height(px2vp(80))
                .justifyContent(FlexAlign.End)
              }.height(px2vp(80))
              .width(px2vp(292))

              .borderRadius(px2vp(16))

            }.height(px2vp(80))
            .width(px2vp(292))
            .borderRadius(px2vp(16))
            .margin({bottom:px2vp(20)})
            .border({width:1})
            .onClick(()=>{
              this.select=5
              this.serialPortController.open()
            })
            Blank()
            Button(this.connect===0?'连接':'断开连接')
              .width(px2vp(292))
              .height(px2vp(80))
              .fontSize($r('app.float.fontSize_24'))
              .fontWeight(FontWeight.Medium)
              .fontColor($r('app.color.white_100'))
              .backgroundColor(this.connect===0?$r('app.color.green_100'):$r('app.color.red_100'))
              .margin({bottom:px2vp(20)})
              .onClick(()=>{
                if (this.connect===0) {
                  this.connect=1
                }else if (this.connect===1){
                  this.connect=0
                }
              })
            Row(){
              Text('连接状态')
                .fontSize($r('app.float.fontSize_20'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.gray_6666'))
                .margin({right:px2vp(20)})
              Text(this.connect===0?'未连接':'已连接')
                .fontSize($r('app.float.fontSize_24'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.gray_6666'))
            }
            .margin({bottom:px2vp(20)})

          }
          .height(px2vp(725))
          .borderRadius(px2vp(16))
          .padding({left:px2vp(20),right:px2vp(20)})
          .width(px2vp(332))
          .backgroundColor($r('app.color.white_60'))




        }.height(px2vp(960))
        .width(px2vp(332))
        .borderRadius(px2vp(16))
        .margin({left:px2vp(60)})
        .padding({left:px2vp(20),right:px2vp(20)})
        Column(){
          Column(){
            Row(){
              Text('接收区')
                .fontSize($r('app.float.fontSize_30'))
                .fontWeight(FontWeight.Medium)
                .textAlign(TextAlign.Start)
                .fontColor($r('app.color.black_100'))
              Blank()
              Text('发送帧数:'+'0')
                .fontSize($r('app.float.fontSize_20'))
                .fontWeight(FontWeight.Medium)
                .textAlign(TextAlign.Start)
                .fontColor($r('app.color.gray_6666'))
            }
            .height(px2vp(35))
            .width(px2vp(1448))
            .margin({top:px2vp(20)})
            .padding({left:px2vp(20),right:px2vp(20)})
            Column(){
              Row(){
                Text('序号')
                  .fontSize($r('app.float.fontSize_24'))
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Center)
                  .width(px2vp(120))
                  .fontColor($r('app.color.gray_6666'))

                Text('帧间隔时间(us)')
                  .fontSize($r('app.float.fontSize_24'))
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Center)
                  .width(px2vp(180))
                  .fontColor($r('app.color.gray_6666'))
                Text('名称')
                  .fontSize($r('app.float.fontSize_24'))
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Center)
                  .width(px2vp(120))
                  .fontColor($r('app.color.gray_6666'))

                Text('帧ID')
                  .fontSize($r('app.float.fontSize_24'))
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Center)
                  .width(px2vp(100))
                  .fontColor($r('app.color.gray_6666'))

                Text('帧类型')
                  .fontSize($r('app.float.fontSize_24'))
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Center)
                  .width(px2vp(120))
                  .fontColor($r('app.color.gray_6666'))

                Text('帧格式')
                  .fontSize($r('app.float.fontSize_24'))
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Center)
                  .width(px2vp(150))
                  .fontColor($r('app.color.gray_6666'))

                Text('DLC')
                  .fontSize($r('app.float.fontSize_24'))
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Center)
                  .width(px2vp(50))
                  .fontColor($r('app.color.gray_6666'))
                Text('数据')
                  .fontSize($r('app.float.fontSize_24'))
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Center)
                  .width(px2vp(400))
                  .fontColor($r('app.color.gray_6666'))
                Text('帧数量')
                  .fontSize($r('app.float.fontSize_24'))
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Center)
                  .width(px2vp(100))
                  .fontColor($r('app.color.gray_6666'))


              }
              .padding({left:px2vp(30),right:px2vp(30)})
              .height(px2vp(50))
              .width(px2vp(1398))
              .justifyContent(FlexAlign.Center)
              Column(){
                List(){
                  ForEach(this.receiveMessagesList, (item:receiveMessages,index:number) => {
                    ListItem(){
                      Row(){
                        Text(item.SerialNumber)
                          .fontWeight(FontWeight.Medium)
                          .fontSize($r('app.float.fontSize_24'))
                          .textAlign(TextAlign.Center)
                          .width(px2vp(120))
                        Text(item.IntervalTime)
                          .fontWeight(FontWeight.Medium)
                          .fontSize($r('app.float.fontSize_24'))
                          .textAlign(TextAlign.Center)
                          .width(px2vp(180))
                        Text(item.name)
                          .fontWeight(FontWeight.Medium)
                          .fontSize($r('app.float.fontSize_24'))
                          .textAlign(TextAlign.Center)
                          .width(px2vp(120))
                        Text(item.ID)
                          .fontWeight(FontWeight.Medium)
                          .fontSize($r('app.float.fontSize_24'))
                          .textAlign(TextAlign.Center)
                          .width(px2vp(100))
                        Text(item.typesOf)
                          .fontWeight(FontWeight.Medium)
                          .fontSize($r('app.float.fontSize_24'))
                          .textAlign(TextAlign.Center)
                          .width(px2vp(120))
                        Text(item.format)
                          .fontWeight(FontWeight.Medium)
                          .fontSize($r('app.float.fontSize_24'))
                          .textAlign(TextAlign.Center)
                          .width(px2vp(150))
                        Text(item.DLC)
                          .fontWeight(FontWeight.Medium)
                          .fontSize($r('app.float.fontSize_24'))
                          .textAlign(TextAlign.Center)
                          .width(px2vp(50))
                        Text(item.data)
                          .fontWeight(FontWeight.Medium)
                          .fontSize($r('app.float.fontSize_24'))
                          .textAlign(TextAlign.Center)
                          .width(px2vp(400))
                        Text(item.number)
                          .fontWeight(FontWeight.Medium)
                          .fontSize($r('app.float.fontSize_24'))
                          .textAlign(TextAlign.Center)
                          .width(px2vp(100))
                      }
                      .borderRadius(px2vp(16))
                      .width(px2vp(1398))
                      .height(px2vp(50))
                      .justifyContent(FlexAlign.Center)
                    }

                  })
                }
                .scrollBar(BarState.Off)
                .height(px2vp(467))
                .width(px2vp(1398))

              }
              .height(px2vp(467))
              .width(px2vp(1398))
              .margin({top:px2vp(20)})
              Row(){
                Image($r("app.media.delete1"))
                  .width(px2vp(48))
                  .height(px2vp(48))
                  .margin({right:px2vp(10),bottom:px2vp(10)})
                  .onClick(()=>{
                    this.receiveMessagesList.splice(0,this.receiveMessagesList.length)
                    console.log("textTag++++++++++"+JSON.stringify(this.receiveMessagesList))
                  })
              }
              .width(px2vp(1398))
              .justifyContent(FlexAlign.End)



            }
            .height(px2vp(585))
            .width(px2vp(1398))
            .borderRadius(px2vp(16))
            .backgroundColor($r('app.color.white_100'))


          }
          .height(px2vp(668))
          .borderRadius(px2vp(16))
          .width(px2vp(1448))
          .border({width:px2vp(1)})
          .backgroundColor($r('app.color.white_60'))
          Column(){
            Row(){
              Text('发送区')
                .fontSize($r('app.float.fontSize_30'))
                .fontWeight(FontWeight.Medium)
                .textAlign(TextAlign.Start)
                .fontColor($r('app.color.black_100'))
              Blank()
              Text('发送帧数:'+'0')
                .fontSize($r('app.float.fontSize_20'))
                .fontWeight(FontWeight.Medium)
                .textAlign(TextAlign.Start)
                .fontColor($r('app.color.gray_6666'))
            }
            .height(px2vp(35))
            .width(px2vp(1448))
            .margin({top:px2vp(20)})
            .padding({left:px2vp(20),right:px2vp(20)})
            Row(){
              Column(){
                Text('多次发送逐帧变化')
                  .fontSize($r('app.float.fontSize_24'))
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Start)
                  .fontColor($r('app.color.black_100'))
                Row(){
                  Text('帧ID递增')
                    .fontSize($r('app.float.fontSize_24'))
                    .fontWeight(FontWeight.Medium)
                    .textAlign(TextAlign.Start)
                    .fontColor($r('app.color.gray_6666'))
                  Toggle({ type: ToggleType.Switch, isOn: true })
                    .width(px2vp(72))
                    .height(px2vp(40))
                }.width(px2vp(211))
                .height(px2vp(65))
                Row(){
                  Text('数据递增')
                    .fontSize($r('app.float.fontSize_24'))
                    .fontWeight(FontWeight.Medium)
                    .textAlign(TextAlign.Start)
                    .fontColor($r('app.color.gray_6666'))
                  Toggle({ type: ToggleType.Switch, isOn: true })
                    .width(px2vp(72))
                    .height(px2vp(40))
                }.width(px2vp(211))
                .height(px2vp(65))
              }.height(px2vp(188))
              .borderRadius(px2vp(16))
              .width(px2vp(231))
              .padding(px2vp(10))
              .backgroundColor($r('app.color.black_10'))
              Row(){
                Column(){
                  Text('帧ID(HEX)')
                    .fontSize($r('app.float.fontSize_24'))
                    .fontWeight(FontWeight.Medium)
                    .textAlign(TextAlign.Start)
                    .fontColor($r('app.color.gray_6666'))
                  TextInput({ text:this.frameId , controller: this.controller })
                    .width(px2vp(180))
                    .height(px2vp(80))
                    .textAlign(TextAlign.Start)
                    .align(Alignment.TopStart)
                    .padding(px2vp(10))
                    .borderRadius(px2vp(16))
                    .backgroundColor($r('app.color.white_100'))


                }.height(px2vp(110))
                .width(px2vp(180))
                .border({width:1})
                .borderRadius(px2vp(16))
                .backgroundColor($r('app.color.white_100'))
                .margin({right:px2vp(20)})
                Column(){
                  Text('长度')
                    .fontSize($r('app.float.fontSize_24'))
                    .fontWeight(FontWeight.Medium)
                    .textAlign(TextAlign.Start)
                    .fontColor($r('app.color.gray_6666'))
                  Row(){
                   Text(this.length.toString())
                     .fontSize($r('app.float.fontSize_24'))
                     .fontWeight(FontWeight.Medium)
                     .textAlign(TextAlign.Center)
                     .fontColor($r('app.color.black_100'))

                    Blank()
                    Column(){
                      Image($r('app.media.subscript_space'))
                        .height(px2vp(45))
                        .width(px2vp(45))
                    }
                    .width(px2vp(45))
                    .height(px2vp(80))
                    .justifyContent(FlexAlign.End)
                  }.height(px2vp(80))
                  .width(px2vp(100))
                  .borderRadius(px2vp(16))


                }.height(px2vp(110))
                .width(px2vp(100))
                .border({width:1})
                .borderRadius(px2vp(16))
                .backgroundColor($r('app.color.white_100'))
                .margin({right:px2vp(20)})
                .onClick(()=>{
                  this.lengthController.open()
                })
                Column(){
                  Text('数据(HEX)')
                    .fontSize($r('app.float.fontSize_24'))
                    .fontWeight(FontWeight.Medium)
                    .textAlign(TextAlign.Start)
                    .fontColor($r('app.color.gray_6666'))
                  TextInput({ text:this.data, controller: this.controller })
                    .height(px2vp(80))
                    .width(px2vp(324))
                    .textAlign(TextAlign.Start)
                    .align(Alignment.TopStart)
                    .padding(px2vp(10))
                    .borderRadius(px2vp(16))
                    .backgroundColor($r('app.color.white_100'))



                }
                .height(px2vp(110))
                .width(px2vp(324))
                .borderRadius(px2vp(16))
                .backgroundColor($r('app.color.white_100'))


              }.height(px2vp(188))
              .borderRadius(px2vp(16))
              .width(px2vp(680))
              .padding(px2vp(10))
              .margin({left:px2vp(24)})
              .backgroundColor($r('app.color.black_10'))
              Row(){
                Column(){
                  Text('发送次数')
                    .fontSize($r('app.float.fontSize_24'))
                    .fontWeight(FontWeight.Medium)
                    .textAlign(TextAlign.Start)
                    .fontColor($r('app.color.gray_6666'))
                  TextInput({ text:this.numberTimes.toString(), controller: this.controller })
                    .height(px2vp(80))
                    .width(px2vp(100))
                    .textAlign(TextAlign.Start)
                    .align(Alignment.TopStart)
                    .padding(px2vp(10))
                    .borderRadius(px2vp(16))
                    .backgroundColor($r('app.color.white_100'))
                }.height(px2vp(110))
                .width(px2vp(100))
                .border({width:1})
                .borderRadius(px2vp(16))
                .backgroundColor($r('app.color.white_100'))
                .margin({right:px2vp(20)})
                Column(){
                  Text('发生间隔(ms)')
                    .fontSize($r('app.float.fontSize_24'))
                    .fontWeight(FontWeight.Medium)
                    .textAlign(TextAlign.Start)
                    .fontColor($r('app.color.gray_6666'))
                  TextInput({ text:this.timeInterval.toString(), controller: this.controller })
                    .height(px2vp(80))
                    .width(px2vp(162))
                    .textAlign(TextAlign.Start)
                    .align(Alignment.TopStart)
                    .padding(px2vp(10))
                    .borderRadius(px2vp(16))
                    .backgroundColor($r('app.color.white_100'))
                }.height(px2vp(110))
                .width(px2vp(162))
                .border({width:1})
                .borderRadius(px2vp(16))
                .backgroundColor($r('app.color.white_100'))
                .margin({right:px2vp(20)})


              }
              .height(px2vp(188))
              .borderRadius(px2vp(16))
              .width(px2vp(334))
              .padding(px2vp(10))
              .margin({left:px2vp(24)})
              .backgroundColor($r('app.color.black_10'))
              Column(){
                Image($r('app.media.sending'))
                  .width(px2vp(80))
                  .height(px2vp(80))
                  .margin({left:px2vp(20)})
                Blank()
                Image($r('app.media.stop'))
                  .width(px2vp(80))
                  .height(px2vp(80))
                  .margin({left:px2vp(20)})

              }
              .height(px2vp(197))
              .borderRadius(px2vp(16))
              .width(px2vp(80))



            }
            .height(px2vp(197))
            .borderRadius(px2vp(16))
            .width(px2vp(1448))
            .padding({left:px2vp(40),right:px2vp(40)})

          }
          .height(px2vp(272))
          .borderRadius(px2vp(16))
          .width(px2vp(1448))
          .backgroundColor($r('app.color.white_60'))
          .margin({top:px2vp(20)})


        }
        .height(px2vp(960))
        .width(px2vp(1448))
        .borderRadius(px2vp(16))
        .margin({left:px2vp(24)})
        .padding({left:px2vp(20),right:px2vp(20)})

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

  }
}
@CustomDialog
struct serialPort {
  @Link frameFormat:string
  @Link frameFormatLink:frameFormatClass[]
  @Link frameType:string
  @Link frameTypeList:frameTypeClass[]
  @Link sendingMethodList:sendingMethodClass[]
  @Link sendingMethod:string
  @Link BAUD:string
  @Link BAUDNameList:BAUDClass[]
  @Link select:number
  @Link channelNumber:string
  @Link serialPort:channelNumberClass[]
  CustomDialogController: CustomDialogController
  build() {
    Column(){
      Text(this.select===1?'选择通道号':this.select===2?"选择波特率":this.select===3?'选择数据位':this.select===4?'选择停止位':this.select===5?'选择校验位':'')
        .fontSize($r('app.float.fontSize_30'))
        .fontWeight(FontWeight.Medium)
        .height(px2vp(60))
        .margin({bottom:px2vp(20)})
      if (this.select===1){
        List({space:px2vp(20)}){
          ForEach(this.serialPort, (item:channelNumberClass,index:number) => {
            ListItem(){
              Row(){
                Text(item.channelNumber)
                  .fontWeight(FontWeight.Medium)
                  .fontSize($r('app.float.fontSize_24'))
                  .width(px2vp(500))
                  .height(px2vp(80))
                  .textAlign(TextAlign.Center)
                  .borderRadius(px2vp(16))
                  .onClick(()=>{
                    this.channelNumber=item.channelNumber!
                    this.CustomDialogController.close()
                  })
              }
              .backgroundColor($r('app.color.white_f1f3f5'))
              .borderRadius(px2vp(16))
              .width(px2vp(600))
              .height(px2vp(80))
              .justifyContent(FlexAlign.Center)
            }

          })
        }
        .scrollBar(BarState.Off)
        .width(px2vp(600))
        .height(px2vp(400))
      }else if (this.select===2){
        List({space:px2vp(20)}){
          ForEach(this.BAUDNameList, (item:BAUDClass,index:number) => {
            ListItem(){
              Row(){
                Text(item.BAUDName)
                  .fontWeight(FontWeight.Medium)
                  .fontSize($r('app.float.fontSize_24'))
                  .width(px2vp(500))
                  .height(px2vp(80))
                  .textAlign(TextAlign.Center)
                  .borderRadius(px2vp(16))
                  .onClick(()=>{
                    this.BAUD=item.BAUDName!
                    this.CustomDialogController.close()
                  })
              }
              .backgroundColor($r('app.color.white_f1f3f5'))
              .borderRadius(px2vp(16))
              .width(px2vp(600))
              .height(px2vp(80))
              .justifyContent(FlexAlign.Center)
            }

          })
        }
        .scrollBar(BarState.Off)
        .width(px2vp(600))
        .height(px2vp(400))
      }else if (this.select===3){
        List({space:px2vp(20)}){
          ForEach(this.sendingMethodList, (item:sendingMethodClass,index:number) => {
            ListItem(){
              Row(){
                Text(item.sendingMethod)
                  .fontWeight(FontWeight.Medium)
                  .fontSize($r('app.float.fontSize_24'))
                  .width(px2vp(500))
                  .height(px2vp(80))
                  .textAlign(TextAlign.Center)
                  .borderRadius(px2vp(16))
                  .onClick(()=>{
                    this.sendingMethod=item.sendingMethod!
                    this.CustomDialogController.close()
                  })
              }
              .backgroundColor($r('app.color.white_f1f3f5'))
              .borderRadius(px2vp(16))
              .width(px2vp(600))
              .height(px2vp(80))
              .justifyContent(FlexAlign.Center)
            }

          })
        }
        .scrollBar(BarState.Off)
        .width(px2vp(600))
        .height(px2vp(400))
      }else if (this.select===4){
        List({space:px2vp(20)}){
          ForEach(this.frameTypeList, (item:frameTypeClass,index:number) => {
            ListItem(){
              Row(){
                Text(item.frameTypeName)
                  .fontWeight(FontWeight.Medium)
                  .fontSize($r('app.float.fontSize_24'))
                  .width(px2vp(500))
                  .height(px2vp(80))
                  .textAlign(TextAlign.Center)
                  .borderRadius(px2vp(16))
                  .onClick(()=>{
                    this.frameType=item.frameTypeName!
                    this.CustomDialogController.close()
                  })
              }
              .backgroundColor($r('app.color.white_f1f3f5'))
              .borderRadius(px2vp(16))
              .width(px2vp(600))
              .height(px2vp(80))
              .justifyContent(FlexAlign.Center)
            }

          })
        }
        .scrollBar(BarState.Off)
        .width(px2vp(600))
        .height(px2vp(400))
      }
      else if (this.select===5){
        List({space:px2vp(20)}){
          ForEach(this.frameFormatLink, (item:frameFormatClass,index:number) => {
            ListItem(){
              Row(){
                Text(item.frameFormatName)
                  .fontWeight(FontWeight.Medium)
                  .fontSize($r('app.float.fontSize_24'))
                  .width(px2vp(500))
                  .height(px2vp(80))
                  .textAlign(TextAlign.Center)
                  .borderRadius(px2vp(16))
                  .onClick(()=>{
                    this.frameFormat=item.frameFormatName!
                    this.CustomDialogController.close()
                  })
              }
              .backgroundColor($r('app.color.white_f1f3f5'))
              .borderRadius(px2vp(16))
              .width(px2vp(600))
              .height(px2vp(80))
              .justifyContent(FlexAlign.Center)
            }

          })
        }
        .scrollBar(BarState.Off)
        .width(px2vp(600))
        .height(px2vp(400))
      }




    }
    .width(px2vp(700))
    .height(px2vp(500))
    .borderRadius(px2vp(16))
    .backgroundColor($r('app.color.white_100'))
    .alignItems(HorizontalAlign.Center)
  }
}
export class channelNumberClass{
  channelNumber?:string
}

export class sendingMethodClass{
  sendingMethod?:string
}
export class frameTypeClass{
  frameTypeName?:string
}

export class frameFormatClass{
  frameFormatName?:string
}

export class receiveMessages{
  SerialNumber?:string
  IntervalTime?:string
  name?:string
  ID?:string
  typesOf?:string
  format?:string
  DLC?:string
  data?:string
  number?:string

}
@CustomDialog
struct length {
  @Link length:number
  @Link lengthList:number[]
CustomDialogController: CustomDialogController
  build() {
    Column(){
      Text('选择长度')
        .fontSize($r('app.float.fontSize_30'))
        .fontWeight(FontWeight.Medium)
        .height(px2vp(60))
        .margin({bottom:px2vp(20)})
      List({space:px2vp(20)}){
        ForEach(this.lengthList, (item:number[],index:number) => {
          ListItem(){
            Row(){
              Text(item.toString())
                .fontWeight(FontWeight.Medium)
                .fontSize($r('app.float.fontSize_24'))
                .width(px2vp(500))
                .height(px2vp(80))
                .textAlign(TextAlign.Center)
                .borderRadius(px2vp(16))
                .onClick(()=>{
                  this.length=this.lengthList[index]
                  this.CustomDialogController.close()
                })
            }
            .backgroundColor($r('app.color.white_f1f3f5'))
            .borderRadius(px2vp(16))
            .width(px2vp(600))
            .height(px2vp(80))
            .justifyContent(FlexAlign.Center)
          }

        })
      }
      .scrollBar(BarState.Off)
      .width(px2vp(600))
      .height(px2vp(400))


    }
    .width(px2vp(700))
    .height(px2vp(500))
    .borderRadius(px2vp(16))
    .backgroundColor($r('app.color.white_100'))
    .alignItems(HorizontalAlign.Center)
  }
  }
