import 'package:application/widget.dart';
import 'package:common_pub/ui/map_view/map_view.dart';
import 'package:common_pub/ui/map_view/view_map_image.dart';
import 'package:common_pub/ui/map_view/view_map_touch.dart';
import 'package:common_pub/ui/map_view/view_plug_loading.dart';
import 'package:get_storage/get_storage.dart';
import 'data_detail_controller.dart';

class DataDetailPage extends StatelessWidget {
  const DataDetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
        init: DataDetailController(),
        builder: (c) {
          return Container(
              height: double.infinity,
              width: double.infinity,
              color: const Color(0xffc9c0c0),
              alignment: Alignment.center,
              child: c.mapWatch != null
                  ? content(context, c.mapWatch!)
                  : noData());
        });
  }

  Widget noData() {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Image.asset(Assets.imagesIcNoData, height: 64),
          const SizedBox(height: 25),
          const Text('没有数据, 请选择地图',
              style: TextStyle(color: Color(0xff707070), fontSize: 18.5)),
        ],
      ),
    );
  }

  Widget content(BuildContext context, MapWatchService map) {
    return Row(
      children: [
        Expanded(
            child: ViewMapStack(plug: map.plugMap, children: [
          ViewPlugLoading(map.plugMap),
          ViewMapImage(map.plugMap),
          ViewMapTouch(map.plugMap)
        ])),
        _UserListView(),
      ],
    );
  }
}

class _UserListView extends GetView<DataDetailController> {
  @override
  Widget build(BuildContext context) {
    return Obx(() {
      return Container(
          width: 263,
          height: double.infinity,
          decoration: const BoxDecoration(color: Colors.white, boxShadow: [
            BoxShadow(color: Color(0x33000000), blurRadius: 4.3)
          ]),
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Text('用户列表'),
                  IconButton(onPressed: () {}, icon: const Icon(Icons.more_horiz)),
                ],
              ),
              Expanded(
                  child: ListView(
                children: controller.userList
                    .map((element) => _userElem(element))
                    .toList(),
              ))
            ],
          ));
    });
  }

  Widget _userElem(UserInfo data) {
    return Obx(() {
      final children = <Widget>[
        Container(
          width: double.infinity,
          height: 42,
          margin: const EdgeInsets.only(top: 8),
          padding: const EdgeInsets.only(left: 4),
          decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: const [
                BoxShadow(color: Color(0x29000000), blurRadius: 3)
              ],
              borderRadius: BorderRadius.circular(3.56)
          ),
          child: Row(
            children: [
              Container(
                height: double.infinity,
                width: 3.56,
                margin: const EdgeInsets.only(top: 8, bottom: 8, right: 3.55),
                decoration: BoxDecoration(color: data.data.oId == controller.selectedUserId.value
                    ? Colors.orange: Colors.transparent, borderRadius: BorderRadius.circular(2.1)),
              ),
              Text(data.data.oName),
              const Spacer(),
              IconButton(onPressed: (){
                data.isExpand.value = !data.isExpand.value;
              }, icon: Icon(data.isExpand.value? Icons.arrow_drop_up: Icons.arrow_drop_down))
            ],
          ),
        )
      ];
      if(data.isExpand.value){
        children.add(Column(
          children: data.data.list.map((element) => GestureDetector(
              onTap: (){
                controller.selectedDetail.value = element;
                controller.selectedUserId.value = data.data.oId;
              },
              child: detailElem(element))).toList(),
        ));
      }

      return Column(
        children: children,
      );
    });
  }

  Widget detailElem(DetailSimple detail){
    return Container(
        margin: const EdgeInsets.only(left: 12, top: 2 , bottom: 4),
        width: double.infinity,
        height: 54,
        padding: const EdgeInsets.fromLTRB(4, 6, 4, 6),
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(3.5),
            boxShadow: const [
              BoxShadow(color: Color(0x33000000), blurRadius: 1.3)
            ]
        ),
        child: Row(
          children: [
            Container(
              height: double.infinity,
              width: 3.56,
              margin: const EdgeInsets.only(right: 3.55),
              decoration: BoxDecoration(color: detail.gameId == controller.selectedDetail.value.gameId
                  ? Colors.orange: Colors.transparent, borderRadius: BorderRadius.circular(2.1)),
            ),
            Expanded(child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(detail.courseName, maxLines: 1, overflow: TextOverflow.ellipsis),
                Text(detail.actName, maxLines: 1, overflow: TextOverflow.ellipsis,),
              ],
            )),
            const SizedBox(width: 12),
            Text(detail.isComplete?'完赛':'未完赛')
          ],
        ),
      );
  }

}