import { TitleButton } from '../interface/Interface';
import {LeftSideBars} from '../layout/LeftSideBar'
import { mwInfo } from '../displaywindowinfo/DispWinInfo'

@ComponentV2
export struct RightSideTab {
  private leftSideBarTabs: TabsController = new TabsController();
  @Local leftSideBarFocusIndex: number = 0;
  @Local isExpanded:boolean=true;
  @Consumer('RightSideWidth') rightSideWidth:number=mwInfo.width * 0.1;

  build() {
    Row() {
      Column({space:1}){
        Tabs({ barPosition: BarPosition.Start, controller: this.leftSideBarTabs }) {
          TabContent() {
          }

        }.barHeight(0)
      }.width(this.isExpanded?this.rightSideWidth-mwInfo.width*0.013:'0%')
      //右边按钮列
      Column({space:1}){
        Button()
          .backgroundImagePosition({ x: '5%', y: '5%' })
          .backgroundColor(Color.Transparent)
          .backgroundImageSize({
            width: '90%', // 图片宽度占满按钮
            height: '90%' // 图片高度占满按钮
          })
          .backgroundImage(this.isExpanded ? $r('app.media.base_expand_on'):$r('app.media.base_expand_off'))
          .type(ButtonType.Normal)
          .width(mwInfo.width*0.013)
          .height(mwInfo.width*0.013)
          .onClick(()=>{
            this.isExpanded = !this.isExpanded;
            this.rightSideWidth=this.isExpanded?mwInfo.width * 0.1:mwInfo.width*0.013;
          }).margin({ top: 2,left:1,bottom:0,right:2})
        Blank().layoutWeight(1)
      }.borderWidth(1)
       .width(mwInfo.width*0.013)
    }.width('auto')
  }
}