import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/mine/valueAddedServices/valueAddedServicesBuy/valueAddedServicesBuy_logic.dart';
import 'package:star_lock/mine/valueAddedServices/valueAddedServicesBuy/valueAddedServicesBuy_state.dart';

import '../../../app_settings/app_colors.dart';
import '../../../tools/titleAppBar.dart';

class ValueAddedServicesBuyPage extends StatefulWidget {
  const ValueAddedServicesBuyPage({Key? key}) : super(key: key);

  @override
  State<ValueAddedServicesBuyPage> createState() =>
      _ValueAddedServicesBuyPageState();
}

class _ValueAddedServicesBuyPageState extends State<ValueAddedServicesBuyPage> {

  @override
  Widget build(BuildContext context) {
    final int type = ModalRoute.of(context)!.settings.arguments! as int;

    final ValueAddedServicesBuyLogic logic = Get.put(ValueAddedServicesBuyLogic());
    final ValueAddedServicesBuyState state = Get.find<ValueAddedServicesBuyLogic>().state;

    return Scaffold(
      backgroundColor: AppColors.greyBackgroundColor,
      appBar: TitleAppBar(
          barTitle: _getNavTitle(type),
          haveBack: true,
          backgroundColor: AppColors.mainColor),
      body: Column(
        children: <Widget>[
          Container(
              width: 1.sw,
              // height: 400.h,
              color: Colors.white,
              padding: EdgeInsets.only(
                  left: 25.h, right: 25.h, top: 25.h, bottom: 10.h),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    '选择套餐'.tr,
                    style: TextStyle(fontSize: 24.sp),
                  ),
                ],
              )),
          Expanded(
            child: Container(
              color: Colors.white,
              child: GridView.count(
                padding: EdgeInsets.all(10.w),
                crossAxisCount: 2,
                mainAxisSpacing: 10.h,
                crossAxisSpacing: 10.w,
                childAspectRatio: 1 / 0.5,
                children: state.topData.value
                    .map(_buildItem)
                    .toList(),
              ),
            ),
          ),
          Container(
            color: Colors.white,
            padding: EdgeInsets.only(
                left: 25.h, right: 25.h, top: 25.h, bottom: 10.h),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  '支付方式'.tr,
                  style: TextStyle(
                      fontSize: 24.sp,
                      color: AppColors.blackColor,
                      fontWeight: FontWeight.w500),
                ),
                SizedBox(
                  height: 20.h,
                ),
                Row(
                  children: <Widget>[
                    Image.asset(
                      'images/mine/icon_mine_valueAddedServices_zfb.png',
                      width: 30.w,
                      height: 30.w,
                    ),
                    SizedBox(width: 20.w),
                    Expanded(
                        child: Text('支付宝'.tr,
                            style: TextStyle(
                                fontSize: 24.sp, color: AppColors.blackColor))),
                    SizedBox(width: 5.w),
                    Image.asset(
                      'images/icon_round_select.png',
                      width: 40.w,
                      height: 40.w,
                    )
                  ],
                ),
                SizedBox(
                  height: 20.h,
                ),
              ],
            ),
          ),
          Container(
            height: 10.h,
            color: const Color(0xFFF5F5F5),
          ),
          Container(
            height: 80.h,
            color: Colors.white,
            child: Row(
              children: <Widget>[
                SizedBox(width: 20.w),
                Expanded(
                    child: Text('￥50',
                        style: TextStyle(
                            fontSize: 24.sp,
                            color: AppColors.mainColor,
                            fontWeight: FontWeight.w500))),
                SizedBox(width: 5.w),
                GestureDetector(
                  onTap: () {
                    logic.showToast('支付成功'.tr);
                  },
                  child: Container(
                      width: 180.w,
                      height: 100.h,
                      color: AppColors.mainColor,
                      child: Center(
                          child: Text('去支付'.tr,
                              style: TextStyle(
                                  fontSize: 24.sp,
                                  color: Colors.white,
                                  fontWeight: FontWeight.w500)))),
                )
              ],
            ),
          ),
          SizedBox(
            height: 30.h,
          )
        ],
      ),
    );
  }

  Container _buildItem(String title) {
    return Container(
      margin: EdgeInsets.all(10.w),
      padding: EdgeInsets.only(left: 30.w, top: 20.h, bottom: 20.h),
      decoration: BoxDecoration(
          color: title == '1' ? const Color(0xFFEDF1FD) : Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(20.h)),
          border: Border.all(width: 0.5.w, color: Colors.black)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            '500${'条'.tr}',
            style: TextStyle(fontSize: 24.sp, color: AppColors.blackColor),
          ),
          SizedBox(height: 10.h),
          Text(
            '￥50 (￥0.08/${'条'.tr})',
            style: TextStyle(
                fontSize: 20.sp, color: AppColors.placeholderTextColor),
          ),
        ],
      ),
    );
  }

  String _getNavTitle(int type) {
    String topTitle = '';
    switch (type) {
      case 1:
        topTitle = '购买短信'.tr;
        break;
      case 2:
        topTitle = '购买邮件'.tr;
        break;
      case 3:
        topTitle = '购买实名认证次数'.tr;
        break;
      case 4:
        topTitle = '开通高级功能'.tr;
        break;
    }
    return topTitle;
  }
}