import { hilog } from '@kit.PerformanceAnalysisKit';
import { mwInfo } from './DispWinInfo/DispWinInfo'
import { AppStorageV2 } from '@kit.ArkUI';
import {InitXCompNode,XCompInfos,XCompInfo,CurrentXCompIndex} from './EventSubWin/ExCom'


@ComponentV2
export struct ModelViewTab {
  @Local xcInfos: XCompInfos = AppStorageV2.connect<XCompInfos>(XCompInfos, () => new XCompInfos)!;
  //顶部导航组件
  private barTabs: TabsController = new TabsController();
  //当前的顶部导航选择页
  @Local  barFocusIndex: number = 0;
  aboutToAppear(): void {
    InitXCompNode()
  }
  build() {
    Flex({ direction: FlexDirection.Column }) {
      if((this.xcInfos.infos as Array<XCompInfo>).length>0){
        Scroll() {
          Row() {
            ForEach(this.xcInfos.infos, (item: XCompInfo, index: number) => {
              Row({ space: 0 }) {
                Image($r('app.media.startIcon'))
                  .width(mwInfo.width*0.012)
                  .height(mwInfo.width*0.012)
                  .objectFit(ImageFit.Contain)
                Button(item.name)
                  .fontWeight(index === this.barFocusIndex ? FontWeight.Bold : FontWeight.Normal)
                  .width('auto')
                  .height(mwInfo.width*0.012)
                  .type(ButtonType.Normal)
                Button('X')
                  .fontSize(12)
                  .width(mwInfo.width*0.012)
                  .height(mwInfo.width*0.012)
                  .type(ButtonType.Normal)
                  .align(Alignment.Center)
              }.onClick(() => {
                this.barTabs.changeIndex(index);
                this.barFocusIndex = index;
                CurrentXCompIndex(index);
              })
            })
          }
        }.align(Alignment.Start)
        .scrollable(ScrollDirection.Horizontal)
        .scrollBar(BarState.Off)
        .width('100%')
        //分割线
        Divider().vertical(false).strokeWidth(1).color(0x000000).lineCap(LineCapStyle.Round).width('100%').backgroundColor(Color.Gray)
        Tabs({ barPosition: BarPosition.Start, index: 0, controller: this.barTabs }) {
          ForEach(this.xcInfos.infos,(item:XCompInfo, index: number)=>{
            TabContent() {
              ContentSlot(item.node);
            }.align(Alignment.Start)
            .padding(1)
          })
        }.scrollable(false)
        .barHeight(0)
        .height('auto')
        .barMode(BarMode.Fixed)

        .barPosition(BarPosition.Start)
        .backgroundBlurStyle(BlurStyle.COMPONENT_THIN)
        .fadingEdge(true)
        .barMode(BarMode.Scrollable)
        .backgroundColor($r('sys.color.comp_background_secondary'))
        .divider({ strokeWidth: '1px', color: $r('sys.color.comp_divider') })
      }else{
        Image($r('app.media.base_background'))
      }

    }//.borderWidth('1')
     //.borderColor(Color.Grey)
     //.height('auto')
     //.backgroundColor('#f3f3f0')

     .padding($r('sys.float.padding_level1'))
     .backgroundImageSize({ width: '100%', height: '100%' })
     .borderRadius($r('sys.float.corner_radius_level8'))
  }
}