import 'package:chewie/chewie.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class VideoPlaybackPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _VideoPlaybackPage();
  }
}

class _VideoPlaybackPage extends State<VideoPlaybackPage> {
  var controller = new ScrollController();
  VideoPlayerController videoPlayerController;
  ChewieController chewieController;

  @override
  void initState() {
    super.initState();
//    player.setDataSource(
//        "https://www.xxx/test.mp4",
//        autoPlay: false);
    //配置视频地址
    videoPlayerController = VideoPlayerController.network(
        'https://www.runoob.com/try/demo_source/movie.mp4');
    chewieController = ChewieController(
      videoPlayerController: videoPlayerController,
      aspectRatio: 3 / 2,
      //宽高比
      autoPlay: !true,
      //自动播放
      looping: true,
      //循环播放
      // 拖动条样式颜色
      materialProgressColors: ChewieProgressColors(
        playedColor: Colors.white,
        handleColor: Colors.white,
        backgroundColor: Colors.grey,
        bufferedColor: Colors.transparent,
      ),
    );
  }

  @override
  void dispose() {
    /**
     * 页面销毁时,视频播放器也销毁
     */
    videoPlayerController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: SingleChildScrollView(
          physics: BouncingScrollPhysics(),
          child: Column(
            children: [
              Stack(
                children: [
                  Container(
                    height: 274.h,
                    child: Chewie(
                      controller: chewieController,
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 40.h, left: 16.w, right: 16.w),
                    decoration: BoxDecoration(
                      color: Colors.transparent,
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        GestureDetector(
                          child: Icon(
                            Icons.arrow_back_ios,
                            color: Colors.white,
                            size: 24,
                          ),
                          onTap: () {
                            Navigator.of(context).pop();
                          },
                        ),
                        Image.asset(
                          "assets/image/icon_share_w.png",
                          width: 24.w,
                          height: 24.h,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              Container(
                margin: EdgeInsets.only(bottom: 20.h),
                padding: EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withAlpha(12),
                      offset: Offset(0, 2),
                      blurRadius: 14,
                      spreadRadius: 0,
                    )
                  ],
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        ClipOval(
                          child: Image.network(
                            "https://t7.baidu.com/it/u=2841334870,333581502&fm=193&f=GIF",
                            fit: BoxFit.cover,
                            width: 44.w,
                            height: 44.h,
                          ),
                          clipBehavior: Clip.hardEdge,
                        ),
                        SizedBox(
                          width: 8.w,
                        ),
                        Expanded(
                          child: Container(
                            height: 60.h,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text.rich(
                                  TextSpan(children: [
                                    TextSpan(
                                      text: "百花谷",
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold,
                                          fontSize: 14.sp,
                                          color: Colors.black),
                                    ),
                                  ]),
                                  textDirection: TextDirection.ltr,
                                ),
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    Text(
                                      "2021.04.12 12:12",
                                      overflow: TextOverflow.ellipsis,
                                      maxLines: 2,
                                      style: TextStyle(
                                        fontSize: 12.sp,
                                        color: Color(0xff808080),
                                      ),
                                    ),
                                    Text(
                                      "播放次数 56",
                                      overflow: TextOverflow.ellipsis,
                                      maxLines: 2,
                                      style: TextStyle(
                                        fontSize: 12.sp,
                                        color: Color(0xff808080),
                                      ),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ),
                          flex: 1,
                        )
                      ],
                    ),
                    SizedBox(
                      height: 20.h,
                    ),
                    Text("牡丹花的养护知识",
                        style: TextStyle(
                            fontSize: 24.sp,
                            fontWeight: FontWeight.bold,
                            color: Color(0xff1A1A1A))),
                  ],
                ),
              ),
              Container(
                // margin: EdgeInsets.only(bottom: 20),
                // padding: EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black.withAlpha(12),
                        offset: Offset(0, 2),
                        blurRadius: 14,
                        spreadRadius: 0)
                  ],
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: EdgeInsets.all(16),
                      child: Text("评论 (58)  喜欢 (58)",
                          style: TextStyle(
                              fontSize: 16.sp,
                              fontWeight: FontWeight.bold,
                              color: Color(0xff1A1A1A))),
                    ),
                    SizedBox(
                      height: 500.h,
                      child: ListView.builder(
                        itemCount: 6,
                        scrollDirection: Axis.vertical,
                        physics: BouncingScrollPhysics(),
                        itemBuilder: (context, position) {
                          return _commentItem(position);
                        },
                      ),
                    ),
                    // _commentItem()
                  ],
                ),
              ),
              SizedBox(
                height: 12.h,
              ),
              Container(
                padding: EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black.withAlpha(12),
                        offset: Offset(0, 2),
                        blurRadius: 14,
                        spreadRadius: 0)
                  ],
                  borderRadius: new BorderRadius.only(
                    topLeft: Radius.circular(8.0),
                    topRight: Radius.circular(8.0),
                  ),
                ),
                child: Row(
                  children: [
                    Expanded(
                      flex: 1,
                      child: Container(
                        decoration: new BoxDecoration(
                            color: Color(0xffF2F2F2),
                            borderRadius: BorderRadius.circular(2.0)),
                        child: Column(
                          children: [
                            Container(
                              margin: const EdgeInsets.fromLTRB(4, 0, 4, 0),
                              alignment: Alignment.topLeft,
                              child: TextField(
                                maxLines: 8,
                                minLines: 1,
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  hintText: "留下您精彩的评论吧~",
                                  hintStyle: TextStyle(
                                    fontSize: 14.sp,
                                    color: Color(0xffCDCCCC),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: 20.w, right: 20.w),
                      child: Text(
                        "发送",
                        style: TextStyle(
                            fontSize: 16.sp,
                            fontWeight: FontWeight.bold,
                            color: Color(0XFF1A1A1A)),
                      ),
                    ),
                    Image.asset("assets/image/icon_like_h.png")
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _commentItem(var position) {
    return Container(
      child: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                ClipOval(
                  child: Image.network(
                    "https://t7.baidu.com/it/u=2841334870,333581502&fm=193&f=GIF",
                    fit: BoxFit.cover,
                    width: 40.w,
                    height: 40.h,
                  ),
                  clipBehavior: Clip.hardEdge,
                ),
                SizedBox(
                  width: 12.w,
                ),
                Expanded(
                  child: Container(
                    height: 60,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text.rich(
                          TextSpan(children: [
                            TextSpan(
                              text: "张三",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  fontSize: 14.sp,
                                  color: Colors.black),
                            ),
                          ]),
                          textDirection: TextDirection.ltr,
                        ),
                        Text(
                          "2021.04.12 12:12",
                          overflow: TextOverflow.ellipsis,
                          maxLines: 2,
                          style: TextStyle(
                            fontSize: 12.sp,
                            color: Color(0xff808080),
                          ),
                        ),
                      ],
                    ),
                  ),
                  flex: 1,
                ),
                Container(
                  alignment: Alignment.topRight,
                  child: Row(
                    children: [
                      Image.asset(
                        "assets/image/icon_like.png",
                        width: 16.w,
                        height: 16.h,
                      ),
                      Text(
                        "58",
                        style:
                            TextStyle(fontSize: 12.sp, color: Color(0xff1A1A1A)),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(left: 68.w, right: 16.w),
            child: Text(
              "文本,是指书面语言的表现形式,从文学角度说,通常是具有完整、系统含义(Mess…",
              style: TextStyle(fontSize: 14.sp, color: Color(0xff1A1A1A)),
            ),
          ),
          SizedBox(
            height: 12.h,
          ),
          Container(
            width: double.infinity,
            margin: EdgeInsets.only(left: 68.w, right: 16.w),
            decoration: new BoxDecoration(
              color: Color(0xffF2F2F2),
              borderRadius: BorderRadius.circular(2.0),
            ),
            child: Padding(
              padding: EdgeInsets.only(left: 4.w, top: 4.h, bottom: 4.h),
              child: Text(
                "文本,是指书面语言的表现形式文本,是指、",
                style: TextStyle(fontSize: 12.sp, color: Color(0xff808080)),
              ),
            ),
          ),
          if (position == 5)
            Container(
              height: 63.h,
              decoration: BoxDecoration(
                color: Color(0xffF2F2F2),
                boxShadow: [
                  BoxShadow(
                      color: Colors.black.withAlpha(12),
                      offset: Offset(0, 2),
                      blurRadius: 14,
                      spreadRadius: 0)
                ],
              ),
              margin: EdgeInsets.only(top: 30.h),
              alignment: Alignment.center,
              child: Text(
                "-已显示全部评论-",
                style: TextStyle(fontSize: 14.sp, color: Color(0xff353535)),
              ),
            ),
        ],
      ),
    );
  }
}