import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/retrofit/data/base_data.dart';
import 'package:huixiang/retrofit/data/user_info.dart';
import 'package:huixiang/retrofit/retrofit_api.dart';
import 'package:huixiang/view_widget/custom_image.dart';
import 'package:huixiang/view_widget/loading_view.dart';
import 'package:huixiang/view_widget/mine_vip_view.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:dio/dio.dart';

class MinePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MinePage();
  }
}

class _MinePage extends State<MinePage> with AutomaticKeepAliveClientMixin {
  ApiService apiService;

  _toUserInfo() async {
    await Navigator.of(context).pushNamed('/router/user_info_page');
    queryUserInfo();
  }

  @override
  void initState() {
    super.initState();

    SharedPreferences.getInstance().then(
      (value) => {
        apiService = ApiService(Dio(), token: value.getString('token')),
        userinfo = UserInfo.fromJson(jsonDecode(value.getString('user'))),
        queryUserInfo()
      },
    );
  }

  UserInfo userinfo;

  queryUserInfo() async {
    var ranks = [
      "青铜会员",
      "白银会员",
      "黄金会员",
      "钻石会员",
      "至尊会员",
    ];
    showCupertinoDialog(
        context: context,
        barrierDismissible: true,
        builder: (context) {
          return LoadingView();
        });
    BaseData baseDate = await apiService.queryInfo();

    if(Navigator.canPop(context))
      Navigator.of(context).pop();
    if (baseDate.isSuccess) {
      userinfo = UserInfo.fromJson(baseDate.data);
      SharedPreferences.getInstance().then(
        (value) => {
          value.setString('user', jsonEncode(baseDate.data)),
        },
      );
      vipLevel = ranks.indexOf(userinfo.memberRankVo.rankName) + 1;
    } else {
      Fluttertoast.showToast(msg: baseDate.msg);
    }
    setState(() {});
  }

  int vipLevel = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFF7F7F7),
      body: Container(
        child: SingleChildScrollView(
          physics: BouncingScrollPhysics(),
          child: Container(
            margin: EdgeInsets.only(top: 40),
            child: Stack(
              alignment: Alignment.centerRight,
              children: [
                Column(
                  children: [
                    InkWell(
                      onTap: _toUserInfo,
                      child: mineView(),
                    ),
                    GestureDetector(
                      onTap: () {
                        Navigator.of(context)
                            .pushNamed('/router/mine_vip_level_page');
                      },
                      child: MineVipView(
                        vipLevel,
                        curLevel: vipLevel,
                        rank: (userinfo != null)
                            ? int.tryParse(userinfo.points)
                            : 0,
                        rankMax:
                            (userinfo != null && userinfo.memberRankVo != null)
                                ? userinfo.memberRankVo.rankOrigin
                                : 0,
                        createTime:
                            (userinfo != null) ? userinfo.createTime : "",
                      ),
                    ),
                    orderOrCard(),
                    mineList(context),
                  ],
                ),
                buildNotice(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  ///横向的提示
  Widget buildNotice() {
    return Container(
      margin: EdgeInsets.only(top: 130),
      child: Stack(
        children: [
          Container(
            height: 33,
            margin: EdgeInsets.only(left: 12),
            padding: EdgeInsets.only(left: 16),
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                    color: Colors.black.withAlpha(25),
                    offset: Offset(0, 1),
                    blurRadius: 12,
                    spreadRadius: 0)
              ],
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(2),
                bottomLeft: Radius.circular(2),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  S.of(context).ninyouyigedingdanyaolingqu,
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 12,
                      color: Colors.black),
                ),
                Icon(
                  Icons.keyboard_arrow_right,
                  color: Colors.black,
                  size: 16,
                )
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 5, bottom: 4),
            padding: EdgeInsets.all(2),
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                    color: Colors.black.withAlpha(25),
                    offset: Offset(0, 1),
                    blurRadius: 12,
                    spreadRadius: 0)
              ],
              shape: BoxShape.circle,
              // borderRadius: BorderRadius.all(Radius.circular(2)),
            ),
            child: Image.asset(
              "assets/image/icon_mine_motorcycle.png",
              width: 20,
              height: 20,
              fit: BoxFit.contain,
            ),
          ),
        ],
      ),
    );
  }

  ///我的下面的条目列表
  Widget mineList(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(16, 8, 16, 8),
      padding: EdgeInsets.fromLTRB(20, 12, 20, 12),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(8)),
          boxShadow: [
            BoxShadow(
                color: Colors.black.withAlpha(12),
                offset: Offset(0, 3),
                blurRadius: 14,
                spreadRadius: 0)
          ]),
      child: Column(
        children: [
          InkWell(
            onTap: () {
              Navigator.of(context).pushNamed('/router/mine_wallet');
            },
            child: mineItem(
              S.of(context).wodeqianbao,
              "assets/image/icon_mine_wallet.png",
            ),
          ),
          InkWell(
            onTap: () {
              Navigator.of(context).pushNamed('/router/exchange_history_page');
            },
            child: mineItem(
              S.of(context).duihuanlishi,
              "assets/image/icon_mine_records_of_consumption.png",
            ),
          ),
          InkWell(
            onTap: () {
              Navigator.of(context).pushNamed('/router/roll_center_page');
            },
            child: mineItem(
              S.of(context).linjuanzhongxin,
              "assets/image/icon_mine_invoice_assistant.png",
            ),
          ),
          InkWell(
            onTap: () {
              Navigator.of(context).pushNamed('/router/manage_address_page');
            },
            child: mineItem(
              S.of(context).guanlidizhi,
              "assets/image/icon_location_address.png",
            ),
          ),
          InkWell(
            onTap: () {
              Navigator.of(context).pushNamed('/router/setting_page');
            },
            child: mineItem(
              S.of(context).shezhi,
              "assets/image/icon_mine_setting.png",
            ),
          ),
          // mineItem(
          //   S.of(context).bangzhuyufankui,
          //   "assets/image/icon_mine_feedback.png",
          // ),
        ],
      ),
    );
  }

  ///我的页面下面条目
  Widget mineItem(text, icon) {
    return Container(
      margin: EdgeInsets.only(top: 8, bottom: 8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image.asset(
            icon,
            width: 28,
            height: 28,
          ),
          SizedBox(
            width: 12,
          ),
          Expanded(
              flex: 1,
              child: Text(
                text,
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                    color: Color(0xFF353535)),
              )),
          Icon(
            Icons.keyboard_arrow_right,
            size: 20,
            color: Colors.black,
          )
        ],
      ),
    );
  }

  ///订单或者卡包试图
  Widget orderOrCard() {
    return Container(
      margin: EdgeInsets.fromLTRB(16, 8, 16, 8),
      padding: EdgeInsets.fromLTRB(20, 12, 20, 12),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(8)),
          boxShadow: [
            BoxShadow(
                color: Colors.black.withAlpha(12),
                offset: Offset(0, 3),
                blurRadius: 14,
                spreadRadius: 0)
          ]),
      child: Row(
        children: [
          Expanded(
            flex: 1,
            child: GestureDetector(
              onTap: () {
                Navigator.of(context).pushNamed('/router/mine_card');
              },
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Image.asset(
                    "assets/image/icon_mine_card.png",
                    width: 32,
                    height: 32,
                  ),
                  SizedBox(
                    width: 12,
                  ),
                  Text(
                    S.of(context).kabao,
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                        color: Color(0xFF353535)),
                  )
                ],
              ),
            ),
          ),
          Container(
            width: 2,
            height: 32,
            margin: EdgeInsets.only(left: 20, right: 20),
            color: Color(0xFFABABAB),
          ),
          Expanded(
            flex: 1,
            child: GestureDetector(
              onTap: () {
                Navigator.of(context).pushNamed('/router/order_history_page');
              },
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Image.asset(
                    "assets/image/icon_mine_order.png",
                    width: 32,
                    height: 32,
                  ),
                  SizedBox(
                    width: 12,
                  ),
                  Text(
                    S.of(context).dingdan,
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                        color: Color(0xFF353535)),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  ///我的信息部分
  Widget mineView() {
    return Container(
      margin: EdgeInsets.all(16),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          MImage(
              userinfo == null ? "" : userinfo.headimg,
            radius: BorderRadius.all(Radius.circular(4)),
            width: 84,
            height: 84,
            fit: BoxFit.cover,
            errorSrc: "assets/image/default_1.png",
            fadeSrc: "assets/image/default_1.png",
          ),
          SizedBox(
            width: 16,
          ),
          Expanded(
            flex: 1,
            child: Container(
              height: 84,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Row(
                    children: [
                      Expanded(
                        child: Text(
                          userinfo == null ? "" : "${userinfo.nickname}",
                          style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                              color: Color(0xFF353535)),
                        ),
                        flex: 1,
                      ),
                      InkWell(
                        onTap: () {
                          Navigator.of(context).pushNamed('/router/ui_test');
                        },
                        child: Image.asset(
                          "assets/image/icon_scan_qr_code.png",
                          width: 24,
                          height: 24,
                        ),
                      ),
                    ],
                  ),
                  SizedBox(
                    height: 16,
                  ),
                  Text(
                    userinfo == null ? "NO.0" : "NO.${userinfo.vipNo}",
                    style: TextStyle(fontSize: 12, color: Color(0xFF2F2F2F)),
                  ),
                  SizedBox(
                    height: 8,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Image.asset(
                        "assets/image/icon_an_crown.png",
                        width: 13,
                        height: 13,
                      ),
                      SizedBox(
                        width: 8,
                      ),
                      Text(
                        userinfo == null || userinfo.memberRankVo == null
                            ? ""
                            : "${userinfo.memberRankVo.rankName}",
                        style: TextStyle(
                            fontSize: 12,
                            fontWeight: FontWeight.bold,
                            color: Color(0xFF353535)),
                      ),
                      Expanded(
                        child: GestureDetector(
                          onTap: () {
                            Navigator.of(context)
                                .pushNamed('/router/integral_page');
                          },
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Text(
                                S.of(context).jifenxiangqing,
                                style: TextStyle(
                                    color: Colors.black,
                                    fontSize: 12,
                                    fontWeight: FontWeight.bold),
                              ),
                              Icon(
                                Icons.keyboard_arrow_right,
                                size: 16,
                                color: Colors.black,
                              )
                            ],
                          ),
                        ),
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}