skywood/lib/pages/like/pages/play_log_page.dart

import 'package:flutter/material.dart';
import 'package:skywood/global/client/play_client.dart';
import 'package:skywood/main/lib_file.dart';
import 'package:skywood/pages/home/players/page/drama_detail_page.dart';
import 'package:skywood/utils/models/drama/skywood_drama.dart';
import 'package:skywood/utils/tools/widgets/sky_common_widget.dart';

import '../../../utils/tools/app_toast.dart';
import '../widget/no_data_view.dart';

class PlayLogPage extends StatefulWidget {

  const PlayLogPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _CollectionPageState();
  }
}

class _CollectionPageState extends State<PlayLogPage> {

  List<SkywoodDrama> _historyList = [];
  bool _isLoading = false;

  @override
  void initState() {
    super.initState();
    _getHistory();
  }

  void _getHistory() {
    _isLoading = true;
    AppToast.showLottieLoading();
    PlayClient.getHistory().then((value) {
      _isLoading = false;
      AppToast.dismiss();
      setState(() {
        _historyList = value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return !_isLoading&&_historyList.isEmpty ? NoDataView() : ListView.separated(
      padding: const EdgeInsets.only(top: 20, left: 12, right: 12),
      itemCount: _historyList.length,
      itemBuilder: (context, index) {
        final item = _historyList[index];
        return index == 0 ? _buildFirstItem(item) : _buildNormalItem(item);
      },
      separatorBuilder: (context, index) {
        return SizedBox(height: 5);
      }
    );
  }

  Widget _buildNormalItem(SkywoodDrama item) {
    return Stack(
      children: [
        HelpImg.asset(ConstImg.playlogBg, width: double.infinity, height: 100, fit: BoxFit.fill),
        Positioned(
          left: 10, top: 5, right: 5, bottom: 5,
          child: Row(
            children: [
              HelpImg.network(item.imageUrl, width: 66, height: 88, fit: BoxFit.fill),
              const SizedBox(width: 10),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const SizedBox(height: 6),
                  Expanded(child: SizedBox(
                    width: 192.w,
                    child: SkyText(text: item.name,
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                      color: CommonColor.black,
                      maxLines: 2,
                    ),
                  )),
                  SkyText(text: 'EP.${item.currentEpisode} / ${item.episodeTotal}',
                    fontSize: 11,
                    color: CommonColor.primacyColor,
                  ),
                  const SizedBox(height: 5),
                  _ProgressLine(value: (item.currentEpisode ?? 1) / item.episodeTotal, width: 150,),
                  const SizedBox(height: 10),
                ],
              )
            ],
          ),
        )
      ],
    ).addInkWell(onTap: () {
      HelpNav.to(DramaDetailPage(dramaBean: item));
    });
  }

  Widget _buildFirstItem(SkywoodDrama item) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildFirstCard(item),
        const SizedBox(height: 20),
        if (_historyList.length > 1)
          SkyText(text: 'Watch History',
            color: CommonColor.black,
            fontSize: 16,
            fontWeight: FontWeight.bold,
          )
      ],
    );
  }

  Widget _buildFirstCard(SkywoodDrama item) {
    return Stack(
      children: [
        HelpImg.asset(ConstImg.playlogBg, width: 297.w, height: 140, fit: BoxFit.fill),
        Positioned(
          left: 10, top: 5, right: 5, bottom: 5,
          child: Row(
            children: [
              HelpImg.network(item.imageUrl, width: 90, height: 120, fit: BoxFit.fill),
              const SizedBox(width: 10),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const SizedBox(height: 6),
                  Expanded(child: SizedBox(
                    width: 170.w,
                    child: SkyText(text: item.name,
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                      color: CommonColor.black,
                      maxLines: 2,
                    ),
                  )),
                  SkyText(text: 'Chapter ${item.currentEpisode} / ${item.episodeTotal}',
                    fontSize: 11,
                    color: CommonColor.primacyColor,
                  ),
                  const SizedBox(height: 5),
                  _ProgressLine(value: (item.currentEpisode ?? 1) / item.episodeTotal, width: 150,),
                  const SizedBox(height: 10),
                  HelpImg.asset(ConstImg.continueWatch, width: 144, height: 30).addInkWell(
                    onTap: () {
                      HelpNav.to(DramaDetailPage(dramaBean: item));
                    }
                  ),
                  const SizedBox(height: 8),
                ],
              )
            ],
          ),
        )
      ],
    );
  }

}


class _ProgressLine extends StatelessWidget {
  const _ProgressLine({
    required this.value,
    this.width = 140,
  });

  final double value;
  final double width;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      child: Row(
        children: [
          Expanded(
            child: Container(
              height: 6.h,
              decoration: BoxDecoration(
                color: Colors.white.withValues(alpha: 0.7),
                border: Border.all(color: const Color(0xFF1C1E1F), width: 0.5.w),
                borderRadius: BorderRadius.circular(10.r),
              ),
              alignment: Alignment.centerLeft,
              child: FractionallySizedBox(
                widthFactor: value,
                child: Container(
                  decoration: BoxDecoration(
                    color: const Color(0xFF00EE02),
                    borderRadius: BorderRadius.circular(10.r),
                  ),
                ),
              ),
            ),
          ),
          SizedBox(width: 4.w),
          Text('${(value * 100.0).toInt()}%', style: TextStyle(fontSize: 10.sp, height: 1)),
        ],
      ),
    );
  }
}