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_admin_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 UserAdminView extends GetView<UserAdminController> {
  const UserAdminView({super.key});

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

  @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: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(1.11.wp),
        shape: BoxShape.rectangle,
        boxShadow: [
          BoxShadow(
              color: const Color(0x33000000),
              offset: Offset(-0.28.wp, 0.21.wp),
              blurRadius: 0.07.wp)
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Expanded(
            flex: 1,
            child: _wLeft(),
          ),
          Container(
            color: const Color(0xffd8d8d8),
            width: 1,
          ),
          Expanded(
            flex: 3,
            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(0xff1a82c0),
          ),
          const SizedBox(width: 6),
          Text(
            "活动列表 (${count})",
            style: TextStyle(
              color: Colors.black,
              fontSize: 1.39.wp,
              fontWeight: FontWeight.w700,
            ),
            textAlign: TextAlign.start,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ],
      );
    });
  }

  Widget _wLeftActivitys() {
    return Obx(() {
      return Expanded(
          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)
          : Colors.white;
      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: Colors.white,
              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.black,
                      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: const Color(0xff333333))),
                SizedBox(width: 1.0.wp),
              ],
            ),
          ));
    });
  }

  Widget _wRight() {
    return Container(
      margin: EdgeInsets.only(left: 0.8.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(0xff1a82c0),
          ),
          const SizedBox(width: 6),
          Text(
            "用户列表",
            style: TextStyle(
              color: Colors.black,
              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(0xff949494),
                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: Color(0xff333333),
      fontSize: 1.25.wp,
      fontWeight: FontWeight.w500,
    );
    return Container(
      margin: EdgeInsets.symmetric(vertical: 0.wp, horizontal: 3.wp),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Container(
            width: 4.wp,
            alignment: Alignment.center,
            child: Text("序号", style: style),
          ),
          Container(
            width: 10.wp,
            padding: EdgeInsets.symmetric(horizontal: 1.wp),
            child: Text("用户名", style: style),
          ),
          Container(
            width: 18.wp,
            alignment: Alignment.center,
            child: Text("开始时间", style: style),
          ),
          Container(
            width: 9.wp,
            alignment: Alignment.center,
            child: Text("是否屏蔽", style: style),
          ),
          Container(
            width: 18.wp,
            padding: EdgeInsets.only(left: 0.3.wp),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Image.asset(
                  Assets.imagesIcFlagRed,
                  height: 1.81.wp,
                  fit: BoxFit.fitHeight,
                ),
                Image.asset(
                  Assets.imagesIcFlagYellow,
                  height: 1.81.wp,
                  fit: BoxFit.fitHeight,
                ),
                Image.asset(
                  Assets.imagesIcFlagBlue,
                  height: 1.81.wp,
                  fit: BoxFit.fitHeight,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _wRightTableBody() {
    return Obx(() {
      var info = controller.mapToController.userInfoList;
      return Expanded(
          child: Container(
        margin: EdgeInsets.symmetric(vertical: 0.6.wp, horizontal: 3.wp),
        // decoration: BoxDecoration(
        //   border: Border.all(width: 1.0, color: const Color(0xffe9e9e9)),
        //   // borderRadius: BorderRadius.circular(0.35.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(0xff333333),
      fontSize: 1.25.wp,
      fontWeight: FontWeight.w500,
    );
    return Obx(() {
      var info = controller.mapToController.userInfoList.value[i];
      var dividline = Container(
          width: 1,
          margin: EdgeInsets.symmetric(vertical: 0.8.wp),
          color: Color(0xffdedede));
      return Container(
        margin:
            EdgeInsets.only(left: 0.wp, right: 0.wp, top: 0.1.wp, bottom: 0.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),
        height: 3.75.wp,
        decoration: BoxDecoration(
          color: const Color(0xffffffff),
          border: Border.all(width: 1.0, color: const Color(0xffe9e9e9)),
          // borderRadius: BorderRadius.circular(0.35.wp),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Container(
                width: 4.wp,
                alignment: Alignment.center,
                child: Text((i + 1).toString(), style: style)),
            dividline,
            Container(
                width: 10.wp,
                padding: EdgeInsets.symmetric(horizontal: 1.wp),
                child: Text(info.sUserName.toString(), style: style)),
            dividline,
            Container(
                width: 18.wp,
                alignment: Alignment.center,
                child: Text("2023.06.26 10:05:18", style: style)),
            dividline,
            Container(
              width: 9.wp,
              child: _wUserSelectDisplay(info.iUserid!),
            ),
            dividline,
            Container(
              width: 18.wp,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  _wUserSelectGroup(info.iUserid!, 1),
                  _wUserSelectGroup(info.iUserid!, 2),
                  _wUserSelectGroup(info.iUserid!, 3),
                ],
              ),
            )
          ],
        ),
      );
    });
  }

  Widget _wUserSelectDisplay(int userid) {
    return GestureDetector(
        onTap: controller.handleUserDisplay(userid),
        child: Image.asset(
          userid == 1
              ? Assets.imagesIcRadioSelectedOrange
              : Assets.imagesIcRadioSelectedGray,
          width: 1.67.wp,
          height: 1.67.wp,
        ));
  }

  Widget _wUserSelectGroup(int userid, int groupid) {
    return GestureDetector(
        onTap: () => controller.handleUserGroup(userid),
        child: Image.asset(
          userid == groupid
              ? Assets.imagesIcRadioSelectedOrange
              : Assets.imagesIcRadioSelectedGray,
          width: 1.67.wp,
          height: 1.67.wp,
        ));
  }
}

void main() {
  Mock.initServices();

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

  runPreview(const UserAdminView());
}