xf-ohos/entry/src/main/ets/common/component/BottomOperateComp.ets

import router from '@ohos.router'
import NoticeInfo from '../../model/NoticeInfo'
import common from '@ohos.app.ability.common';
import { KvStoreModel } from '../../model/KvStoreModel';
import deviceManager from '@ohos.distributedDeviceManager';
import { RemoteDeviceModel, BUNDLE_NAME } from '../../model/RemoteDeviceModel'
import { DeviceDialog } from '../../common/DeviceDialog';
import Want from '@ohos.app.ability.Want';
import { class1 } from '../../pages/Storage';

const TAG: string = 'testTag'
const DATA_CHANGE: string = 'dataChange'
const DATA_CHANGE1: number = 0
const EXIT: string = 'exit'

/*
 * 底部操作栏
 * */
@Component
export struct BottomOperateComp {
  // @Link SmartFactoryCardDelete:number
  private isHomePage?: boolean = false
  @State isClick:boolean = false
  //弹窗
  dialogController1: CustomDialogController= new CustomDialogController({
    builder: NoticeDialog({}),
    alignment: DialogAlignment.Center,
    customStyle:true,
    cancel:()=>{
      this.isClick =! this.isClick
    }
  })
  @State Page:number=1
  @State deviceDialogWidth: number = 0
  @State @Watch('dataChange')  click: number = 0;
  @State  click1: number = 0;
  @State @Watch('dataChange')  message: string = 'Hello World';
  @State inputMsg: string = '';
  @State isDistributed: boolean = false
  @StorageLink('deviceList') deviceList: Array<deviceManager.DeviceBasicInfo> = []
  @State selectedIndex: number | undefined = -1

  private remoteDeviceModel: RemoteDeviceModel = new RemoteDeviceModel()
  private kvStoreModel: KvStoreModel = new KvStoreModel()
  private dialogController: CustomDialogController | null = null

  onSelectedIndexChange = async (index: number | undefined) => {
    console.info(TAG, `selectedIndexChange`)
    this.selectedIndex = index
    this.selectDevice()
  }


  // aboutToAppear(){
  //   this.showDeviceDialog()
  // }
  aboutToDisappear() {
    console.info(TAG, `index disappear`)
    this.kvStoreModel.deleteKvStore()
  }

  startAbilityCallBack = (key: string) => {
    console.info(TAG, `startAbilityCallBack ${key}`)
    if (DATA_CHANGE === key) {
      this.kvStoreModel.put(DATA_CHANGE, this.message)
    }
    if (EXIT === key) {
      this.kvStoreModel.put(DATA_CHANGE, EXIT)
    }
  }

  selectDevice() {
    console.info(TAG, `start ability ......`)
    this.isDistributed = true
    if (this.selectedIndex !== undefined && (this.remoteDeviceModel === null || this.remoteDeviceModel.discoverList.length <= 0)) {
      console.info(TAG, `continue unauthed device: ${JSON.stringify(this.deviceList)}`)
      this.startAbility(this.deviceList[this.selectedIndex].networkId as string)
      this.clearSelectState()
      return
    }
    console.info(TAG, `start ability1, needAuth：`)
    if (this.selectedIndex !== undefined) {
      console.log(TAG, '------------' + JSON.stringify(this.deviceList[this.selectedIndex]));
      this.remoteDeviceModel.authenticateDevice(this.deviceList[this.selectedIndex], () => {
        console.info(TAG, `auth and online finished`);
        if (this.remoteDeviceModel !== null && this.remoteDeviceModel.deviceList !== null && this.selectedIndex !== undefined) {
          for (let i = 0; i < this.remoteDeviceModel.deviceList!.length; i++) {
            if (this.remoteDeviceModel.deviceList![i].deviceName === this.deviceList[this.selectedIndex].deviceName) {
              this.startAbility(this.remoteDeviceModel.deviceList![i].networkId);
            }
          }
        }
      })
    }
    console.info(TAG, `start ability2 ......`)
    this.clearSelectState()
  }

  clearSelectState() {
    this.deviceList = []
    if (this.dialogController !== null) {
      this.dialogController.close()
    }
    console.info(TAG, `cancelDialog`)
    if (this.remoteDeviceModel === undefined) {
      return
    }
    this.remoteDeviceModel.unregisterDeviceListCallback()
  }

  async startAbility(deviceId: string | undefined) {
    console.debug(TAG, `startAbility deviceId: ${deviceId}`)
    let context = getContext(this) as common.UIAbilityContext
    let choicePages:class1={}
    // console.log("获取当前页面"+choicePages.choicePages?.toString())
    let want: Want = {
      bundleName: BUNDLE_NAME,
      abilityName: 'EntryAbility',
      //  abilityName: choicePages.choicePages===2?'':'firstAbility',
      deviceId: deviceId,
      parameters: {
        isRemote: 'isRemote'
      }
    }
    context.startAbility(want).then((data) => {
      console.info(TAG, `start ability finished: ${JSON.stringify(data)}`)
      this.startAbilityCallBack(DATA_CHANGE)
    })
  }

  dataChange() {
    console.info(TAG, `dataChange, message = ${this.message},`)
    this.kvStoreModel.put(DATA_CHANGE1.toString(), this.click.toString())
    this.kvStoreModel.put(DATA_CHANGE, this.message,)
  }

  showDeviceDialog() {
    this.deviceList = []
    // 注册监听回调，发现设备或查找到已认证设备会弹窗显示
    this.remoteDeviceModel.registerDeviceListCallback(() => {
      this.deviceList = []
      let deviceTempList = this.remoteDeviceModel.discoverList.length > 0 ? this.remoteDeviceModel.discoverList : this.remoteDeviceModel.deviceList;
      if (deviceTempList !== null) {
        for (let i = 0; i < deviceTempList!.length; i++) {
          console.debug(TAG, `device ${i}/${deviceTempList!.length} deviceId= ${deviceTempList![i].deviceId},
        deviceName= ${deviceTempList![i].deviceName}, deviceType= ${deviceTempList![i].deviceType}`);
          if (deviceTempList !== null) {
            this.deviceList.push({
              deviceId: deviceTempList![i].deviceId,
              deviceName: deviceTempList![i].deviceName,
              deviceType: deviceTempList![i].deviceType,
              networkId: deviceTempList![i].networkId,
            })
            AppStorage.set('deviceList', this.deviceList)
          }
        }
      }
    })
    if (this.dialogController === null) {
      this.dialogController = new CustomDialogController({
        builder: DeviceDialog({
          selectedIndex: this.selectedIndex,
          onSelectedIndexChange: this.onSelectedIndexChange
        }),
        cancel: () => {
          this.clearSelectState()
        },
        autoCancel: true,
        alignment: DialogAlignment.Center,
        customStyle: false
      })
    }
    if (this.dialogController !== null) {
      this.dialogController.open()
    }
  }

  build() {
    Stack() {
      Text()
        .width('100%')
        .height('100%')
        .backgroundColor($r('app.color.bottom_bar_background'))
        .opacity(this.isHomePage ? $r('app.float.bottom_bar_home_page_opacity') : $r('app.float.bottom_bar_general_opacity'))
        .backdropBlur(this.isHomePage ? 13 : 0)

      Row() {
        Row () {
          Image($r('app.media.home_page'))
            .height($r('app.float.robot_image_select_size'))
            .width($r('app.float.robot_image_select_size'))
        }
        .height('100%')
        .width('7%')
        .justifyContent(FlexAlign.Center)
        .onClick(()=>{
            router.pushUrl({
              url:'pages/Index'
            })

          })
        Row(){
          Image($r('app.media.notice'))
            .height($r('app.float.robot_image_select_size'))
            .width($r('app.float.robot_image_select_size'))
        }
        .height('100%')
        .width('7%')
        .justifyContent(FlexAlign.Center)
        .onClick(()=>{
          this.dialogController1.open()
        })

        Row(){
          Image($r('app.media.jg_circular_icon'))
            .height($r('app.float.storage_space_set_size'))
            .width($r('app.float.storage_space_set_size'))
        }
        .height('100%')
        .width('7%')
        .justifyContent(FlexAlign.Center)
        .onClick(()=>{
          router.pushUrl({
            url:'pages/SmartFactory'
          })
        })
        .gesture(
          LongPressGesture({ repeat: false })
            .onActionEnd(() => {
            })
        )

        Row(){
          Image($r('app.media.page_flow'))
            .height($r('app.float.robot_image_select_size'))
            .width($r('app.float.robot_image_select_size'))
          .onClick(() => {
            this.showDeviceDialog()
          //   router.pushUrl({
          //     url:'pages/DistributedPage'
          //   })
           })
        }
        .height('100%')
        .width('7%')
        .justifyContent(FlexAlign.Center)
        Row(){
          Image($r('app.media.camera'))
            .height($r('app.float.robot_image_select_size'))
            .width($r('app.float.robot_image_select_size'))
        }
        .height('100%')
        .width('7%')
        .justifyContent(FlexAlign.Center)



        // Image($r('app.media.volume'))
        //   .height($r('app.float.general_icon_size'))
        //   .width($r('app.float.general_icon_size'))
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height('8%')
  }
}

//弹窗组件
@CustomDialog
struct NoticeDialog {
  controller: CustomDialogController
  Notices: NoticeInfo[]=[]
  build() {
    Column({space: 10}) {
      Row() {
        Text('通知')
          .fontSize($r('app.float.fontSize_24'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.general_font_color'))
          .opacity($r('app.float.general_font_opacity'))
      }
      Row(){
        List(){
          ForEach(this.Notices, (item:NoticeInfo) => {
            ListItem(){
              Row(){
                Text(item.Notice)
                  .fontSize($r('app.float.fontSize_24'))
                  .fontColor($r('app.color.general_font_color'))
                  .opacity($r('app.float.general_font_opacity'))
                Text(item.NoticeDate)
                  .fontSize($r('app.float.fontSize_24'))
                  .fontColor($r('app.color.general_font_color'))
                  .opacity($r('app.float.card_font_default_opacity'))
              }
              .justifyContent(FlexAlign.SpaceBetween)
              .width('100%')
            }
          })
        }
      }
      .width('90%')
      .height('80%')
      .alignItems(VerticalAlign.Top)
      .borderRadius($r('app.float.notice_size'))
      .borderWidth($r('app.float.general_border_width'))
      .borderColor($r('app.color.general_border_color'))
    }
    .width('45%')
    .height('70%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor($r('app.color.page_general_background'))
    .borderRadius($r('app.float.notice_size'))
  }
}