/*
 * 鱼眼矫正模式视图
 * EZOpenSDK
 *
 * Created by junecheng on 2024/5/21.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */
@Component
export default struct FecView {
  fecTitleArr: Array<string> = ['默认鱼眼', '4分屏', '5分屏', '全景5分屏', '维度拉伸', 'ARC', 'ARCV', '广角', '180°全景', '360°全景', '柱状', '画中画']

  build() {

    RelativeContainer() {
      Image($r("app.media.play_close"))
        .width(50)
        .height(50)
        .id("bottomview_fec_view_close")
        .alignRules({
          top: { 'anchor': '__container__', align: VerticalAlign.Top },
          right: { 'anchor': '__container__', align: HorizontalAlign.End }
        })
        .onClick(() => {

        })
      Row({ space: 10 }) {
        Text("壁装")
          .fontSize(14)
          .backgroundColor($r('app.color.C6C6C8'))
          .width(75)
          .height(35)
          .textAlign(TextAlign.Center)
          .onClick(() => {

          })
        Text("底装")
          .fontSize(14)
          .backgroundColor($r('app.color.C6C6C8'))
          .width(75)
          .height(35)
          .textAlign(TextAlign.Center)
          .onClick(() => {

          })
        Text("顶装")
          .fontSize(14)
          .backgroundColor($r('app.color.C6C6C8'))
          .width(75)
          .height(35)
          .textAlign(TextAlign.Center)
          .onClick(() => {

          })
      }
      .id("bottomview_fec_view_top")
      .margin({ left: 10, top: 30 })
      .alignRules({
        left: { 'anchor': '__container__', align: HorizontalAlign.Start }
      })

      Grid() {
        ForEach(this.fecTitleArr, (item: string, index: number) => {
          GridItem() {
            Text(item)
              .fontSize(14)
              .backgroundColor($r('app.color.C6C6C8'))
              .width(75)
              .height(35)
              .textAlign(TextAlign.Center)
              .onClick(() => {

              })
          }
        })
      }
      .layoutDirection(GridDirection.Row)
      .maxCount(4)
      .columnsGap(10)
      .rowsGap(10)
      .id("bottomview_fec_view_bottom")
      .margin({ left: 10, top: 40 })
      .alignRules({
        left: { 'anchor': '__container__', align: HorizontalAlign.Start },
        top: { 'anchor': 'bottomview_fec_view_top', align: VerticalAlign.Bottom }
      })
    }
    .backgroundColor(Color.White)
    .id("bottomview_fec_view")
    .width('100%')
    .height(150)
    .alignRules({
      bottom: { 'anchor': 'bottom_view', align: VerticalAlign.Bottom }
    })
  }
}