import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/retrofit/data/article.dart';
import 'package:huixiang/retrofit/data/banner.dart';
import 'package:huixiang/retrofit/data/base_data.dart';
import 'package:huixiang/retrofit/data/page.dart';
import 'package:huixiang/retrofit/retrofit_api.dart';
import 'package:huixiang/utils/font_weight.dart';
import 'package:huixiang/view_widget/classic_header.dart';
import 'package:huixiang/view_widget/custom_image.dart';
import 'package:huixiang/view_widget/hot_item.dart';
import 'package:huixiang/view_widget/my_appbar.dart';
import 'package:huixiang/view_widget/my_footer.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class ArticleList extends StatefulWidget {
  final List<Article> articles;

  ArticleList(
    this.articles,
  );

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

class _ArticleList extends State<ArticleList> {
  ApiService apiService;
  int pageNum = 0;

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

    SharedPreferences.getInstance().then((value) => {
          apiService = ApiService(Dio(),
              context: context, token: value.getString("token")),
        });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.only(top: 20, left: 16, right: 16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Padding(
                padding: EdgeInsets.only(bottom: 12),
                child: Text(
                  "最新文章",
                  overflow: TextOverflow.ellipsis,
                  maxLines: 2,
                  style: TextStyle(
                    fontSize: 15.sp,
                    fontWeight: MyFontWeight.semi_bold,
                    color: Colors.black,
                  ),
                )),
            ListView.builder(
              padding: EdgeInsets.zero,
              itemCount: widget.articles.length,
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              itemBuilder: (context, position) {
                return GestureDetector(
                  onTap: () {
                    Navigator.of(context).pushNamed('/router/web_page',
                        arguments: {"articleId": widget.articles[position].id});
                    widget.articles[position].viewers =
                        (widget.articles[position].viewers + 1);
                    setState(() {});
                  },
                  child: articleItem(widget.articles[position], position),
                );
              },
            ),
          ],
        ));
  }

  Widget articleItem(Article articles, position) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.all(16),
      margin: EdgeInsets.only(bottom: 12),
      color: Colors.white,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Expanded(
              child: Container(
            height: 96,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text(
                  widget?.articles[position]?.mainTitle ?? "",
                  overflow: TextOverflow.ellipsis,
                  maxLines: 2,
                  style: TextStyle(
                    fontSize: 14.sp,
                    fontWeight: MyFontWeight.semi_bold,
                    color: Colors.black,
                  ),
                ),
                Text(
                  widget?.articles[position]?.viceTitle ?? "",
                  overflow: TextOverflow.ellipsis,
                  maxLines: 3,
                  style: TextStyle(
                    fontSize: 12.sp,
                    fontWeight: MyFontWeight.regular,
                    color: Color(0xFF353535),
                  ),
                ),
                // SizedBox(height: 20),
                Row(
                  children: [
                    Expanded(
                      child: Text(
                        widget.articles != null
                            ? widget.articles[position]?.author?.name ?? ""
                            : "",
                        overflow: TextOverflow.ellipsis,
                        maxLines: 1,
                        style: TextStyle(
                          fontSize: 12.sp,
                          fontWeight: MyFontWeight.medium,
                          color: Color(0xFF8E8E8E),
                        ),
                      ),
                    ),
                    SizedBox(width: 8),
                    Image.asset(
                      "assets/image/browse.png",
                      width: 14,
                      height: 14,
                      color: Color(0xFF808080),
                    ),
                    Expanded(
                        child: Text(
                      "${widget?.articles[position]?.viewers}" ?? "",
                      style: TextStyle(
                        fontSize: 12.sp,
                        fontWeight: MyFontWeight.regular,
                        color: Color(0xFF8D8D8D),
                      ),
                    )),
                    Text(
                      widget?.articles[position]?.createTime?.split(" ")[0] ??
                          "",
                      style: TextStyle(
                        fontSize: 12.sp,
                        fontWeight: MyFontWeight.regular,
                        color: Color(0xFF8D8D8D),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          )),
          SizedBox(width: 12),
          MImage(
            widget?.articles[position]?.coverImg ?? "",
            fit: BoxFit.cover,
            radius: BorderRadius.all(Radius.circular(2)),
            width: 96,
            height: 96,
          ),
        ],
      ),
    );
  }
}