import SignalDisplayComponent from './compontents/SignalDisplay';
import router from '@ohos.router';
import TabComponent from './compontents/Tab';

@Entry
@Component
struct SignDisplayPage {
  @State active: number = 0

  build() {
    Flex({
      direction: FlexDirection.Column,
      alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center
    }) {
      // 头部
      Flex({
        alignItems: ItemAlign.Center,
        justifyContent: FlexAlign.SpaceBetween
      }) {
        Row() {
          // 短logo
          Image($r('app.media.shortLogo')).height(100).width(150).objectFit(ImageFit.Contain).margin({
            left: 10,
            right: 10
          })
          TabComponent({
            activeIndex: this.active,
            onchange: (index: number) => {
              this.active = index
            }
          })
        }

        Row() {
          //   返回按钮
          Image($r('app.media.topB_back')).height(100).onClick(() => {
            router.back()
          })
        }
      }.width("100%").height(100)

      SignalDisplayComponent({
        active: this.active
      })
    }
    .width('100%')
    .height('100%')
    .backgroundImage($r('app.media.bg'))
    .backgroundImageSize({ width: '100%', height: '100%' })
  }
}