FamilyBook_harmonyos/entry/src/main/ets/pages/movies/FbMoviesPage.ets

/**
 * 家书 FamilyBook · 观影模块（鸿蒙端）
 *
 * 对应 Web 端 `templates/movies/index.php`。Web 端是**海报墙**（waterfall 瀑布流），
 * 端上改成**两列网格**：手机宽度下两列海报刚好一屏看清 4–6 部，
 * 比瀑布流（列宽随图片高度浮动）更整齐、也更好点。
 *
 * 页头右侧两个入口：搜索、设置（影院管理 / 统计 / 年度报告 —— 与 Web 端一致，
 * 「影院」不单独占抽屉位置，它是观影模块的一部分）。
 */

import { FbColors, FbMetric, fbPalette } from '../../common/Theme';
import { FbAppState, fbAppState } from '../../common/Store';
import { FbMovieItem, FbKinChip } from '../../model/Types';
import { FB_DEMO_CINEMAS, FB_DEMO_MOVIES } from '../../model/DemoData';
import { FbDot, FbEmptyBox, FbIconButton, FbPersonChip, FbPrimaryButton, FbRating, FbSectionTitle } from '../../components/Widgets';

@ComponentV2
export struct FbMoviesPage {
  @Param app: FbAppState = fbAppState();
  /**
   * 顶栏插槽：由 Index.ets 传入，放在本页滚动流最前面 ⇒ 随页面一起滚走。
   * 🔴 用户要求「向上滑动时标题栏跟着一起滑走」。
   */
  @BuilderParam topBar: () => void;

  private movies: FbMovieItem[] = FB_DEMO_MOVIES;
  private cinemas: string[] = FB_DEMO_CINEMAS;
  /** 模块主题色（观影 = 紫） */
  private accent: string = '#7A4E8C';

  build() {
    Scroll() {
      Column() {
        this.topBar()

        // ---- 页头：标题 + 记一场电影 + 设置 ----
        Row({ space: 8 }) {
          Column({ space: 2 }) {
            Text('观影记录')
              .fontSize(FbMetric.fontTitle)
              .fontWeight(FontWeight.Medium)
              .fontColor(FbColors.ink)
            Text('共 ' + this.movies.length.toString() + ' 部 · 按观影时间排序')
              .fontSize(FbMetric.fontTiny)
              .fontColor(FbColors.faint)
          }
          .alignItems(HorizontalAlign.Start)
          .layoutWeight(1)

          FbPrimaryButton({
            label: '记一场',
            bg: this.accent,
            icon: $r('app.media.fb_ic_plus')
          })
          // 「影院」不单独占抽屉位置 —— 它是观影模块的一部分，从这里进
          FbIconButton({
            icon: $r('app.media.fb_ic_gear'),
            tint: FbColors.muted,
            dia: 36
          })
        }
        .width('100%')
        .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 })
        .alignItems(VerticalAlign.Center)

        // ---- 搜索条 ----
        Row({ space: 6 }) {
          Image($r('app.media.fb_ic_search'))
            .width(15)
            .height(15)
            .renderMode(ImageRenderMode.Template)
            .fillColor(FbColors.faint)
          Text('搜索片名、影院、观影人…')
            .fontSize(FbMetric.fontSmall)
            .fontColor(FbColors.faint)
            .layoutWeight(1)
            .maxLines(1)
        }
        .height(36)
        .padding({ left: 12, right: 12 })
        .backgroundColor(FbColors.inputBg)
        .borderRadius(FbMetric.radiusS)
        .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 4 })
        .alignItems(VerticalAlign.Center)

        // ---- 影院数提示 ----
        Row({ space: 6 }) {
          Blank()
          Text('影院 ' + this.cinemas.length.toString() + ' 家')
            .fontSize(FbMetric.fontTiny)
            .fontColor(FbColors.faint)
        }
        .width('100%')
        .padding({ left: FbMetric.pagePad + 4, right: FbMetric.pagePad + 4, top: 6, bottom: 6 })

        // ---- 海报网格 ----
        if (this.movies.length === 0) {
          FbEmptyBox({
            title: '还没有观影记录',
            hint: '一家人一起看过的电影，都会以海报墙的方式排在这里',
            icon: $r('app.media.fb_ic_movies')
          })
        } else {
          Grid() {
            ForEach(this.movies, (mv: FbMovieItem) => {
              GridItem() {
                this.movieCard(mv)
              }
            }, (mv: FbMovieItem): string => 'mv_' + mv.id.toString())
          }
          .columnsTemplate('1fr 1fr')
          .columnsGap(12)
          .rowsGap(12)
          .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 24 })
          // ⚠️ 不能给 layoutWeight：本页已整体放进 Scroll，
          //    Column 的高度由内容决定，layoutWeight(1) 会去分"剩余空间"（此时为 0）
          //    ⇒ Grid 高度塌成 0、整页只有顶栏和页头。
          .width('100%')
          .width('100%')
          .scrollBar(BarState.Off)
          .edgeEffect(EdgeEffect.Spring)
        }
      }
      .width('100%')
    }
    .width('100%')
    .height('100%')
    .scrollBar(BarState.Off)
    .edgeEffect(EdgeEffect.Spring)
    .align(Alignment.TopStart)
  }

  /** 一张电影卡：海报位（2:3）+ 片名 + 元信息 + 同看的人 */
  @Builder
  movieCard(mv: FbMovieItem) {
    Column({ space: 0 }) {
      // 海报位：有海报就放图，没有就画占位（Web 端用「影」字占位，端上用图标）
      Stack({ alignContent: Alignment.Center }) {
        if (mv.hasPoster) {
          // TODO(接口)：接上 media.php 的海报地址后换掉这个纯色块
          Column()
            .width('100%')
            .height('100%')
            .linearGradient({
              angle: 145,
              colors: [[fbPalette(this.accent).brand2, 0.0], [fbPalette(this.accent).ink, 1.0]]
            })
        } else {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor(FbColors.inputBg)
        }

        Column({ space: 6 }) {
          Image($r('app.media.fb_ic_movies'))
            .width(mv.hasPoster ? 26 : 22)
            .height(mv.hasPoster ? 26 : 22)
            .renderMode(ImageRenderMode.Template)
            .fillColor(mv.hasPoster ? '#FFFFFFB3' : FbColors.faint)
          if (!mv.hasPoster) {
            Text(mv.title)
              .fontSize(FbMetric.fontSmall)
              .fontColor(FbColors.muted)
              .textAlign(TextAlign.Center)
              .maxLines(3)
              .padding({ left: 10, right: 10 })
          }
        }
      }
      .width('100%')
      .aspectRatio(0.75)
      .clip(true)
      .borderRadius({ topLeft: FbMetric.radius, topRight: FbMetric.radius })

      // 卡片正文
      Column({ space: 5 }) {
        Text(mv.title)
          .fontSize(FbMetric.fontSmall)
          .fontWeight(FontWeight.Medium)
          .fontColor(FbColors.ink)
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })

        Row({ space: 6 }) {
          Text(mv.watchedAt)
            .fontSize(10)
            .fontColor(FbColors.faint)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
        }
        .width('100%')

        if (mv.cinemaName.length > 0) {
          Row({ space: 4 }) {
            FbDot({ dia: 6, fillC: mv.cinemaColor })
            Text(mv.cinemaName)
              .fontSize(10)
              .fontColor(mv.cinemaColor)
              .maxLines(1)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .layoutWeight(1)
          }
          .width('100%')
        }

        Row({ space: 8 }) {
          if (mv.reviewCount > 0) {
            FbRating({ score: mv.rating, max: 10 })
          }
          Blank()
          // 同看的人（只出头像，空间紧）
          Row({ space: 2 }) {
            ForEach(mv.viewers.slice(0, 3), (v: FbKinChip) => {
              FbPersonChip({ name: v.shown, color: v.avatarColor, withText: false })
                .padding({ left: 0, right: 0 })
            }, (v: FbKinChip): string => 'vw_' + mv.id.toString() + '_' + v.id.toString())
          }
        }
        .width('100%')
        .alignItems(VerticalAlign.Center)
      }
      .width('100%')
      .padding(10)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .backgroundColor(FbColors.surface)
    .borderRadius(FbMetric.radius)
    .clip(true)
  }
}