import router from '@ohos.router'
import { Staging } from '../view/Staging'
import { ProcessArea } from '../view/ProcessArea'
import CommonConstants from '../common/constants/CommonConstants'
import UserAuthModel from '../model/database/UserAuthModel'
import curves from '@ohos.curves';
import process from '@ohos.process'
import connection from '@ohos.net.connection'
import data from '@ohos.telephony.data';
import UserInfo from '../model/UserInfo'
import { WorkstationInfo } from '../pages/LoginPage'
//import formHost from '@ohos.app.form.formHost';
import media from '@ohos.multimedia.media';
import fs from '@ohos.file.fs';
import common from '@ohos.app.ability.common';
import { DeviceDialog } from '../common/DeviceDialog';
import { RemoteDeviceModel, BUNDLE_NAME } from '../model/RemoteDeviceModel';
import deviceManager from '@ohos.distributedDeviceManager';
import { KvStoreModel } from '../model/KvStoreModel';
import Want from '@ohos.app.ability.Want';
import NoticeInfo from '../model/NoticeInfo';
import { taskclass } from '../common/util/request/StorageRequestInstance'
import StorageRequest from '../common/util/request/StorageRequest'
import { TaskComp } from '../common/component/TaskComp'
import UniversalCard from '../model/UniversalCard'

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

export class hardwareList {
  name?: string
  state?: string
  text?: string
  type?: Resource
  open?: Resource
  colse?: Resource
  select?: boolean
  temp?: number
}

@Entry
@Component
struct SmartFactory {
  @State completeNum: number | undefined = 0
  @State planNum: number | undefined = 0
  //视图选择
  @State viewSelection: number = 0
  @State WorkstationInfo: WorkstationInfo = {}
  @State userInfo: UserInfo = {}
  @State listPosition: number = 0; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。
  private scrollerForScroll: Scroller = new Scroller()
  @State dragIndex: number = 0
  @State open: number = 0
  //注释掉的是假数据，实际更具请求硬件获取
  @State private items: Array<hardwareList> = [
    {
      name: '三色灯',
      state: '关',
      text: '装配工位001',
      type: $r('app.media.sansedeng'),
      open: $r('app.media.open'),
      colse: $r('app.media.colse'),
      select: true,
      temp: 1
    } as hardwareList,
    {
      name: '扫码枪',
      state: '开',
      text: '装配工位001',
      type: $r('app.media.saomaqiang'),
      open: $r('app.media.open'),
      colse: $r('app.media.colse'),
      select: true,
      temp: 2
    } as hardwareList,
    {
      name: '电能表',
      state: '关',
      text: '装配工位001',
      type: $r('app.media.diannengbiao'),
      open: $r('app.media.open'),
      colse: $r('app.media.colse'),
      select: true,
      temp: 3
    } as hardwareList,
    {
      name: '万用表',
      state: '开',
      text: '装配工位001',
      type: $r('app.media.multimeter'),
      open: $r('app.media.open'),
      colse: $r('app.media.colse'),
      select: true,
      temp: 6
    } as hardwareList,
    {
      name: 'RFID工位读卡器',
      state: '关',
      text: '装配工位001',
      type: $r('app.media.dukaqi'),
      open: $r('app.media.open'),
      colse: $r('app.media.colse'),
      select: true,
      temp: 7
    } as hardwareList,
    {
      name: '程控电源',
      state: '开',
      text: '装配工位001',
      type: $r('app.media.chengkongdianyuan'),
      open: $r('app.media.open'),
      colse: $r('app.media.colse'),
      select: true,
      temp: 8
    } as hardwareList,
    {
      name: '数控电烙铁',
      state: '开',
      text: '装配工位001',
      type: $r('app.media.shukongdian'),
      open: $r('app.media.open'),
      colse: $r('app.media.colse'),
      select: true,
      temp: 9
    } as hardwareList,
    {
      name: '电动螺丝刀',
      state: '开',
      text: '装配工位001',
      type: $r('app.media.diandongluosidao'),
      open: $r('app.media.open'),
      colse: $r('app.media.colse'),
      select: true,
      temp: 10
    } as hardwareList,
    {
      name: '照明灯',
      state: '开',
      text: '装配工位001',
      type: $r('app.media.zhaomingdeng'),
      open: $r('app.media.open'),
      colse: $r('app.media.colse'),
      select: true,
      temp: 11
    } as hardwareList,
    {
      name: '镊子',
      state: '开',
      text: '装配工位001',
      type: $r('app.media.tweezers'),
      open: $r('app.media.open'),
      colse: $r('app.media.colse'),
      select: true,
      temp: 12
    } as hardwareList,
    {
      name: '扳手',
      state: '开',
      text: '装配工位001',
      type: $r('app.media.wrench'),
      open: $r('app.media.open'),
      colse: $r('app.media.colse'),
      select: true,
      temp: 13
    } as hardwareList,
    {
      name: '放大镜',
      state: '开',
      text: '装配工位001',
      type: $r('app.media.magnifier'),
      open: $r('app.media.open'),
      colse: $r('app.media.colse'),
      select: true,
      temp: 14
    } as hardwareList,
    {
      name: '焊烟净化器',
      state: '开',
      text: '装配工位001',
      type: $r('app.media.Weldingfumepurifier'),
      open: $r('app.media.open'),
      colse: $r('app.media.colse'),
      select: true,
      temp: 15
    } as hardwareList,
    {
      name: '螺丝刀-十字',
      state: '开',
      text: '装配工位001',
      type: $r('app.media.screwdriver'),
      open: $r('app.media.open'),
      colse: $r('app.media.colse'),
      select: true,
      temp: 16
    } as hardwareList,
  ]
  private scrollerForList: Scroller = new Scroller()
  scroller: Scroller = new Scroller()
  @State colsetimeID: number = 0
  @State colsetimeID1: number = 0
  @State processvalue: number = 50
  @State text: number = 0
  @State success: boolean = true
  @State click: number = 0
  @State trigger: number = 0
  @State donghua1: number = 0
  @State index: number = 0
  @State state?: string = ''
  @State text1?: string = ''
  @State open1: Resource | undefined = undefined
  @State colse: Resource | undefined = undefined
  @State temp?: number = 0
  @State swtich: undefined | boolean = true
  @State DeviceName: undefined | string = ''
  @State DeviceImage: Resource | undefined = undefined
  @State isHomePage: boolean = true
  controller: TextClockController = new TextClockController()
  @State isClick: boolean = false
  @State textValue: string = ''
  @State inputValue: string = ''
  @State translateX: number = 0;

  private jumpWithSpeed(speed: number) {
    this.translateX = -1;
    animateTo({ duration: 2000, curve: curves.springCurve(speed, 1, 10, 1) }, () => {
      // 以指定初速度进行x方向的平移的弹簧动画
      this.translateX = 0;
    })
  }

  onCancel() {
    console.info('onCancel')
  }

  onAccept() {
    console.info(' onAccept')
  }

  existApp() {
    console.info(' existApp')
  }

  ////弹框控制器
  dialogController1: CustomDialogController = new CustomDialogController({
    builder: Device({
      index: this.index,
      items: this.items,
      temp: this.temp,
      open1: this.open1,
      colse: this.colse,
      state: this.state,
      text1: this.text1,
      swtich: this.swtich,
      DeviceImage: this.DeviceImage,
      DeviceName: this.DeviceName,
      textValue: $textValue,
      inputValue: $inputValue,
    }),
    // gridCount: 3,
    cancel: this.existApp,
    //autoCancel: true,
    alignment: DialogAlignment.CenterEnd,
    //justifyContent:
    //offset: { dx: 0, dy: -20 },

    customStyle: true,
  })
  Devicepop_up: CustomDialogController = new CustomDialogController({
    builder: Devicepop_up({
      timeoutID: this.colsetimeID,
      timeoutID1: this.colsetimeID1,
      success: this.success,
      inputValue: $inputValue,
    }),
    // gridCount: 3,
    cancel: this.existApp,
    //autoCancel: true,
    alignment: DialogAlignment.Bottom,
    //justifyContent:
    offset: { dx: 0, dy: -80 },
    autoCancel: false,

    customStyle: true,
  })
  Devicepop_up1: CustomDialogController = new CustomDialogController({
    builder: Devicepop_up1({
      inputValue: $inputValue,
    }),
    // gridCount: 3,
    cancel: this.existApp,
    //autoCancel: true,
    alignment: DialogAlignment.Bottom,
    //justifyContent:
    offset: { dx: 0, dy: -80 },

    customStyle: true,
  })

  @Builder
  pixelMapBuilder(index: number) { //拖拽过程样式

    Row() {
      Column() {
        Text(this.items[index].name)
        Row() {
          Text(this.items[index].state + '|' + this.items[index].text)
        }
        .height('30%')

        Row() {
          Image(this.items[index].type)
            .width('50%')
            .height('100%')
          Image($r('app.media.kaiguan'))
            .width('100px')
            .height('100px')
        }.height('50%')
      }
      .width('100%')
      .padding(10)
      .borderRadius(10)
      .alignItems(HorizontalAlign.Start)
      // .justifyContent(FlexAlign.Center)
      .height('100%')
    }
    .width('16%')
    .height('20%')
    .padding({ left: 10 })
    .borderRadius(10)
    .backgroundColor('#99ffffff')

  }

  changeIndex(index1: number, index2: number) {
    console.debug('347589', index1 + 'OK' + index2) //交换数组中的位置
    // [this.items[index1], this.items[index2]] = [this.items[index2], this.items[index1]];
    const temp = this.items[index1];
    // this.items[index1]=this.items[index2]
    this.items[index1] = {
      name: this.items[index2].name,
      type: this.items[index2].type,
      temp: this.items[index2].temp,
      state: this.items[index2].state,
      text: this.items[index2].text,
      open: this.items[index2].open,
      colse: this.items[index2].colse,
      select: this.items[index2].select,

    }
    this.items[index2] = {

      name: temp.name,
      type: temp.type,
      temp: temp.temp,
      state: temp.state,
      text: temp.text,
      select: temp.select,
      open: temp.open,
      colse: temp.colse,
    }
  }

  dialogController: CustomDialogController = new CustomDialogController({
    builder: NoticeDialog({}),
    alignment: DialogAlignment.Center,
    customStyle: true,
    cancel: () => {
      this.isClick = !this.isClick
    }
  })
  @State deviceDialogWidth: 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()
  // }

  //任务统计
  task = async (): Promise<taskclass> => {
    let obj: taskclass = {} //尽量用{}来定义空对象，如果用null在get属性的时候可能会出错
    let res: taskclass = await StorageRequest.get("/api/v1/statistics/todayInfo")
    obj = res as taskclass
    console.info("testTag", ' -----------------' + JSON.stringify(obj));
    console.debug('await StorageRequest.get 如果是Promise.reject 就不会执行await后面的代码', obj)
    return Promise.resolve(obj)
  }

  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
    // 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()
    }
  }

  // 消息弹窗控制器
  noticeDialogController: CustomDialogController = new CustomDialogController({
    builder: NoticeDialog({}),
    alignment: DialogAlignment.Center,
    customStyle: true,
    cancel: () => {
      this.isClick = !this.isClick
    }
  })
  AvatarController: CustomDialogController = new CustomDialogController({
    builder: AvatarClick({}),
    alignment: DialogAlignment.TopEnd,
    customStyle: true,
    offset: { dx: 0, dy: -25 },
    cancel: () => {
      this.isClick = !this.isClick
    }
  })
  IconController: CustomDialogController = new CustomDialogController({
    builder: iconList({}),
    alignment: DialogAlignment.Center,
    customStyle: true,
    offset: { dx: 0, dy: 0 },
    cancel: () => {
      this.isClick = !this.isClick
    }
  })

  build() {
    Stack() {
      Column() {
        Column() {
          Stack() {
            Text()
              .width('100%')
              .height('100%')
            Row() {
              Row() {
                Image($r('app.media.back_white'))
                  .height(px2vp(48))
                  .width(px2vp(48))
                  .onClick(async () => {
                    // let userInfo = await UserAuthModel.getLast()
                    // if (userInfo?.stationDictValue === '5') {
                    //   router.pushUrl({
                    //     url: 'pages/Warehousing'
                    //   })
                    // } else if (userInfo?.stationDictValue === '6') {
                    //   router.pushUrl({
                    //     url: 'pages/OutboundStation'
                    //   })
                    // } else {
                    //   router.pushUrl({
                    //     url: 'pages/process/ProcessHome'
                    //   })
                    // }
                    router.back()
                  })
              }.width('40%')

              Blank()
              Row() {
                Text('场景视图')
                  .width('10%')
                  .fontSize($r('app.float.fontSize_24'))
                  .fontColor('#FFFFFF')
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Center)
                  .height('100%')
                  .backgroundColor(this.viewSelection === 0 ? $r('app.color.black_30') : '')
                  .onClick(() => {
                    this.viewSelection = 0
                  })
                Text('列表视图')
                  .width('10%')
                  .fontSize($r('app.float.fontSize_24'))
                  .fontColor('#FFFFFF')
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Center)
                  .backgroundColor(this.viewSelection === 1 ? $r('app.color.black_30') : '')
                  .height('100%')
                  .onClick(() => {
                    this.viewSelection = 1
                  })
              }

              Row() {
              }

              //
              // Blank()
              // Row() {
              //   Row() {
              //     Image($r("app.media.gongda_white"))
              //       .height(px2vp(48))
              //       .width(px2vp(48))
              //       .onClick(() => {
              //         router.pushUrl({
              //           url: 'pages/SmartFactory'
              //         })
              //       })
              //   }
              //   .height('100%')
              //   .width('7.2%')
              //   .justifyContent(FlexAlign.Center)
              //
              //   Row() {
              //     Image($r('app.media.notice_white'))
              //       .height(px2vp(48))
              //       .width(px2vp(48))
              //   }
              //   .height('100%')
              //   .width('7.2%')
              //   .justifyContent(FlexAlign.Center)
              //   .onClick(() => {
              //     router.pushUrl({
              //       url: "pages/OutboundStation"
              //     })
              //     this.noticeDialogController.open()
              //   })
              //
              //   Row() {
              //     Image($r("app.media.box_edit_white"))
              //       .height(px2vp(48))
              //       .width(px2vp(48))
              //   }
              //   .height('100%')
              //   .width('7.2%')
              //   .justifyContent(FlexAlign.Center)
              //   .onClick(() => {
              //     router.pushUrl({
              //       // url:'pages/Storage'
              //       // url:'pages/yyyyy'
              //       url: 'pages/RfidAllocation'
              //     })
              //   })
              //
              //   Row({ space: 2 }) {
              //     Column() {
              //       Text(CommonConstants.USER_NAME)
              //         .fontSize($r('app.float.fontSize_20'))
              //         .fontColor($r('app.color.general_font_white_color'))
              //         .opacity($r('app.float.general_font_opacity'))
              //         .fontWeight(FontWeight.Medium)
              //         .width('95%')
              //         .maxLines(1)
              //       Progress({ value: this.completeNum!, total: this.planNum!, type: ProgressType.Linear })
              //         .width('95%')
              //         .backgroundColor($r('app.color.grey_100'))
              //         .style({ strokeWidth: 5 })
              //       Text('任务进度:' + ((this.completeNum!) / (this.planNum!)) * 100 + '%')
              //         .fontSize($r('app.float.fontSize_14'))
              //         .fontColor($r('app.color.general_font_white_color'))
              //         .opacity($r('app.float.card_font_default_opacity'))
              //         .fontWeight(FontWeight.Medium)
              //         .maxLines(1)
              //     }
              //     .justifyContent(FlexAlign.Center)
              //     .height(px2vp(105))
              //     .width('58%')
              //
              //     Row() {
              //       Image(CommonConstants.USER_AVATAR && CommonConstants.USER_AVATAR.length > 0 ? CommonConstants.FILE_URL_PREFIX + CommonConstants.USER_AVATAR : $r('app.media.user_white'))
              //         .width(px2vp(48))
              //         .height(px2vp(48))
              //
              //     }
              //     .layoutWeight(1)
              //   }
              //   .width('22%')
              //   .height('90%')
              //   .alignItems(VerticalAlign.Center)
              //   .justifyContent(FlexAlign.SpaceEvenly)
              //   .onClick(() => {
              //     this.AvatarController.open()
              //   })
              // }
              // .width('40%')
              // .height('90%')
              // .alignItems(VerticalAlign.Center)
              // .justifyContent(FlexAlign.End)
            }
            .width('100%')
            .height('100%')
            .alignItems(VerticalAlign.Center)
            .justifyContent(FlexAlign.Center)
          }
          .width('100%')
          .height('8%')

          if (this.viewSelection === 1) {
            if (this.trigger === 0) {
              Column() {
                Select([{ value: '操作员1' },
                  { value: '操作员2' },
                  { value: '操作员3' },
                  { value: '操作员4' },
                  { value: '操作员5' }])
                  .selected(2)
                  .height('80px')
                  .value('操作员2')//.fontColor('#ff8d1f1f')
                    // .selectedOptionBgColor('#ffb81b1b')
                    // .selectedOptionFontColor('#ffa11cc6')
                    // .optionFontColor('#ff3972b0')
                    //.optionBgColor('#ff77e946')
                  .backgroundColor('#00000000')
                  .font({ size: '51px', weight: 500 })
                  .fontColor('#ffff')
                  .selectedOptionFont({ size: 16, weight: 400 })
                  .optionFont({ size: 16, weight: 400 })
                  .onSelect((index: number) => {
                    console.info('Select:' + index)
                  })
                Text(this.items.length + "个设备")
                  .width('100%')
                  .opacity(0.6)
                  .fontSize('32px')
                  .fontColor('#FFFFFF')
                  .fontWeight(FontWeight.Medium)
                  .textAlign(TextAlign.Start)
              }.height('10%')
              .width('100%')
              .alignItems(HorizontalAlign.Start)
            } else if (this.trigger === 1) {
              Column()
                .height('1%')
                .width('100%')
                .alignItems(HorizontalAlign.Start)
            }
            Row({ space: 100 }) {
              Text('设备')
                .fontSize($r('app.float.fontSize_24'))
                .fontColor('#ffff')
                .fontWeight(FontWeight.Medium)
                .onClick(() => {
                  this.click = 0
                })
                .height('100%')
              Text('工作台')
                .fontSize($r('app.float.fontSize_24'))
                .fontColor('#ffff')
                .fontWeight(FontWeight.Medium)
                .onClick(() => {
                  this.click = 1
                })
                .height('100%')
              Column() {
                Text('工艺区域')
                  .fontSize($r('app.float.fontSize_24'))
                  .fontColor('#ffff')
                  .fontWeight(FontWeight.Medium)
                  .onClick(() => {
                    this.click = 2
                  })
                  .height('100%')

              }
              .justifyContent(FlexAlign.Center)
              .height('100%')

            }.width('100%')
            .height("10%")

            if (this.click === 0) {
              Column() {

                //  Scroll(this.scroller){
                Grid(this.scroller) {
                  ForEach(this.items, (item: hardwareList, index) => {
                    GridItem() {
                      // if (item.select){
                      Row() {
                        Column() {
                          Text(item.name)
                            .fontColor('#FFFFFF')
                            .fontWeight(FontWeight.Medium)
                            .fontSize($r('app.float.fontSize_24'))
                          Text(item.state + '|' + item.text)
                            .fontColor('#FFFFFF')
                            .opacity(0.6)
                            .fontWeight(FontWeight.Regular)
                            .fontSize($r('app.float.fontSize_20'))
                          Row() {
                            Image(item.type)
                              .width(px2vp(120))
                              .height(px2vp(120))
                              .margin({ top: 40 })
                            Blank()

                            Image(item.select === true ? item.open : item.colse)
                              .width(px2vp(80))
                              .height(px2vp(80))
                              .margin({ top: 40 })
                              .onClick(() => {
                                // if (item.select){
                                item.select = !item.select
                                // }
                                // else {
                                //   item.select=true
                                // }
                                this.items[index] = {
                                  name: this.items[index].name,
                                  type: this.items[index].type,
                                  temp: this.items[index].temp,
                                  state: this.items[index].state,
                                  text: this.items[index].text,
                                  open: this.items[index].open,
                                  colse: this.items[index].colse,
                                  select: this.items[index].select,

                                }
                              })
                          }.height('50%')
                          .width('100%')
                          .padding({ left: 10 })
                        }
                        .width('100%')
                        .padding(10)
                        .borderRadius(10)
                        .alignItems(HorizontalAlign.Start)
                        // .justifyContent(FlexAlign.Center)
                        .height('100%')
                      }
                      .width('100%')
                      .height('30%')
                      .padding({ left: 10 })
                      .borderRadius(10)
                      .backgroundColor('#66ffffff')
                      .onClick(() => {
                        this.index = index
                        this.swtich = item.select
                        this.DeviceName = item.name
                        this.DeviceImage = item.type
                        this.temp = item.temp
                        this.open1 = item.open
                        this.colse = item.colse
                        this.state = item.state
                        this.text1 = item.text
                        this.dialogController1.open()
                      })

                      // }
                      // else {
                      //   Row(){
                      //     Column(){
                      //       Text(item.name)
                      //       Row(){
                      //         Text(item.state+'|'+item.text)
                      //       }
                      //       .height('30%')
                      //       Row(){
                      //         Image(item.type)
                      //           .width('150px')
                      //           .height('150px')
                      //         Blank()
                      //         Image(item.colse)
                      //           .width('100px')
                      //           .height('100px')
                      //           .onClick(()=>{
                      //            item.select=true
                      //             this.items[index]= {
                      //               name: this.items[index].name,
                      //               type: this.items[index].type,
                      //               temp: this.items[index].temp,
                      //               state: this.items[index].state,
                      //               text: this.items[index].text,
                      //               open: this.items[index].open,
                      //               colse: this.items[index].colse,
                      //               select: this.items[index].select,
                      //               select1: this.items[index].select1
                      //             }
                      //           })
                      //
                      //
                      //       }.height('50%')
                      //       .width('100%')
                      //       .padding({left:10})
                      //     }.width('100%')
                      //     .padding(10)
                      //     .borderRadius(10)
                      //     .alignItems(HorizontalAlign.Start)
                      //     // .justifyContent(FlexAlign.Center)
                      //     .height('100%')
                      //   }.width('100%')
                      //   .height('35%')
                      //   .padding({ left:10 })
                      //   .borderRadius(10)
                      //   .backgroundColor('#66ffffff')
                      //   .onClick(()=>{
                      //     this.DeviceName=item.name
                      //     this.DeviceImage=item.type
                      //     this.dialogController.open()
                      //   })
                      // }

                    }
                  })
                }
                .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
                .columnsGap(10)
                .rowsGap(10)
                .onScrollIndex((first: number) => {
                  console.info(first.toString())
                })
                .width('100%')
                .height('100%')
                .editMode(true) //设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem
                .supportAnimation(true) //设置Grid是否开启拖拽补位动画
                .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时，触发回调。
                  this.text = itemIndex
                  return this.pixelMapBuilder(itemIndex) //设置拖拽过程中显示的图片。
                })
                .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。
                  // isSuccess=false时，说明drop的位置在grid外部；insertIndex > length时，说明有新增元素的事件发生
                  if (!isSuccess || insertIndex >= this.items.length) {
                    return
                  }
                  console.info('beixiang' + itemIndex + '', insertIndex + '') //itemIndex拖拽起始位置，insertIndex拖拽插入位置
                  this.changeIndex(itemIndex, insertIndex)
                })
                //  }
                //   .onScrollEdge(()=>{
                //     this.trigger=1
                //   })

                .height('80%')
                .width('100%')
                .padding({ top: 10 })

              }

            } else if (this.click === 1) {
              Staging()

            } else if (this.click === 2) {
              ProcessArea()
            }
          } else if (this.viewSelection === 0) {
            Stack() {
              Image($r('app.media.Scene_graph'))
                .width(px2vp(1874))
                .height(px2vp(659))
                .borderRadius(px2vp(16))
              Flex() {
                Image($r('app.media.List_icon'))
                  .width(px2vp(120))
                  .height(px2vp(80))
                  .margin({ left: px2vp(445), top: px2vp(289) })
                  .onClick(() => {
                    this.IconController.open()
                  })
                Image($r('app.media.List_icon'))
                  .width(px2vp(120))
                  .height(px2vp(80))
                  .margin({ left: px2vp(6), top: px2vp(408) })
                  .onClick(() => {
                    this.IconController.open()
                  })
                Image($r('app.media.List_icon'))
                  .width(px2vp(120))
                  .height(px2vp(80))
                  .margin({ left: px2vp(80), top: px2vp(287) })
                  .onClick(() => {
                    this.IconController.open()
                  })
                Image($r('app.media.List_icon'))
                  .width(px2vp(120))
                  .height(px2vp(80))
                  .margin({ left: px2vp(140), top: px2vp(287) })
                  .onClick(() => {
                    this.IconController.open()
                  })

              }.width(px2vp(1874))
              .height(px2vp(659))
            }
            .width(px2vp(1874))
            .alignContent(Alignment.Center)
            .height(px2vp(900))
            .margin({ top: 10 })
            .borderRadius(px2vp(16))
            .backgroundColor($r('app.color.black_100'))
          }
        }.width('100%').height('92%')
        .padding(20)

        // Stack() {
        //   Image($r('app.media.bottombg'))
        //     .width('100%')
        //     .height('100%')
        // Text()
        //   .width('100%')
        //   .height('100%')
        //   .backgroundImage($r('app.media.bottombg'))
        //   .backgroundImageSize({width:'100%',height:'100%'})


        // }
        // .width('100%')
        // .height('8%')
        // .backgroundImage($r('app.media.bottombg'))
        // .backgroundImageSize({width:'100%',height:'100%'})

      }
      .backgroundImage($r('app.media.zhihuigc'))
      .backgroundImageSize({ width: '100%', height: '100%' })
      .width('100%')
      .height('100%')

      if (this.donghua1 === 1) {
        Column() {
          Image($r('app.media.LOGO_donghua'))
            .width('100%')
            .height('100%')
        }
        .width('8%')
        .height('40%')
      } else if (this.donghua1 === 2) {

      }


    }
    .width('100%')
    .height('100%')
    .alignContent(Alignment.Bottom)

  }
}

@CustomDialog
struct iconList {
  controller: CustomDialogController

  build() {
    Column() {
      Text('#2装配工位001')
        .width('100%')
        .fontSize($r('app.float.fontSize_24'))
        .fontColor('#FFFFFF')
        .fontWeight(FontWeight.Medium)
        .textAlign(TextAlign.Center)
      Row() {
        Column() {
          Text('螺丝刀-十字')
            .fontSize($r('app.float.fontSize_24'))
            .fontColor('#FFFFFF')
            .fontWeight(FontWeight.Medium)
            .textAlign(TextAlign.Center)
          Text('1#装配工位')
            .fontSize($r('app.float.fontSize_20'))
            .fontColor('#FFFFFF')
            .fontWeight(FontWeight.Regular)
            .textAlign(TextAlign.Center)
          Image($r('app.media.screwdriver'))
            .width(px2vp(80))
            .height(px2vp(80))

        }
        .width(px2vp(200))
        .height(px2vp(200))
        .margin({ right: px2vp(20) })
        .borderRadius(px2vp(16))
        .backgroundColor('#ff9f9b9b')

        Column() {
          Text('镊子')
            .fontSize($r('app.float.fontSize_24'))
            .fontColor('#FFFFFF')
            .fontWeight(FontWeight.Medium)
            .textAlign(TextAlign.Center)
          Text('2#装配工位')
            .fontSize($r('app.float.fontSize_20'))
            .fontColor('#FFFFFF')
            .fontWeight(FontWeight.Regular)
            .textAlign(TextAlign.Center)
          Image($r('app.media.tweezers'))
            .width(px2vp(80))
            .height(px2vp(80))

        }.width(px2vp(200))
        .height(px2vp(200))
        .borderRadius(px2vp(16))
        .backgroundColor('#ff9f9b9b')
      }
      .width(px2vp(420))
      .height(px2vp(200))
      .margin({ bottom: px2vp(20), top: px2vp(40) })

      Row() {
        Column() {
          Text('扳手')
            .fontSize($r('app.float.fontSize_24'))
            .fontColor('#FFFFFF')
            .fontWeight(FontWeight.Medium)
            .textAlign(TextAlign.Center)
          Text('3#装配工位')
            .fontSize($r('app.float.fontSize_20'))
            .fontColor('#FFFFFF')
            .fontWeight(FontWeight.Regular)
            .textAlign(TextAlign.Center)
          Image($r('app.media.magnifier'))
            .width(px2vp(80))
            .height(px2vp(80))

        }
        .width(px2vp(200))
        .height(px2vp(200))
        .margin({ right: px2vp(20) })
        .borderRadius(px2vp(16))
        .backgroundColor('#ff9f9b9b')

        Column() {
          Text('放大镜')
            .fontSize($r('app.float.fontSize_24'))
            .fontColor('#FFFFFF')
            .fontWeight(FontWeight.Medium)
            .textAlign(TextAlign.Center)
          Text('1#装配工位')
            .fontSize($r('app.float.fontSize_20'))
            .fontColor('#FFFFFF')
            .fontWeight(FontWeight.Regular)
            .textAlign(TextAlign.Center)
          Image($r('app.media.magnifier'))
            .width(px2vp(80))
            .height(px2vp(80))

        }.width(px2vp(200))
        .height(px2vp(200))
        .borderRadius(px2vp(16))
        .backgroundColor('#ff9f9b9b')
      }
      .width(px2vp(420))
      .height(px2vp(200))

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

//弹窗组件
@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'))
  }
}

//头像点击弹窗
@CustomDialog
struct AvatarClick {
  @State shutdownTransparency: number = 0
  private cardType: number = 0
  @State cardSorting: number = 0
  @State cardServices: UniversalCard[] = [{}]
  @State x: number = 0
  @State y: number = 0
  @State textValue: string = ''
  @State inputValue: string = ''
  @State avatarFrame: boolean = false
  loginDialogController: CustomDialogController = new CustomDialogController({
    builder: login({
      textValue: $textValue,
      inputValue: $inputValue,
    }),
    alignment: DialogAlignment.Center,
    autoCancel: false,
    customStyle: true
  })
  shutdownDialogController: CustomDialogController = new CustomDialogController({
    builder: shutdown({
      textValue: $textValue,
      inputValue: $inputValue,
      shutdownTransparency: this.shutdownTransparency
    }),
    alignment: DialogAlignment.Center,
    autoCancel: false,
    customStyle: true
  })
  controller: CustomDialogController

  build() {
    Column() {
      Text('个人设置')
        .height('33%')
        .fontSize(px2vp(32))
        .fontWeight(FontWeight.Medium)
        .fontColor('#e6000000')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/SetPage'
          })
        })
      Divider()
      Text('退出登录')
        .height('33%')
        .fontSize(px2vp(32))
        .fontWeight(FontWeight.Medium)
        .fontColor('#e6000000')
        .onClick(() => {
          this.loginDialogController.open()
          this.controller
        })
      Divider()
      Text('开关/重启')
        .height('33%')
        .fontSize(px2vp(32))
        .fontWeight(FontWeight.Medium)
        .fontColor('#e6000000')
        .onClick(() => {
          this.shutdownTransparency = 1
          this.shutdownDialogController.open()
          this.avatarFrame = !this.avatarFrame
        })

    }
    .width('15%')
    .height('25%')
    .backgroundColor('#ffff')
    .margin({ top: '4%', right: '1%' })
    .borderRadius(21)
  }
}

//开关重启
@CustomDialog
struct shutdown {
  @Link shutdownTransparency: number
  @Link textValue: string
  @Link inputValue: string
  controller: CustomDialogController

  build() {
    Column() {
      Row() {
        Image($r('app.media.restart'))
          .width(px2vp(107))
          .height(px2vp(107))
          .onClick(() => {
            this.shutdownTransparency = 0
            this.controller.close()
          })
        Blank()
        Image($r('app.media.shutdown'))
          .width(px2vp(107))
          .height(px2vp(107))
          .onClick(() => {
            let pro = new process.ProcessManager();
            pro.exit(0);
            this.shutdownTransparency = 0


          })

      }.width('30%')
      .height('20%')

      Row() {
        Text('重启')
          .fontWeight(FontWeight.Medium)
          .fontSize(px2vp(27))
          .width(px2vp(107))
          .height(px2vp(107))
          .textAlign(TextAlign.Center)
          .fontColor('#FFFFFF')
        Blank()
        Text('关机')
          .fontWeight(FontWeight.Medium)
          .fontSize(px2vp(27))
          .width(px2vp(107))
          .textAlign(TextAlign.Center)
          .height(px2vp(107))
          .fontColor('#FFFFFF')
        // .onClick(()=>{
        //   try {
        //     power.('shutdown_test');
        //   } catch(err) {
        //     console.error('shutdown failed, err: ' + err);
        //   }
        // })

      }.width('30%')
      .height('20%')
    }
    .width('100%')
    .height('100%')
    .borderRadius(15)
    .backgroundColor('#cc000000')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)

  }
}

//登录退出
@CustomDialog
struct login {
  @Link textValue: string
  @Link inputValue: string
  controller: CustomDialogController

  build() {
    Column() {
      Text('退出登录')
        .textAlign(TextAlign.Center)
        .fontColor('#e6000000')
        .fontSize(px2vp(53))
        .fontWeight(FontWeight.Medium)
        .width('100%')
        .height('30%')
      Text('是否返回登录页?')
        .textAlign(TextAlign.Center)
        .width('100%')
        .height('30%')
      Row({ space: 10 }) {
        Text('取消')
          .width('40%')
          .borderRadius(21)
          .height('70%')
          .textAlign(TextAlign.Center)
          .backgroundColor('#0f000000')
          .fontColor('#0A59F7')
          .onClick(() => {
            this.controller.close()
          })
        Text('确认')
          .width('40%')
          .height('70%')
          .borderRadius(21)
          .backgroundColor('#0A59F7')
          .textAlign(TextAlign.Center)
          .fontColor('#ffff')
          .onClick(() => {
            this.goOut()

          })
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .height('30%')

    }.width('25%')
    .height('20%')
    .borderRadius(15)
    .backgroundColor('#ffff')
  }

  goOut = async () => {
    this.controller.close()
    CommonConstants.LOGIN_OUT = true

    let userInfo = await UserAuthModel.getLast()
    if (userInfo) {
      userInfo.isLogin = false
      UserAuthModel.updateUser(userInfo)
    }

    router.replaceUrl({
      url: 'pages/LoginPage'
    })
  }
}

@CustomDialog
struct Device {
  scroller: Scroller = new Scroller()
  @Link state: string
  @Link text1: string
  @Link index: number
  @Link private items: Array<hardwareList>
  @Link open1: Resource
  @Link colse: Resource
  @Link temp: number
  @Link textValue: string
  @Link swtich: boolean
  @Link DeviceName: string
  @State outSetValueOne: number = 40
  @Link DeviceImage: Resource
  @Link inputValue: string
  @State selest: number = 0
  @State onclick: number = 0
  controller: CustomDialogController

  build() {
    Column() {
      Row() {
        Image($r('app.media.back_white'))
          .width($r('app.float.robot_image_select_size'))
          .padding({ left: 10 })
          .onClick(() => {
            this.controller.close()
          })
        Text(this.DeviceName)
          .fontWeight(FontWeight.Medium)
          .fontSize('40px')
          .fontColor('#ffff')
      }.width('100%')
      .height('10%')

      Column() {
        Image(this.DeviceImage)
          .width('50%')

      }.width('100%')
      .height('30%')

      Blank()
      Text('ID:95234723')
        .fontColor('#ffff')
        .height('5%')
      // if (this.selest===0){
      //   Row(){
      //     Column(){
      //       Text('控制')
      //         .fontSize('32px')
      //         .fontColor('#0A59F7')
      //         .fontWeight(FontWeight.Medium)
      //       Blank()
      //       Divider()
      //         .width('30%')
      //         .strokeWidth(2)
      //         .backgroundColor('#0A59F7')
      //
      //     }.width('30%')
      //     .height('100%')
      //     .onClick(()=>{
      //       this.selest=0
      //     })
      //     Column(){
      //       Text('指南')
      //         .fontSize('32px')
      //         .fontColor('#ffff')
      //
      //         .fontWeight(FontWeight.Medium)
      //     }.width('30%')
      //     .height('100%')
      //     .onClick(()=>{
      //       this.selest=1
      //     })
      //
      //   }.width('100%')
      //   .height('5%')
      //   .justifyContent(FlexAlign.Center)
      //
      // }else if (this.selest===1){
      //   Row(){
      //     Column(){
      //       Text('控制')
      //         .fontSize('32px')
      //         .fontColor('#ffff')
      //         .fontWeight(FontWeight.Medium)
      //     }.width('30%')
      //     .height('100%')
      //     .onClick(()=>{
      //       this.selest=0
      //     })
      //     Column(){
      //       Text('指南')
      //         .fontSize('32px')
      //         .fontColor('#0A59F7')
      //         .fontWeight(FontWeight.Medium)
      //       Blank()
      //       Divider()
      //         .width('30%')
      //         .strokeWidth(2)
      //         .backgroundColor('#0A59F7')
      //
      //     }.width('30%')
      //     .height('100%')
      //   }.width('100%')
      //   .height('5%')
      //   .justifyContent(FlexAlign.Center)
      // }
      if (this.selest === 0) {
        Row() {
          Text('在位检查')
            .fontWeight(FontWeight.Medium)
            .fontSize('40px')
            .fontColor('#ffff')
          Blank()
          // if (this.swtich===0){

          Image(this.swtich === true ? $r('app.media.open') : $r('app.media.colse'))
            .width('15%')
            .onClick(() => {
              this.onclick = 1
              // this.items[this.index].select=! this.items[this.index].select
              // this.swtich=!this.swtich
              // this.items[this.index]= {
              //   name: this.items[this.index].name,
              //   type: this.items[this.index].type,
              //   temp: this.items[this.index].temp,
              //   state: this.items[this.index].state,
              //   text: this.items[this.index].text,
              //   open: this.items[this.index].open,
              //   colse: this.items[this.index].colse,
              //   select: this.items[this.index].select,
              // }
            })

          // .onClick(()=>{
          //   this.swtich=false
          // })
          // }else if (this.swtich===false){
          //   Image($r('app.media.colse'))
          //     .width('15%')
          //     .onClick(()=>{
          //       this.swtich=true
          //     })
          // }

        }
        .width('90%')
        .height('15%')
        .padding({ left: 10, right: 10 })
        .backgroundColor('#33ffffff')
        .borderRadius(21)
        .margin(10)

        Blank()
        if (this.onclick === 1) {
          Column() {
            Text(this.DeviceName)
              .fontSize($r('app.float.fontSize_20'))
              .fontColor($r('app.color.white_100'))
            Text('ID:95234723')
              .fontColor('#ffff')
              .height('5%')
            Row() {
              Image($r('app.media.normal_icon'))
                .width(px2vp(20))
                .height(px2vp(20))
                .margin({ right: px2vp(10) })
              Text('#01装配工位')
                .fontSize($r('app.float.fontSize_14'))
                .fontColor($r('app.color.green_100'))

            }.width(px2vp(200))
            .height(px2vp(100))
            .justifyContent(FlexAlign.Center)
          }.width('100%')
          .alignItems(HorizontalAlign.Center)

        }


        // Row(){
        //   Column(){
        //     Text('亮度')
        //       .fontWeight(FontWeight.Medium)
        //       .fontSize('32px')
        //       .fontColor('#ffff')
        //     Text(this.outSetValueOne.toString()+'%')
        //       .fontWeight(FontWeight.Regular)
        //       .fontSize('27px')
        //       .opacity(0.6)
        //       .fontColor('#ffff')
        //   }.height('100%')
        //   .width('20%')
        //   .justifyContent(FlexAlign.Center)
        //   // Slider({ value:this.outSetValueOne, min: 0, max: 100, style: SliderStyle.OutSet })
        //   //   .layoutWeight(2)
        //   //   .blockColor('#fff')
        //   //   .trackColor('#fffy')
        //   //   .width('80%')
        //
        // }.width('90%')
        // .height('15%')
        // .backgroundColor('#33ffffff')
        // .borderRadius(21)
        // .margin(10)
      } else if (this.selest === 1) {
        Row() {

        }
        .width('90%')
        .height('15%')
        .padding({ left: 10, right: 10 })
        .backgroundColor('#33ffffff')
        .borderRadius(21)
        .margin(10)

        Row() {

        }
        .width('90%')
        .height('15%')
        .padding({ left: 10, right: 10 })
        .backgroundColor('#33ffffff')
        .borderRadius(21)
        .margin(10)
      }
      Blank()
    }.width('30%')
    .backgroundColor('#000000')
    .height('80%')
    .borderRadius(21)
  }
}

@CustomDialog
struct Devicepop_up {
  onCancel() {
    console.info('onCancel')
  }

  onAccept() {
    console.info(' onAccept')
  }

  existApp() {
    console.info(' existApp')
  }

  scroller: Scroller = new Scroller()
  Devicepop_up1: CustomDialogController = new CustomDialogController({
    builder: Devicepop_up1({
      inputValue: $inputValue,
    }),
    // gridCount: 3,
    cancel: this.existApp,
    //autoCancel: true,
    alignment: DialogAlignment.Bottom,
    //justifyContent:
    offset: { dx: 0, dy: -80 },

    customStyle: true,
  })
  @Link success: boolean
  @Link inputValue: string
  @Link timeoutID: number
  @Link timeoutID1: number
  @State selest: number = 0
  controller: CustomDialogController

  build() {
    if (this.success) {
      Column() {
        Text('照相机')
          .fontSize(px2vp(51))
          .fontColor('#000000')
          .fontWeight(FontWeight.Medium)
          .textAlign(TextAlign.Center)
          .width('100%')
          .margin({ top: 20 })
        Image($r('app.media.xiangji'))
          .width('60%')
          .height('60%')
        Row() {
          Image($r('app.media.ConnectionSuccessful'))
            .width(px2vp(30))
            .height(px2vp(30))
          Text('设备连接成功')
            .fontColor('#ff5edd4f')
            .fontSize(px2vp(27))
            .padding({ left: 10 })


        }.width('100%')
        .height('10%')
        .justifyContent(FlexAlign.Center)

      }
      .width('30%')
      .backgroundColor('#fff')
      .height('40%')
      .borderRadius(21)
      .onClick(() => {
        clearTimeout(this.timeoutID);
        clearTimeout(this.timeoutID1);
        this.controller.close()
      })
      .transition({ translate: { x: -150, y: -500, }, opacity: 1,
        scale: {
          x: 0,
          y: 0,
          z: 0,
          centerX: '50%',
          centerY: '100%'
        } })
      .transition({ type: TransitionType.Insert, translate: { x: 0, y: -150, }, opacity: 1,
        scale: {
          x: 0,
          y: 0,
          z: 0,
          centerX: '50%',
          centerY: '100%'
        } })
    }

  }
}

@CustomDialog
struct Devicepop_up1 {
  scroller: Scroller = new Scroller()
  @Link inputValue: string
  @State selest: number = 0
  controller: CustomDialogController

  // 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，那么此处需要将指向自己的controller放在最后
  build() {
    Column() {
      Text('RFID读卡器')
        .fontSize(px2vp(51))
        .fontColor('#000000')
        .fontWeight(FontWeight.Medium)
        .textAlign(TextAlign.Center)
        .width('100%')
        .margin({ top: 20 })
      Image($r('app.media.RFID'))
        .width('60%')
        .height('60%')
      Row() {
        Image($r('app.media.ConnectionSuccessful'))
          .width(px2vp(30))
          .height(px2vp(30))
        Text('设备连接成功')
          .fontColor('#ff5edd4f')
          .fontSize(px2vp(27))
          .padding({ left: 10 })


      }.width('100%')
      .height('10%')
      .justifyContent(FlexAlign.Center)

    }
    .width('30%')
    .backgroundColor('#fff')
    .height('40%')
    .borderRadius(21)
    .transition({ type: TransitionType.Delete, translate: { x: 0, y: -100, }, opacity: 1,
      scale: {
        x: 0,
        y: 0,
        z: 0,
        centerX: '50%',
        centerY: '100%'
      } })
  }
}