import deviceInfo from '@ohos.deviceInfo'
import prompt from '@ohos.prompt'
import router from '@ohos.router'
import { timeSynchronize } from '../common/service/timeService'
import { getCarInfo } from '../common/service/terminalService'
import { dateFormat } from '../common/utils/tools'
import ethernet from '@ohos.net.ethernet';
import UdpClient from '../common/utils/UdpClient';
import FileLog from './judgeSDK/utils/file-log'
import TopLogo from './compontents/topLogo'
import { voiceService } from '../common/service/voiceService'

@Entry
@Component
struct Index {
  @State mlxhColum: Array<any> = [{ key: '车速', value: '0' }, { key: '倒车时速', value: '0' }, {
    key: '档位',
    value: '0'
  }, { key: '溜车距离', value: '0' }, { key: '熄火次数', value: '0' }, { key: '累计距离', value: '0' }, {
    key: '发动机转速',
    value: '0'
  }, { key: '项目距离', value: '0' }, { key: '倒车距离', value: '0' }, { key: '左前超声波', value: '0' }, {
    key: '右后超声波',
    value: '0'
  }, { key: '右前超声波', value: '0' }, { key: '左后超声波', value: '0' }, { key: '前磁计数s', value: '0' }, {
    key: '左前磁计数s',
    value: '0'
  }, { key: '右前磁计数s', value: '0' }, { key: '左后磁计数s', value: '0' }, { key: '右后磁计数s', value: '0' }, {
    key: '左后外磁计数',
    value: '0'
  }, { key: '右后外磁计数s', value: '0' }, { key: '累计脉冲', value: '0' },
    { key: '倒车脉冲', value: '0' }, { key: '溜车脉冲', value: '0' }, { key: '前磁计数n', value: '0' }
    , { key: '左后外磁计数n', value: '0' }, { key: '右后外磁计数n', value: '0' }, { key: '前磁ns脉冲', value: '0' },
    { key: '左前磁ns脉冲', value: '0' }, { key: '右前磁ns脉冲', value: '0' }, { key: '左后磁ns脉冲', value: '0' },
    { key: '右后磁ns脉冲', value: '0' }, { key: '超声波1', value: '0' }, { key: '超声波2', value: '0' }, {
      key: 'X坐标',
      value: '0'
    }, { key: 'Y坐标', value: '0' }
    , { key: '左后外磁计数s', value: '0' }, { key: '右后外磁计数s', value: '0' }, { key: '差分改正数', value: '0' },
  ]
  @State sjxhColum: Array<any> = [{ key: '应答位', value: '0' }, { key: '左方向灯', value: '0' }, {
    key: '右方向灯',
    value: '0'
  }, { key: '双跳灯', value: '0' }, { key: '远光灯', value: '0' }, { key: '近光灯', value: '0' }, {
    key: '视宽灯',
    value: '0'
  }, { key: '点火1', value: '0' }, { key: '点火2', value: '0' }, { key: '离合器', value: '0' }, {
    key: '脚刹',
    value: '0'
  }, { key: '手刹', value: '0' }, { key: '副刹', value: '0' }, { key: '喇叭', value: '0' }, { key: '门开关', value: '0' }, {
    key: '安全带',
    value: '0'
  }, { key: '雾灯', value: '0' }, { key: '闪灯', value: '0' }, { key: '方向盘', value: '0' }, { key: '计时', value: '0' }, {
    key: '前进状态',
    value: '0'
  }, { key: '后退状态', value: '0' }, { key: '停车状态', value: '0' }, { key: '加减档错', value: '0' }, {
    key: '1-2',
    value: ''
  }, { key: '震动', value: '0' }, { key: '前磁s', value: '0' }, { key: '左前磁s', value: '0' }, {
    key: '右前磁s',
    value: ''
  }, { key: '左后磁s', value: '0' }, { key: '右后磁s', value: '0' }, { key: '左后外磁s', value: '0' }, {
    key: '右后外磁s',
    value: ''
  }, { key: '前磁n', value: '0' }, { key: '左前磁n', value: '0' }, { key: '右前磁n', value: '0' }, {
    key: '左后磁n',
    value: '0'
  }, { key: '右后磁n', value: '0' }, { key: '左后外磁n', value: '0' }, { key: '右后外磁n', value: '0' }, {
    key: '雨刮器',
    value: '0'
  }]
  @State ratio: number = 1280 / 960
  @State gpsActive: number = 1
  @State active: number = 0
  @State msg: string = ''
  @State @Watch('outClick') outFlag: boolean = false;
  private timer = null
  private udpClient: UdpClient = null
  private FileLog: FileLog
  private vocObj = null;
  @State url: string = ''
  //  @State gpsList: Array<any> = []
  build() {
    Column() {
      TopLogo({outFlag:$outFlag})
      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
        Row() {
          // Image($r('app.media.signal_logoS')).width(30 * this.ratio).height(24 * this.ratio)
          Row() {
            Text('PLC信号').fontColor(this.active == 0 ? '#FFAD33' : '#e7cba3').fontSize(20 * this.ratio)
          }
          .backgroundImage(this.active == 0 ? $r('app.media.signal_tabS') : $r('app.media.signal_tab'))
          .width(144 * this.ratio)
          .height(50 * this.ratio)
          .backgroundImageSize({ width: '100%', height: '100%' })
          .justifyContent(FlexAlign.Center)
          .onClick(() => {
            this.active = 0
          })

          Row() {
            Text('实时轨迹').fontColor(this.active == 1 ? '#FFAD33' : '#e7cba3').fontSize(20 * this.ratio)
          }
          .backgroundImage(this.active == 1 ? $r('app.media.signal_tabS') : $r('app.media.signal_tab'))
          .width(144 * this.ratio)
          .height(50 * this.ratio)
          .backgroundImageSize({ width: '100%', height: '100%' })
          .justifyContent(FlexAlign.Center)
          .onClick(() => {
            this.active = 1
          })

          Row() {
            Text('原始数据').fontColor(this.active == 2 ? '#FFAD33' : '#e7cba3').fontSize(20 * this.ratio)
          }
          .backgroundImage(this.active == 2 ? $r('app.media.signal_tabS') : $r('app.media.signal_tab'))
          .width(144 * this.ratio)
          .height(50 * this.ratio)
          .backgroundImageSize({ width: '100%', height: '100%' })
          .justifyContent(FlexAlign.Center)
          .onClick(() => {
            this.active = 2
          })
        }

        Row() {
          Image($r('app.media.topB_back')).width('16.7%').height('12.2%')
            .onClick(()=>{
              // router.back()
              this.url='back'
              // this.vocObj.playAudio({
              //   type: 1,
              //   name: 'media_button.wav'
              // })
              this.outFlag=true
            })

          // Row(){
          //   Text('保存日志').fontSize(21*this.ratio).fontColor('#fff')
          // }.width(137*this.ratio).height(36*this.ratio).margin({left:12*this.ratio}).backgroundImageSize({width:'100%',height:'100%'}).backgroundImage($r('app.media.button_nor')).justifyContent(FlexAlign.Center).onClick(()=>{
          //   this.saveLog()
          // })
          // Row() {
          //   Text('关闭').fontSize(21 * this.ratio).fontColor('#fff')
          // }
          // .width(137 * this.ratio)
          // .height(36 * this.ratio)
          // .margin({ left: 12 * this.ratio })
          // .backgroundImageSize({ width: '100%', height: '100%' })
          // .backgroundImage($r('app.media.button_nor'))
          // .justifyContent(FlexAlign.Center)
          // .onClick(() => {
          //   // globalThis.udpClient.closeUdp(()=>{
          //   router.back()
          //   // })
          // })
        }
      }

      Row() {
        Column() {
          Text('数字信号').fontSize(18 * this.ratio).margin({ top: 10 * this.ratio })
          Flex({ direction: FlexDirection.Column, wrap: FlexWrap.Wrap }) {
            ForEach(this.sjxhColum, (item) => {
              Row() {
                Text(`${item.key}:${item.value}`)
                  .fontSize(14 * this.ratio)
                  .lineHeight(21 * this.ratio)
                  .fontColor('#fff')
              }.width('33.3%').height(21 * this.ratio)
            })
          }
          .width(440 * this.ratio)
          .height(360 * this.ratio)
          .padding({ left: 10 * this.ratio, top: 10 * this.ratio })
          .backgroundColor('#282828')
        }.width(460 * this.ratio).height('100%')

        Column() {
          Text('模拟信号').fontSize(18 * this.ratio).margin({ top: 10 * this.ratio })
          Flex({ direction: FlexDirection.Column, wrap: FlexWrap.Wrap }) {
            ForEach(this.mlxhColum, (item) => {
              Row() {
                Text(`${item.key}:${item.value}`)
                  .fontSize(14 * this.ratio)
                  .lineHeight(21 * this.ratio)
                  .fontColor('#fff')
              }.width('33.3%').height(21 * this.ratio)
            })
          }
          .width(440 * this.ratio)
          .height(360 * this.ratio)
          .padding({ left: 10 * this.ratio, top: 10 * this.ratio })
          .backgroundColor('#282828')
        }.width(460 * this.ratio).height('100%')

        Column() {
          Text('模拟信号').fontSize(18 * this.ratio).margin({ top: 10 * this.ratio })
          Flex({ direction: FlexDirection.Column, wrap: FlexWrap.Wrap }) {
            ForEach(this.mlxhColum, (item) => {
              Row() {
                Text(`${item.key}:${item.value}`)
                  .fontSize(14 * this.ratio)
                  .lineHeight(21 * this.ratio)
                  .fontColor('#fff')
              }.width('33.3%').height(21 * this.ratio)
            })
          }
          .width(440 * this.ratio)
          .height(360 * this.ratio)
          .padding({ left: 10 * this.ratio, top: 10 * this.ratio })
          .backgroundColor('#282828')
        }.width(460 * this.ratio).height('100%')
      }
      .width(936 * this.ratio)
      .height(420 * this.ratio)
      .margin({ left: 10 * this.ratio })
      .padding({ left: 10 * this.ratio, right: 10 * this.ratio })
      .backgroundImage($r('app.media.km_open'))
      .backgroundImageSize({ width: '100%', height: '100%' })
      .visibility(this.active == 0 ? Visibility.Visible : Visibility.None)

      Row() {
        Flex({ direction: FlexDirection.Column }) {
          Row() {
            Row() {
              Text('GPS1').fontColor(this.gpsActive == 0 ? '#2D3C5A' : '#fff')
            }
            .width(72)
            .height(24)
            .backgroundColor(this.gpsActive == 0 ? '#fff' : '#1A1A1A')
            .margin({ left: 10, right: 10 })
            .justifyContent(FlexAlign.Center)
            .onClick(() => {
              this.gpsActive = 0
            })

            Row() {
              Text('GPS2').fontColor(this.gpsActive == 1 ? '#2D3C5A' : '#fff')
            }
            .width(72)
            .height(24)
            .backgroundColor(this.gpsActive == 1 ? '#fff' : '#1A1A1A')
            .justifyContent(FlexAlign.Center)
            .onClick(() => {
              this.gpsActive = 1
            })
          }.margin({ top: 10 })
          //            ForEach(this.gpsList,(item)=>{
          //              Text()
          //            })

        }
        .width(168 * this.ratio)
        .height(380 * this.ratio)
        .backgroundColor('#282828')
        .margin({ top: 6 * this.ratio, left: 10 * this.ratio })

        Row() {

        }.width(168 * this.ratio).height(380 * this.ratio).backgroundColor('#1A1A1A').margin({ top: 6 * this.ratio })

        Row() {

        }
        .width(550 * this.ratio)
        .height(380 * this.ratio)
        .backgroundColor('#1A1A1A')
        .margin({ top: 6 * this.ratio, left: 6 * this.ratio })

      }
      .width(936 * this.ratio)
      .height(420 * this.ratio)
      .margin({ left: 10 * this.ratio })
      .padding({ left: 10 * this.ratio, right: 10 * this.ratio })
      .backgroundImage($r('app.media.km_open'))
      .backgroundImageSize({ width: '100%', height: '100%' })
      .visibility(this.active == 1 ? Visibility.Visible : Visibility.None)
    }
    .width('100%')
    .height('100%')
    .backgroundImage($r('app.media.bg'))
    .backgroundImageSize({ width: '100%', height: '100%' })
  }

  aboutToDisappear() {
    this.vocObj = new voiceService(async (status,val) => {
      if (status == 'idle') {
        if(this.url=='back'){
          router.back()
          // that.udpClient.sendMsg('111')
        }else {
          router.pushUrl({
            url: this.url,
          });
        }
      }
    });

    // this.udpClient.closeUdp()
  }

  onPageShow() {
    console.info('Index onPageShow');
    const that = this


    if (!globalThis.udpClient) {
      return
    }
    globalThis.udpClient.onMessage((msg) => {
      that.msg = msg
      const signArr = msg.split(',')
      that.sjxhColum[1].value = signArr[2]
      that.sjxhColum[2].value = signArr[3]
      that.sjxhColum[3].value = signArr[20]
      that.sjxhColum[4].value = signArr[8]
      that.sjxhColum[5].value = signArr[7]
      // that.sjxhColum[6].value=signArr[7]//宽视灯
      that.sjxhColum[7].value = signArr[5] //
      that.sjxhColum[8].value = signArr[6] //
      that.sjxhColum[9].value = signArr[17] //
      that.sjxhColum[10].value = signArr[12]
      that.sjxhColum[11].value = signArr[13]
      that.sjxhColum[12].value = signArr[18]
      that.sjxhColum[13].value = signArr[4]
      that.sjxhColum[14].value = signArr[14]
      that.sjxhColum[15].value = signArr[19]
      that.sjxhColum[16].value = signArr[10]
      // that.sjxhColum[17].value=signArr[10]//闪灯
      that.sjxhColum[18].value = signArr[27]
      // that.sjxhColum[19].value=signArr[27] //计时
      // that.sjxhColum[20].value=signArr[27]//前进状态
      // that.sjxhColum[21].value=signArr[27]//后退状态
      // that.sjxhColum[22].value=signArr[27]//停车状态
      // that.sjxhColum[23].value=signArr[27]//加减档错
      // that.sjxhColum[24].value=signArr[27]//1-2
      // that.sjxhColum[25].value=signArr[27]//震动
      // that.sjxhColum[26].value=signArr[27]//震动
      // that.sjxhColum[27].value=signArr[27]//前磁s
      // that.sjxhColum[28].value=signArr[27]//左前磁s
      // that.sjxhColum[29].value=signArr[27]//右前磁s
      //that.sjxhColum[30].value=signArr[27]//左后磁s
      //that.sjxhColum[31].value=signArr[27]//右后磁s
      //that.sjxhColum[32].value=signArr[27]//左后外磁s
      //that.sjxhColum[33].value=signArr[27]//左后外磁s
      //that.sjxhColum[34].value=signArr[27]//前磁n
      //that.sjxhColum[35].value=signArr[27]//左前磁n
      //that.sjxhColum[36].value=signArr[27]//右前磁n
      //that.sjxhColum[37].value=signArr[27]//左后磁n
      //that.sjxhColum[38].value=signArr[27]//右后磁n
      //that.sjxhColum[39].value=signArr[27]//左后外磁
      //that.sjxhColum[40].value=signArr[27]//右后外磁
      that.sjxhColum[40].value = signArr[11] //右后外磁
      that.sjxhColum = JSON.parse(JSON.stringify((that.sjxhColum)))

      that.mlxhColum[0].value = signArr[23]
      // that.mlxhColum[1].value = signArr[28]
      that.mlxhColum[2].value = signArr[28]
      // that.mlxhColum[3].value = signArr[24]
      that.mlxhColum[4].value = signArr[26]
      // that.mlxhColum[5].value = signArr[29]
      that.mlxhColum[6].value = signArr[25] //发动机转速
      // that.mlxhColum[7].value = signArr[31]
      // that.mlxhColum[8].value = signArr[32]
      that.mlxhColum[9].value = signArr[29]
      that.mlxhColum[10].value = signArr[30]
      that.mlxhColum[11].value = signArr[31]
      that.mlxhColum[12].value = signArr[32]
      // that.mlxhColum[13].value = signArr[84]//前磁计数s
      // that.mlxhColum[14].value = signArr[85]
      // that.mlxhColum[15].value = signArr[86]
      // that.mlxhColum[16].value = signArr[87]
      // that.mlxhColum[17].value = signArr[88]
      // that.mlxhColum[18].value = signArr[89]
      // that.mlxhColum[19].value = signArr[90]
      that.mlxhColum[20].value = signArr[24] //累计脉冲
      that.mlxhColum[31].value = signArr[29] //超声波1
      that.mlxhColum[32].value = signArr[30] //超声波2
      that.mlxhColum[33].value = signArr[95]
      that.mlxhColum[34].value = signArr[96]
      that.mlxhColum = JSON.parse(JSON.stringify((that.mlxhColum)))
      // if (that.timer) {
      //   return
      // }
      // that.timer = setTimeout(() => {
      //
      //
      //   that.timer=null
      // }, 1000)


    })
  }
  outClick(){
  }
  saveLog() {
    // this.FileLog.initFileLogo('d          .0ateLog')
    // this.FileLog.createFile('123')
  }
  // getDeviceNo() {
  //   globalThis.deviceNo = 'FE-FC-FE-7C-5C-72'; //设备号
  // }

  // initTime() {
  //
  // }
  //
  // initCarInfo() {
  //
  // }
  //
  // getData() {
  //
  // }
}