OpenCAX/entry/src/main/ets/pages/CustomController/Button.ets

import { hilog } from '@kit.PerformanceAnalysisKit';
import { ExecuteCommand } from '../EventSubWin/ExCom';
import { TitleButton } from "../LayoutInterface/Interface/ButtonInterface";
import { TitleModel } from "../LayoutInterface/Interface/ModelInterface";
import { TitleTabData } from '../LayoutInterface/Layout/TitleTabData';
import { mwInfo } from '../DispWinInfo/DispWinInfo'

//按钮统一尺寸,该按钮为正方形,所以以主窗口宽为基准,长=高->正方形
let ebWidth=mwInfo.width*0.02;
let ebHeigth=mwInfo.width*0.02;
//占位符的高度
let edHeigth=mwInfo.width*0.005


//单一功能按钮
//图片->文本
//不能用于模块切换
@ComponentV2
export struct EventBtn {
  //按钮动态布局类型,目前处于开发阶段两种状态.
  //1-eventBtn==false为普通按钮,支持所有功能
  //2-eventBtn==true为模块切换模块独立的功能
  @Param eventBtnType?:boolean=false;
  //普通功能按钮调用的数据
  @Param eventBtn: TitleButton | undefined = undefined;
  //模块切换模块按钮数据
  @Consumer('curtModel') curtModel: Array<TitleModel> | undefined = TitleTabData.mModels.get(0)

  @Builder
  build() {
    Column() {
      //如果该类型是false表示为配普通事件按钮
        if (this.eventBtn != undefined) {
          Button()
            .width(ebWidth)
            .height(ebHeigth)
            .backgroundImage($r('app.media.' + this.eventBtn.eIcon))
            .backgroundImagePosition({ x: '5%', y: '5%' })
            .backgroundColor(Color.Transparent)
            .backgroundImageSize({
              width: '90%', // 图片宽度占满按钮
              height: '90%' // 图片高度占满按钮
            })
            .onClick(()=>{
              if(!this.eventBtnType){
                ExecuteCommand(this.eventBtn as TitleButton);
              }else{
                if (this.eventBtn?.eEvent == 'Switch_Model_CAD') {
                  this.curtModel = TitleTabData.mModels.get(1)
                } else if (this.eventBtn?.eEvent == 'Switch_Model_CAM') {
                  this.curtModel = TitleTabData.mModels.get(2)
                } else if (this.eventBtn?.eEvent == 'Switch_Model_CAE') {
                  this.curtModel = TitleTabData.mModels.get(3)
                }
              }
            })
        }
      if (this.eventBtn != undefined) {
        Blank()
          .width('auto')
          .height(edHeigth)
        Text(this.eventBtn.eName)
          .fontSize(16)
          .width('auto')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Transparent)
      }
    }.padding(1)
  }
}

//菜单目录按钮
//功能目录菜单,主要用于针对单一按钮多个功能形式
@ComponentV2
export struct MenuBtn {
  @Param menus?: Array<TitleButton>=undefined;
  @Local curtIndex:number=0;
  @Local action?:TitleButton= undefined;
  @Builder
  BaseMenu (){
    Menu() {
      ForEach(this.menus, (item: TitleButton, index: number) => {
        //如果是功能组则
        if(!Array.isArray(item)){
          MenuItem({ startIcon: $r('app.media.'+item.eIcon), content: item.eName })
            .onClick(()=> {
              this.curtIndex=index;
              ExecuteCommand(item as TitleButton);
            })
            .size({height: ebWidth})
        }
      })
    }.fontSize(20)
  }

  build() {
    Column({ space: 0 }) {
      if (this.menus != undefined) {
        Button()
          .width(ebWidth)
          .height(ebHeigth)
          .backgroundColor(Color.Transparent)
          .backgroundImage($r('app.media.' + this.menus[this.curtIndex].eIcon))
          .backgroundImagePosition({ x: '5%', y: '5%' })
          .backgroundImageSize({
            width: '90%', // 图片宽度占满按钮
            height: '90%' // 图片高度占满按钮
          }).onClick(()=> {
            ExecuteCommand((this.menus as Array<TitleButton>)[this.curtIndex] as TitleButton);
        })

        Button(){
          Column(){
            Image($r('app.media.base_chevron_down')).scale({ centerX: '50%', centerY: '50%' })
              .height(edHeigth)
            Text((this.menus[this.curtIndex].eName))
              .fontSize(16)
              .textAlign(TextAlign.Center)
          }.height('100%')
           .align(Alignment.Center)
        }.constraintSize({ minWidth: ebWidth })
         .height(mwInfo.width*0.01)
         .backgroundColor(Color.Transparent)
         .bindMenu(this.BaseMenu)
         .type(ButtonType.Normal)
      }
    }.padding(1)
  }
}


//图片按钮菜单功能.
//该符合组件支持用户选择Button的Icon的Index联动
@ComponentV2
export struct SubColumnMenu {
  @Param menus: Array<TitleButton|Array<TitleButton>> = [];
  @Local curtIndex:number=0;
  @Param icon:string|undefined=undefined;
  @Param name:string|undefined=undefined;
  @Builder
  SubMenu (subMenu:Array<TitleButton>) {
    Menu() {
      ForEach(subMenu, (subItem: TitleButton, index: number) => {
        MenuItem({
          startIcon: $r('app.media.' + subItem.eIcon),
          content: subItem.eName,
        })
          .onClick(() => {
            ExecuteCommand(subItem as TitleButton);
          })
          .size({ height: ebWidth })
      })
    }.fontSize(20)
  }
  @Builder
  BaseMenu (){
    Menu() {
      ForEach(this.menus, (item: TitleButton|Array<TitleButton>, index: number) => {
        //如果是功能组则
        if(!Array.isArray(item)){
          MenuItem({ startIcon: $r('app.media.'+item.eIcon), content: item.eName })
            .onClick(()=> {
              this.curtIndex=index;
              ExecuteCommand(item as TitleButton);
            })
            .size({height: ebWidth})
        }else{
          MenuItem({
            startIcon: $r('app.media.' + item[0].eIcon),
            content: item[0].eName,
            builder: this.SubMenu(item)
          })
        }
      })
    }.fontSize(20)
  }

  build(){
    Row(){
        Button(){
          Row(){
            Image($r('app.media.'+(this.icon!=undefined ? this.icon:(this.menus[this.curtIndex]as TitleButton).eIcon)))
              .width(mwInfo.width*0.013)
              .scale({ centerX: '50%', centerY: '50%' })
            if(this.name!=undefined){
              Text(this.name)
                .fontSize(16)
            }
          }.width('auto')
        }.constraintSize({ minWidth: mwInfo.width*0.013 })
        .backgroundColor(Color.Transparent)
        .bindMenu(this.BaseMenu)
        .type(ButtonType.Normal)
    }
  }
}