import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../utils/color_util.dart';
import 'meeting_main_video_logic.dart';
import 'meeting_main_video_state.dart';

class MeetingMainVideoComponent extends StatelessWidget {
  MeetingMainVideoComponent({Key? key}) : super(key: key);

  final MeetingMainVideoLogic logic = Get.put(MeetingMainVideoLogic());
  final MeetingMainVideoState state = Get.find<MeetingMainVideoLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        PageView(
          scrollDirection: Axis.horizontal,
          reverse: false,
          controller: PageController(
            initialPage: 0,
            viewportFraction: 1,
            keepPage: true,
          ),
          physics: const BouncingScrollPhysics(),
          pageSnapping: true,
          onPageChanged: (index) {
            // 监听事件
            print('index=====$index');
          },
          children: <Widget>[
            Container(
              child: Stack(
                alignment: Alignment.center,
                children: [
                  Container(
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          fit: BoxFit.fill,
                          image: NetworkImage(
                            "https://tse4-mm.cn.bing.net/th/id/OIP-C.acWMNnQ04Ks6Bh2b9Zq8XwHaKF?rs=1&pid=ImgDetMain",
                          ),
                        ),
                      )),
                  Positioned(
                    bottom: 110,
                    child: Image.asset(
                      'assets/images/meeting_main_hang_up.png',
                      width: 50.w,
                      height: 50.h,
                    ),
                  ),
                  Positioned(
                    top: 16,
                    right: 16,
                    child: Container(
                      height: 30,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(8),
                          color: ColorUtil.Color_0_0_0_96),
                      padding: const EdgeInsets.only(left: 12, right: 12),
                      child: Row(
                        children: [
                          Text(
                            '正在讲话：',
                            style: TextStyle(
                                fontSize: 10.sp,
                                color: ColorUtil.Color_185_184_184),
                          ),
                          Image.asset(
                            'assets/images/meeting_main_speak2.png',
                            width: 20.w,
                            height: 20.h,
                          ),
                          Text(
                            '晓晓',
                            style: TextStyle(
                                fontSize: 10.sp,
                                color: ColorUtil.Color_185_184_184),
                          )
                        ],
                      ),
                    ),
                  ),
                  Positioned(
                    top: 58,
                    right: 13,
                    child: Stack(
                      children: [
                        Container(
                            width: 120.w,
                            height: 150.h,
                            padding: const EdgeInsets.only(left: 12, right: 12),
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                fit: BoxFit.fill,
                                image: NetworkImage(
                                  "https://tse1-mm.cn.bing.net/th/id/OIP-C.hdhK40Dw3yN_2mjNQNqFCgAAAA?w=186&h=186&c=7&r=0&o=5&pid=1.7",
                                ),
                              ),
                            )
                        ),
                        Positioned(
                          left: 4,
                          bottom: 4,
                          child: Row(
                            children: [
                              Image.asset(
                                'assets/images/meeting_main_own.png',
                                width: 20.w,
                                height: 15.h,
                              ),
                              Container(
                                height: 15,
                                margin: const EdgeInsets.only(left: 4),
                                padding: const EdgeInsets.only(left: 4, right: 4),
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(2),
                                    color: ColorUtil.Color_0_0_0_96),
                                child: Row(
                                  children: [
                                    Image.asset(
                                      'assets/images/meeting_main_microphone_close.png',
                                      width: 13.w,
                                      height: 14.h,
                                    ),
                                    SizedBox(width: 4.w),
                                    Text(
                                      '晓晓',
                                      style: TextStyle(
                                          fontSize: 10.sp,
                                          color: ColorUtil.Color_185_184_184),
                                    )
                                  ],
                                ),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
            Container(
              color: ColorUtil.Color_57_57_57,
              child: GridView.builder(
                  gridDelegate:
                  SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      childAspectRatio: 0.8,
                      crossAxisSpacing: 0),
                  itemCount: 5,
                  itemBuilder: (BuildContext ctx, index) {
                    return Stack(
                      children: [
                        Container(
                            padding: const EdgeInsets.only(left: 12, right: 12),
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                fit: BoxFit.fill,
                                image: NetworkImage(
                                  "https://tse1-mm.cn.bing.net/th/id/OIP-C.hdhK40Dw3yN_2mjNQNqFCgAAAA?w=186&h=186&c=7&r=0&o=5&pid=1.7",
                                ),
                              ),
                            )
                        ),
                        Positioned(
                          left: 4,
                          bottom: 4,
                          child: Row(
                            children: [
                              Image.asset(
                                'assets/images/meeting_main_own.png',
                                width: 20.w,
                                height: 15.h,
                              ),
                              Container(
                                height: 15,
                                margin: const EdgeInsets.only(left: 4),
                                padding: const EdgeInsets.only(left: 4, right: 4),
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(2),
                                    color: ColorUtil.Color_0_0_0_96),
                                child: Row(
                                  children: [
                                    Image.asset(
                                      'assets/images/meeting_main_microphone_close.png',
                                      width: 13.w,
                                      height: 14.h,
                                    ),
                                    SizedBox(width: 4.w),
                                    Text(
                                      '晓晓',
                                      style: TextStyle(
                                          fontSize: 10.sp,
                                          color: ColorUtil.Color_185_184_184),
                                    )
                                  ],
                                ),
                              )
                            ],
                          ),
                        )
                      ],
                    );
                  }),
            ),
          ],
        ),
        Positioned(
          bottom: 16,
          child: Row(
            children: [
              Container(
                width: 8.w,
                height: 8.h,
                margin: const EdgeInsets.only(right: 6),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    color: ColorUtil.Color_255_255_255),
              ),
              Container(
                width: 8.w,
                height: 8.h,
                margin: const EdgeInsets.only(left: 6),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    color: ColorUtil.Color_108_108_108),
              )
            ],
          ),
        ),
      ],
    );
  }

  @override
  void dispose() {
    Get.delete<MeetingMainVideoLogic>();
  }
}