import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:trackoffical_app/utils.dart';
import 'package:trackoffical_app/view/mapto/map_to_controller.dart';
import '../../service/mock.dart';
import '../../widget/page_frame.dart';
import 'user_rank_controller.dart';
import '../../generated/app_api.pb.dart';
import '../../generated/assets.dart';
import '../../screen.dart';
import 'package:trackoffical_app/pb.dart' as pb;

import '../../widget/common.dart';

class UserRankView extends GetView<UserRankController> {
  const UserRankView({super.key});

  static Bindings bindings() {
    return BindingsBuilder(() {
      Get.lazyPut<UserRankController>(() => UserRankController());
    });
  }

  @override
  Widget build(BuildContext context) {
    // final PageTopController c = Get.find();
    return PageFrame(child: _wBody(context));
  }

  Widget _wBody(BuildContext context) {
    return Container(
      // width: 97.01.wp,
      // margin: EdgeInsets.symmetric(vertical: 1.5.wp, horizontal: 1.5.wp),
      padding: EdgeInsets.symmetric(vertical: 1.5.wp, horizontal: 1.5.wp),
      decoration: const BoxDecoration(
          image: DecorationImage(
              alignment: Alignment.bottomCenter,
              image: AssetImage(Assets.commonPageBgDark),
              fit: BoxFit.cover)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Expanded(
            flex: 3,
            child: _wLeft(),
          ),
          // Container(
          //   color: const Color(0xffd8d8d8),
          //   width: 1,
          // ),
          Expanded(
            flex: 7,
            child: _wRight(),
          ),
        ],
      ),
    );
  }

  Widget _wLeft() {
    return Container(
      margin: EdgeInsets.only(right: 0.8.wp),
      child: Column(
        children: [
          _wLeftTitle(),
          SizedBox(height: 1.5.wp),
          _wLeftActivitys(),
        ],
      ),
    );
  }

  Widget _wLeftTitle() {
    return Obx(() {
      int count = controller.mapActivityList.value.list.length;
      return Row(
        children: [
          SizedBox(width: 0.5.wp),
          const Icon(
            Icons.circle,
            size: 16,
            color: Color(0xff98d8ff),
          ),
          const SizedBox(width: 6),
          Text(
            "活动列表 (${count})",
            style: TextStyle(
              color: Colors.white,
              fontSize: 1.39.wp,
              fontWeight: FontWeight.w700,
            ),
            textAlign: TextAlign.start,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ],
      );
    });
  }

  Widget _wLeftActivitys() {
    return Obx(() {
      return Expanded(
          child: Container(
              padding: EdgeInsets.symmetric(horizontal: 1.wp, vertical: 1.2.wp),
              decoration: BoxDecoration(
                color: const Color(0xff003656),
                borderRadius: BorderRadius.circular(0.63.wp),
              ),
              child: ListView.builder(
                  padding: EdgeInsets.only(top: 0.wp),
                  // itemCount: mapActivitySimpleInfo.length,
                  itemCount: controller.mapActivityList.value.list.length,
                  itemBuilder: (ctx, i) {
                    return _wActivityElem(ctx, i);
                  })));
    });
  }

  Widget _wActivityElem(BuildContext ctx, int i) {
    return Obx(() {
      var info = controller.mapActivityList.value.list[i];
      var selectActivityId = controller.selectActivityId;
      var markColor = selectActivityId.value == info.id
          ? const Color(0xffff870d)
          : Color(0xff00a0ff);
      return GestureDetector(
          onTap: () => selectActivityId.value = info.id,
          child: Container(
            height: 4.1.wp,
            margin: EdgeInsets.only(
                left: 0.wp, right: 0.wp, top: 0.wp, bottom: 1.wp),
            // padding: EdgeInsets.only(left: 0.8.wp, right: 0.8.wp, top: 0.8.wp, bottom: 0.8.wp),
            // padding: EdgeInsets.all(0.8.wp),
            decoration: BoxDecoration(
              color: const Color(0xff00a0ff),
              boxShadow: [
                BoxShadow(
                    color: const Color(0x4d000000),
                    offset: Offset(0.wp, 0.wp),
                    blurRadius: 0.35.wp)
              ],
              // borderRadius: BorderRadius.circular(0.35.wp),
            ),
            child: Row(
              children: [
                Container(color: markColor, width: 0.63.wp),
                SizedBox(width: 0.5.wp),
                SizedBox(
                  width: 18.wp,
                  child: Text(
                    info.name,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 1.39.wp,
                      fontWeight: FontWeight.w700,
                    ),
                    textAlign: TextAlign.start,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                const Spacer(),
                Text("${info.totalControlNum}",
                    style: TextStyle(
                        fontSize: 1.39.wp,
                        fontWeight: FontWeight.w500,
                        color: Colors.white)),
                SizedBox(width: 1.0.wp),
              ],
            ),
          ));
    });
  }

  Widget _wRight() {
    return Container(
      margin: EdgeInsets.only(left: 0.2.wp),
      // color: Colors.green,
      // height: 80.wp,
      child: Column(
        children: [
          _wRightTitle(),
          SizedBox(height: 1.5.wp),
          Expanded(
            child: _wRightTable(),
          ),
        ],
      ),
    );
  }

  Widget _wRightTitle() {
    return Obx(() {
      // int count = controller.mapActivityList.value.list.length;
      var selectActivityId = controller.selectActivityId.value;
      var info;
      if (controller.mapActivityList.value.list.isNotEmpty) {
        info = controller.mapActivityList.value.list[selectActivityId];
      }
      return Row(
        children: [
          SizedBox(width: 0.5.wp),
          const Icon(
            Icons.circle,
            size: 16,
            color: Color(0xff98d8ff),
          ),
          const SizedBox(width: 6),
          Text(
            "用户列表",
            style: TextStyle(
              color: Colors.white,
              fontSize: 1.39.wp,
              fontWeight: FontWeight.w700,
            ),
          ),
          const SizedBox(width: 6),
          SizedBox(
            width: 58.wp,
            child: Text(
              info != null ? "(${info.name})" : "",
              style: TextStyle(
                color: const Color(0xffffcb00),
                fontSize: 1.39.wp,
                fontWeight: FontWeight.w400,
              ),
              textAlign: TextAlign.start,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ],
      );
    });
  }

  Widget _wRightTable() {
    return Container(
      // color: Colors.red,
      child: Column(
        children: [
          _wRightTableTitle(),
          _wRightTableBody(),
        ],
      ),
    );
  }

  Widget _wRightTableTitle() {
    var style = TextStyle(
      color: const Color(0xff98d8ff),
      fontSize: 1.39.wp,
      fontWeight: FontWeight.w700,
    );
    return Container(
      height: 2.99.wp,
      margin: EdgeInsets.symmetric(vertical: 0.wp, horizontal: 0.6.wp),
      padding: EdgeInsets.symmetric(horizontal: 1.0.wp),
      decoration: BoxDecoration(
        color: const Color(0xffffffff).withOpacity(0.1),
        // border: Border.all(width: 1.0, color: const Color(0xffe9e9e9)),
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(0.63.wp),
            topRight: Radius.circular(0.63.wp)),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
            width: 5.49.wp,
            alignment: Alignment.center,
            child: Text("排名", style: style),
          ),
          Container(
            width: 9.2.wp,
            padding: EdgeInsets.symmetric(horizontal: 1.wp),
            child: Text("用户名", style: style),
          ),
          Container(
            width: 8.2.wp,
            alignment: Alignment.center,
            child: Text("路线ID", style: style),
          ),
          Container(
            width: 6.wp,
            alignment: Alignment.center,
            child: Text("成绩", style: style),
          ),
          Container(
            width: 8.8.wp,
            alignment: Alignment.center,
            child: Text("总时间", style: style),
          ),
          Container(
            width: 9.0.wp,
            alignment: Alignment.center,
            child: Text("总里程", style: style),
          ),
          Container(
            width: 11.1.wp,
            alignment: Alignment.center,
            child: Text("配速", style: style),
          ),
          Container(
            width: 6.2.wp,
            alignment: Alignment.center,
            child: Text("分组", style: style),
          ),
        ],
      ),
    );
  }

  Widget _wRightTableBody() {
    return Obx(() {
      var info = controller.userRankInfoList;
      return Expanded(
          child: Container(
        margin: EdgeInsets.symmetric(vertical: 0.2.wp, horizontal: 0.6.wp),
        decoration: BoxDecoration(
          color: const Color(0xffffffff).withOpacity(0.1),
          // border: Border.all(width: 1.0, color: const Color(0xffe9e9e9)),
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(0.63.wp),
              bottomRight: Radius.circular(0.63.wp)),
        ),
        child: ListView.separated(
            padding: EdgeInsets.only(top: 0.wp),
            itemCount: info.length,
            separatorBuilder: (BuildContext context, int index) {
              return Container(
                height: 0,
                width: double.infinity,
                color: const Color(0xffe9e9e9),
              );
            },
            itemBuilder: (ctx, i) {
              return _wUserElem(ctx, i);
            }),
      ));
    });
  }

  Widget _wUserElem(BuildContext ctx, int i) {
    var style = TextStyle(
      color: Color(0xffffffff),
      fontSize: 1.25.wp,
      fontWeight: FontWeight.w500,
    );
    var dividline =
        Container(width: 0.14.wp, height: 1.74.wp, color: Color(0xffdedede));

    return Obx(() {
      var info = controller.userRankInfoList[i];
      return Container(
        margin: EdgeInsets.only(
            left: 1.0.wp, right: 1.0.wp, top: 0.6.wp, bottom: 0.wp),
        height: 4.08.wp,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
                width: 5.49.wp,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: const Color(0xffff870d),
                  // border: Border.all(width: 1.0, color: const Color(0xffe9e9e9)),
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(0.63.wp),
                      bottomLeft: Radius.circular(0.63.wp)),
                ),
                child: Text(
                    info.bValid! ? info.iRankNum.toString() : '--',
                    style: TextStyle(
                        color: const Color(0xffffffff),
                        fontSize: 3.03.wp,
                        fontWeight: FontWeight.w700,
                        fontStyle: FontStyle.italic))),
            Container(width: 0.2.wp),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  color: const Color(0xff003656),
                  // border: Border.all(width: 1.0, color: const Color(0xffe9e9e9)),
                  borderRadius: BorderRadius.only(
                      topRight: Radius.circular(0.63.wp),
                      bottomRight: Radius.circular(0.63.wp)),
                ),
                child: Row(
                  children: [
                    Container(
                        width: 9.wp,
                        padding: EdgeInsets.symmetric(horizontal: 1.wp),
                        child: Text(info.sUserName!, style: style)),
                    dividline,
                    Container(
                        width: 8.wp,
                        alignment: Alignment.center,
                        child: Text(info.sRouteCode!, style: style)),
                    dividline,
                    Container(
                        width: 6.wp,
                        alignment: Alignment.center,
                        child: Text(info.bValid! ? '有效' : '无效', style: style)),
                    dividline,
                    Container(
                        width: 8.6.wp,
                        alignment: Alignment.center,
                        child: Text(info.bValid! ? info.iTime.toString() : '--', style: style)),
                    dividline,
                    Container(
                        width: 9.wp,
                        alignment: Alignment.center,
                        child:
                            Text(info.bValid! ? info.iMileage!.kmToStr() : '--', style: style)),
                    dividline,
                    Container(
                        width: 11.wp,
                        alignment: Alignment.center,
                        child: Text(info.bValid! ? '${info.pacePerKm!.toMinSecondString()}/km' : '--',
                            style: style)),
                    dividline,
                    Container(
                      width: 6.wp,
                      alignment: Alignment.center,
                      child: Image.asset(
                        userGroupFlag[info.iGroupid! - 1],
                        height: 1.81.wp,
                        fit: BoxFit.fitHeight,
                      ),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      );
    });
  }
}

void main() {
  Mock.initServices();

  PageTopController pageTopController = Get.put(PageTopController());
  Get.put(MapToController());
  // pageTopController.mapName.value = "济南泉城公园";
  // pageTopController.mapName.value = "济南森林公园风景区定向运动济南森林公园风景区定向运动";
  Get.put(UserRankController());

  runPreview(const UserRankView());
}