import router from '@ohos.router'
import { BaseInfoType, CarInfoType } from '../model/Common'
import TopLogo from './compontents/TopLogo'

@Entry
@Component
struct SettingPage {
  @State ratio: number = 1280 / 960
  @State url: string = ''
  @State baseInfo: BaseInfoType = {}
  @State carInfo: CarInfoType = {}
  @State @Watch('outClick') outFlag: boolean = false;

  build() {
    Column() {
      TopLogo({ outFlag: $outFlag })
      Column() {
        Row() {
          Image($r('app.media.setting_clzc')).width('30.5%').height('74%').onClick(() => {
            // this.vocObj.playAudio({
            //   type: 1,
            //   name: 'button_media.wav'
            // })
            this.url = 'pages/Register'
            router.pushUrl({
              url: this.url,
            }, router.RouterMode.Single);
          })
          Image($r('app.media.setting_spjk')).width('30.5%').height('74%').onClick(() => {
            // this.vocObj.playAudio({
            //   type: 1,
            //   name: 'button_media.wav'
            // })
            this.url = 'pages/VideoConfig'
            router.pushUrl({
              url: this.url,
            }, router.RouterMode.Single);
          })
          Image($r('app.media.setting_xtts')).width('30.5%').height('74%').onClick(() => {
            // this.vocObj.playAudio({
            //   type: 1,
            //   name: 'button_media.wav'
            // })
            this.url = 'pages/TerminalInfo'
            router.pushUrl({
              url: this.url,
            }, router.RouterMode.Single);
          })
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceAround)
      }

      Column() {
        Row() {
          Column() {
            Text('V ' + this.baseInfo.version)
              .fontColor('#CCAE7A')
              .fontSize(22 * this.ratio)
              .width('30%')
              .margin({ bottom: 10 * this.ratio })
            Text('授权信息：' + (this.baseInfo.hasAuth ? '已授权' : '未授权'))
              .fontColor('#CCAE7A')
              .fontSize(22 * this.ratio)
              .width('30%')
          }
          .margin({ left: 24 * this.ratio })

          Text('考车号：' + this.carInfo.carNo)
            .fontColor('#CCAE7A')
            .fontSize(22 * this.ratio)
            .margin({ right: 24 * this.ratio })
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
        .margin({ bottom: 10 * this.ratio })
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .backgroundImagePosition({ x: 0, y: 0 })
    .backgroundImage($r('app.media.index_bg'))
    .backgroundImageSize({ width: '100%', height: '100%' })
  }

  aboutToAppear() {
    // this.vocObj = new voiceService(async (status, val, next) => {
    // });
    this.carInfo = AppStorage.get<CarInfoType>('carInfo')!
    this.baseInfo = AppStorage.get<BaseInfoType>('baseInfo')!
  }

  outClick() {
  }
}