import 'package:cached_network_image/cached_network_image.dart';
import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:lszlgl/base/base_lifecycle_state.dart';
import 'package:lszlgl/config/colors.dart';
import 'package:lszlgl/model/rsp/user_rsp.dart';
import 'package:lszlgl/service/user_service.dart';
import 'package:lszlgl/utils/sp_utils.dart';

import '../../main.dart';
import '../../network/my_api.dart';

/// 用户中心
class UserCenterPage extends StatefulWidget {
  const UserCenterPage({Key? key}) : super(key: key);

  @override
  State<UserCenterPage> createState() => _UserCenterPageState();
}

class _UserCenterPageState extends BaseLifecycleState<UserCenterPage>
    with AutomaticKeepAliveClientMixin {
  final userNotify = null.notifier<UserRsp?>();

  void startSetting() {
    MyRouter.startSetting();
  }

  Future<void> onRefresh() async {
    try {
      var value = await MyApi.get().userProfile();
      if (value.data != null) userNotify.value = value.data;
      await UserService.get().saveUser(value.data);
    } catch (e) {
      logger.e(e);
    }
  }

  @override
  void onInit() {
    userNotify.value = UserService.get().getUser();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return myScaffold(child: buildBody());
  }

  Widget buildBody() {
    return Column(
      children: [
        myAppBar(
          title: '用户中心',
          autoLeading: false,
          naviBarColor: Colors.white,
        ),
        Expanded(
          child: EasyRefresh(
            onRefresh: onRefresh,
            child: CustomScrollView(
              slivers: [
                SliverToBoxAdapter(
                  child: Column(
                    children: [
                      buildUserInfo(),
                      const SizedBox(height: 28),
                      buildQuit(),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget buildUserInfo() {
    return userNotify.builder((user) {
      return Stack(
        alignment: Alignment.bottomCenter,
        children: [
          Container(
            margin: const EdgeInsets.symmetric(horizontal: 12),
            padding: const EdgeInsets.fromLTRB(20, 30, 20, 156),
            clipBehavior: Clip.hardEdge,
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(12)),
              boxShadow: [
                BoxShadow(
                    color: Colors.black.withOpacity(0.1),
                    offset: const Offset(0, 5),
                    blurRadius: 4)
              ],
              image: const DecorationImage(image: AssetImage(imgHomeListBg), fit: BoxFit.fill),
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        user?.nickname ?? '',
                        style: const TextStyle(
                            fontSize: 18, color: Color(0xFF333333), fontWeight: FontWeight.w500),
                      ),
                      const SizedBox(height: 4),
                      Text(
                        user?.username ?? '',
                        style: const TextStyle(
                            fontSize: 18, color: Color(0xFF333333), fontWeight: FontWeight.w500),
                      ),
                      const SizedBox(height: 6),
                      buildDeptText(user?.dept?.name ?? ''),
                    ],
                  ),
                ),
                buildUserAvatar(user?.avatar ?? ''),
              ],
            ),
          ),
          buildBottomStack(),
        ],
      );
    });
  }

  Widget buildBottomStack() {
    return Container(
      padding: const EdgeInsets.only(bottom: 16),
      alignment: Alignment.bottomCenter,
      height: 140,
      decoration: const BoxDecoration(
          image: DecorationImage(image: AssetImage(imgUserCenterTopBgIm), fit: BoxFit.fill)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        mainAxisSize: MainAxisSize.max,
        children: [
          GestureDetector(
            onTap: () {
              MyRouter.startChangePwd();
            },
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Image.asset(imgUserCenterChangePwdIm, width: 50, height: 50),
                const SizedBox(height: 8),
                const Text('修改密码')
              ],
            ),
          ),
          Container(
            width: 1,
            height: 40,
            color: MyColor.c_background,
          ),
          GestureDetector(
            onTap: startSetting,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Image.asset(imgUserCenterSettingIm, width: 50, height: 50),
                const SizedBox(height: 8),
                const Text('设置')
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget buildUserAvatar(String imageUrl) {
    return Container(
      width: 72,
      height: 72,
      clipBehavior: Clip.hardEdge,
      decoration: const BoxDecoration(
        color: Color(0xFF7085A1),
        borderRadius: BorderRadius.all(Radius.circular(200)),
        border: Border.fromBorderSide(BorderSide(color: Colors.white, width: 1, strokeAlign: 1.0)),
      ),
      child: CachedNetworkImage(
        fit: BoxFit.cover,
        imageUrl: imageUrl,
        placeholder: (_, __) => const Center(child: CircularProgressIndicator()),
        errorWidget: (context, url, error) =>
            const Center(child: Icon(Icons.error, color: Colors.grey)),
      ),
    );
  }

  Widget buildDeptText(String text) {
    return Row(
      children: [
        if (text.isNotEmpty)
          Padding(
          padding: const EdgeInsets.only(top: 2.0),
          child: Image.asset(imgUserCenterNameIm, width: 12, height: 12),
        ),
        const SizedBox(width: 4),
        Expanded(
          child: Text(
            text,
            maxLines: 2,
            style: const TextStyle(
              color: Color(0xFF6A7891),
              fontSize: 12,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ],
    );
  }

  Widget buildQuit() {
    return Container(
      color: Colors.white,
      width: MediaQuery.of(context).size.width,
      child: TextButton(
        onPressed: () {
          quiteLogin();
        },
        child: const Text('退出登录',style: TextStyle(color: Color(0xFF333333),fontSize: 15)),
      ),
    );
  }

  void quiteLogin(){
    showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          titlePadding: const EdgeInsets.fromLTRB(8, 26, 8, 4),
          actionsPadding:const EdgeInsets.symmetric(horizontal: 8.0,vertical: 4),
          title: const Text('确定退出登录？',textAlign: TextAlign.center,),
          actionsAlignment: MainAxisAlignment.spaceAround,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12.0),
          ),
          actions: <Widget>[
            TextButton(
              child: const Text('取消',style: TextStyle(color: Colors.grey),),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            TextButton(
              child: const Text('退出',style: TextStyle(color: MyColor.c_28A3ED,fontWeight: FontWeight.bold),),
              onPressed: () {
                SPUtils.getInstance().remove('accountpwd');
                UserService.get().logout();
              },
            ),
          ],
        );
      },
    );
  }

  @override
  bool get wantKeepAlive => true;
}