import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:huixiang/retrofit/data/article.dart';
import 'package:huixiang/retrofit/data/base_data.dart';
import 'package:huixiang/retrofit/retrofit_api.dart';
import 'package:huixiang/utils/flutter_utils.dart';
import 'package:huixiang/utils/font_weight.dart';
import 'package:huixiang/view_widget/custom_image.dart';
import 'package:huixiang/view_widget/icon_text.dart';
import 'package:huixiang/view_widget/round_button.dart';
import 'package:shared_preferences/shared_preferences.dart';

class HotArticleItem extends StatefulWidget {
  final Article article;
  final bool isHot;

  HotArticleItem({this.article, this.isHot});
  @override
  State<StatefulWidget> createState() {
    return _HotArticleItem();
  }
}

class _HotArticleItem extends State<HotArticleItem> {
  ApiService apiService;

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

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

  ///关注/取关会员
  _vipFollow(followId) async {
    BaseData baseData = await apiService.follow(followId);
    if (baseData != null && baseData.isSuccess) {
      SmartDialog.showToast("关注成功");
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        click();
      },
      child: hotItem(context),
    );
  }

  click() async {
    await Navigator.of(context).pushNamed('/router/web_page',
        arguments: {"articleId": widget.article.id});
    widget.article.viewers = (widget.article.viewers + 1);
    setState(() {});
  }


  Widget hotItem(BuildContext context) {
    return Container(
      padding: EdgeInsets.all((widget.isHot == null || !widget.isHot) ? 4 : 0),
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withAlpha(12),
            offset: Offset(0, 3),
            blurRadius: 14,
            spreadRadius: 0,
          )
        ],
        borderRadius: BorderRadius.circular(4),
      ),
      child: (widget.isHot == null || !widget.isHot)
          ?  Column(
        children: [
          // Row(
          //   mainAxisAlignment: MainAxisAlignment.spaceBetween,
          //   crossAxisAlignment: CrossAxisAlignment.center,
          //   children: [
          //     Container(
          //       margin: EdgeInsets.only(left: 5),
          //       child: Row(
          //         children: [
          //           MImage(
          //             (widget.article != null &&
          //                 widget.article.author != null)
          //                 ? widget.article.author.avatar
          //                 : "",
          //             width: 44,
          //             height: 44,
          //             isCircle: true,
          //             fit: BoxFit.cover,
          //             errorSrc: "assets/image/default_1.png",
          //             fadeSrc: "assets/image/default_1.png",
          //           ),
          //           SizedBox(
          //             width: 8,
          //           ),
          //           Column(
          //             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          //             crossAxisAlignment: CrossAxisAlignment.start,
          //             children: [
          //               Text(
          //                 (widget.article != null &&
          //                     widget.article.author != null)
          //                     ? widget.article.author.name
          //                     : "",
          //                 style: TextStyle(
          //                   fontSize: 14.sp,
          //                   fontWeight: MyFontWeight.medium,
          //                   color: Color(0xFF1A1A1A),
          //                 ),
          //               ),
          //               Text(
          //                 widget.article != null
          //                     ? (widget.article.createTime.split(" ")[0])
          //                     : "",
          //                 style: TextStyle(
          //                   fontSize: 12.sp,
          //                   fontWeight: MyFontWeight.regular,
          //                   color: Color(0xFF808080),
          //                 ),
          //               ),
          //             ],
          //           ),
          //         ],
          //       ),
          //     ),
          //     GestureDetector(
          //       onTap: (){
          //         setState(() {
          //           widget.article.isFollow = !(widget.article.isFollow??false);
          //           _vipFollow(widget.article.updateUser);
          //         });
          //       },
          //       child: RoundButton(
          //         padding: EdgeInsets.symmetric(
          //           horizontal: 8,
          //           vertical: 3,
          //         ),
          //         backgroup: (widget.article.isFollow??false) ? Color(0xFFE6E6E6) : Color(0xFF32A060),
          //         textColor: (widget.article.isFollow??false) ? Color(0xFF808080):Colors.white ,
          //         text:(widget.article.isFollow??false) ? "已关注":"关注",
          //         radius: 20,
          //         icons:  Icon(
          //           (widget.article.isFollow??false) ? Icons.check: Icons.add,
          //           color:(widget.article.isFollow??false) ? Color(0xFF808080):Colors.white ,
          //           size: 14,
          //         ),
          //       ),
          //     ),
          //   ],
          // ),
          Expanded(child:Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(height: 5.h),
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(left: 12.w),
                  child: articleTextTow(context),
                ),
              ),
              SizedBox(width: 12.w,),
              Expanded(child:   Visibility(
                visible: widget.article != null &&
                    widget.article.coverImg != null &&
                    widget.article.coverImg != "",
                child:Stack(
                  alignment: Alignment.center,
                  children: [
                    Image.network(
                      widget.article?.coverImg ?? "",
                      fit: BoxFit.fill,
                      height: double.infinity,
                    ),
                    Visibility(
                      visible: ((widget.article?.coverImg??"").endsWith(".mp4")),
                      child: Icon(
                        Icons.play_circle_outline,
                        size: 24,
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
              ),),

              SizedBox(width:5.w,),
            ],
          )),
          SizedBox(height: 10.h,)
        ],
      )
          : Column(
              children: articleContent(context),
            ),
    );
  }

  Widget articleText(context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            (widget.isHot == null || !widget.isHot)
                ? Text(
                    widget.article != null ? widget.article.mainTitle : "",
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontWeight: MyFontWeight.medium,
                      fontSize: 14.sp,
                      color: Colors.black,
                    ),
                  )
                : Row(
                    children: [
                      RoundButton(
                        text: "HOT",
                        textColor: Colors.white,
                        backgroup: Color(0xFFFF441A),
                        radius: 2,
                        fontSize: 10.sp,
                        fontWeight: MyFontWeight.medium,
                        padding: EdgeInsets.all(2),
                      ),
                      SizedBox(
                        width: 6.w,
                      ),
                      Expanded(
                        child: Text(
                          widget.article != null
                              ? widget.article.mainTitle
                              : "",
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            fontWeight: MyFontWeight.medium,
                            fontSize: 14.sp,
                            color: Colors.black,
                          ),
                        ),
                        flex: 1,
                      ),
                    ],
                  ),
            SizedBox(
              height: 4.h,
            ),
            Text(
              widget.article != null ? (widget.article.viceTitle ?? "") : "",
              maxLines: AppUtils.textScale(context) > 1.05 ? 1 : 2,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 12.sp,
                fontWeight: MyFontWeight.regular,
                color: Color(0xFF353535),
              ),
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    // S.of(context).zuozhe(),
                    (widget.article != null &&
                    widget.article.author != null)
                    ? widget.article.author.name
                        : "",
                    style: TextStyle(
                      fontSize: 12.sp,
                      fontWeight: MyFontWeight.medium,
                      color: Color(0xFF1A1A1A),
                    ),
                  ),
                  SizedBox(
                    width: 14.w,
                  ),
                  Container(
                    alignment: Alignment.topRight,
                    child: Row(
                      children: [
                        Image.asset(
                          "assets/image/browse.png",
                          width: 16.w,
                          height: 16.h,
                        ),
                        Text(
                          (widget.article != null)
                              ? "${widget.article.viewers}"
                              : "",
                          style: TextStyle(
                            fontSize: 12.sp,
                            color: Color(0xFF1A1A1A),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    width: 14.w,
                  ),
                  Container(
                    alignment: Alignment.topRight,
                    child: Row(
                      children: [
                        Image.asset(
                          "assets/image/leaving_message.png",
                          width: 16.w,
                          height: 16.h,
                        ),
                        Text(
                          (widget.article != null)
                              ? "${widget.article.comments}"
                              : "",
                          style: TextStyle(
                            fontSize: 12.sp,
                            color: Color(0xFF1A1A1A),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    width: 14.w,
                  ),
                  Container(
                    alignment: Alignment.topRight,
                    child: Row(
                      children: [
                        Image.asset(
                          "assets/image/follow.png",
                          width: 16.w,
                          height: 16.h,
                        ),
                        Text(
                          (widget.article != null)
                              ? "${widget.article.likes}"
                              : "",
                          style: TextStyle(
                            fontSize: 12.sp,
                            color: Color(0xFF1A1A1A),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              flex: 1,
            ),
            // if (widget.isHot != null && widget.isHot)
              IconText(
                widget.article != null
                    ? (widget.article.createTime.split(" ")[0])
                    : "",
                textStyle: TextStyle(
                  fontSize: 12.sp,
                  fontWeight: MyFontWeight.regular,
                  color: Color(0xFFB2B2B2),
                ),
                // leftIcon: Icons.access_time_rounded,
                iconSize: 10,
                iconColor: Color(0xFFB2B2B2),
              ),
          ],
        ),
      ],
    );
  }

  Widget articleTextTow(context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            (widget.isHot == null || !widget.isHot)
                ? Text(
              widget.article != null ? widget.article.mainTitle : "",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontWeight: MyFontWeight.medium,
                fontSize: 14.sp,
                color: Colors.black,
              ),
            )
                : Row(
              children: [
                RoundButton(
                  text: "HOT",
                  textColor: Colors.white,
                  backgroup: Color(0xFFFF441A),
                  radius: 2,
                  fontSize: 10.sp,
                  fontWeight: MyFontWeight.medium,
                  padding: EdgeInsets.all(2),
                ),
                SizedBox(
                  width: 6.w,
                ),
                Expanded(
                  child: Text(
                    widget.article != null
                        ? widget.article.mainTitle
                        : "",
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontWeight: MyFontWeight.medium,
                      fontSize: 14.sp,
                      color: Colors.black,
                    ),
                  ),
                  flex: 1,
                ),
              ],
            ),
            SizedBox(
              height: 4.h,
            ),
            Text(
              widget.article != null ? (widget.article.viceTitle ?? "") : "",
              maxLines: AppUtils.textScale(context) > 1.05 ? 1 : 2,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 12.sp,
                fontWeight: MyFontWeight.regular,
                color: Color(0xFF353535),
              ),
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    alignment: Alignment.topRight,
                    child: Row(
                      children: [
                        Image.asset(
                          "assets/image/browse.png",
                          width: 16.w,
                          height: 16.h,
                        ),
                        Text(
                          (widget.article != null)
                              ? "${widget.article.viewers}"
                              : "",
                          style: TextStyle(
                            fontSize: 12.sp,
                            color: Color(0xFF1A1A1A),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    width:22.w,
                  ),
                  Container(
                    alignment: Alignment.topRight,
                    child: Row(
                      children: [
                        Image.asset(
                          "assets/image/leaving_message.png",
                          width: 16.w,
                          height: 16.h,
                        ),
                        Text(
                          (widget.article != null)
                              ? "${widget.article.comments}"
                              : "",
                          style: TextStyle(
                            fontSize: 12.sp,
                            color: Color(0xFF1A1A1A),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    width:22.w,
                  ),
                  Container(
                    alignment: Alignment.topRight,
                    child: Row(
                      children: [
                        Image.asset(
                          "assets/image/follow.png",
                          width: 16.w,
                          height: 16.h,
                        ),
                        Text(
                          (widget.article != null)
                              ? "${widget.article.likes}"
                              : "",
                          style: TextStyle(
                            fontSize: 12.sp,
                            color: Color(0xFF1A1A1A),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              flex: 1,
            ),
          ],
        ),
      ],
    );
  }

  List<Widget> articleContent(context) {
    return [
      Expanded(
        child: Visibility(
          visible: widget.article != null &&
              widget.article.coverImg != null &&
              widget.article.coverImg != "",
          child: Stack(
            alignment: Alignment.center,
            children: [
              Positioned(
                child: MImage(
                  widget.article != null ? widget.article.coverImg : "",
                  fit: BoxFit.cover,
                  radius: BorderRadius.vertical(top: Radius.circular(4)),
                  width: MediaQuery.of(context).size.width - 32.w,
                  height: 150.h,
                ),
                top: 0,
                bottom: 0,
                right: 0,
                left: 0,
              ),
              Positioned(
                child: Visibility(
                  visible: (widget.article != null &&
                      widget.article.coverImg != null &&
                      widget.article.coverImg != "" &&
                      widget.article.coverImg.endsWith(".mp4")),
                  child: Center(
                    child: Icon(
                      Icons.play_circle_outline,
                      size: 24,
                      color: Colors.white,
                    ),
                  ),
                ),
                top: 0,
                bottom: 0,
                right: 0,
                left: 0,
              ),
            ],
          ),
        ),
        flex: 150,
      ),
      Expanded(
        flex: 97,
        child: Container(
          child: articleText(context),
          padding: EdgeInsets.all(8),
        ),
      ),
    ];
  }
}