import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/common/XSConstantMacro/XSConstantMacro.dart';
import 'package:star_lock/mine/valueAddedServices/valueAddedServicesHighFunction/valueAddedServicesHighFunction_logic.dart';
import 'package:star_lock/mine/valueAddedServices/valueAddedServicesHighFunction/valueAddedServicesHighFunction_state.dart';
import 'package:star_lock/mine/valueAddedServices/valueAddedServicesRecord/use_record_list_arg.dart';

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

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

  @override
  State<ValueAddedServicesHighFunctionPage> createState() =>
      _ValueAddedServicesHighFunctionPageState();
}

class _ValueAddedServicesHighFunctionPageState
    extends State<ValueAddedServicesHighFunctionPage> {
  final ValueAddedServicesHighFunctionLogic logic =
      Get.put(ValueAddedServicesHighFunctionLogic());
  final ValueAddedServicesHighFunctionState state =
      Get.find<ValueAddedServicesHighFunctionLogic>().state;

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

    logic.getServiceUserPackage();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: TitleAppBar(
            barTitle: '高级功能'.tr,
            haveBack: true,
            iconColor: Colors.black,
            titleColor: Colors.black,
            backgroundColor: Colors.white),
        body: Column(
          children: <Widget>[
            Expanded(
              child: ListView(
                children: <Widget>[
                  _topShowState(),
                  _benefitsContent(),
                  Container(height: 20.h, color: const Color(0xFFF5F5F5)),
                  _buyNotes(),
                ],
              ),
            ),
            // _bottomBtn(),
          ],
        ));
  }

  Widget _topShowState() {
    return Container(
      height: 150.h,
      margin: EdgeInsets.only(left: 30.w, top: 20.h, right: 30.w),
      padding: EdgeInsets.only(left: 30.w),
      decoration: BoxDecoration(
        color: const Color(0xFFDFE6ED),
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30.h),
          topRight: Radius.circular(30.h),
        ),
      ),
      child: Container(
        color: Colors.transparent,
        child: Stack(
          alignment: AlignmentDirectional.centerStart,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              // crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    SizedBox(height: 20.h),
                    Text(
                      '${'当前状态'.tr}：${"已开通".tr}',
                      style: TextStyle(
                          fontSize: 24.sp, fontWeight: FontWeight.w600),
                    ),
                    SizedBox(height: 5.h),
                    Obx(() => Text(
                          '${'有效期'.tr}:${state.vipExpireDate.value}',
                          style: TextStyle(
                              fontSize: 20.sp, fontWeight: FontWeight.w600),
                        )),
                  ], //
                ),
              ],
            ),
            Positioned(
                bottom: 0.h,
                right: 0.w,
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    // 华为上架bug
                    // GestureDetector(
                    //   onTap: () {
                    //     Get.toNamed(Routers.advancedFeaturesWebPage,
                    //         arguments: <String, int>{
                    //           'webBuyType': XSConstantMacro.webBuyTypeVip,
                    //         });
                    //   },
                    //   child: Container(
                    //     // width: 110.w,
                    //     // height: 50.h,
                    //     padding: EdgeInsets.only(left: 20.w, right: 20.w, top: 8.h, bottom: 8.h),
                    //     decoration: BoxDecoration(
                    //       color: const Color(0xFFBDCDDF),
                    //       borderRadius: BorderRadius.all(Radius.circular(30.h)),
                    //     ),
                    //     child: Center(
                    //         child: Text(
                    //       '购买'.tr,
                    //       style: TextStyle(fontSize: 22.sp),
                    //     )),
                    //   ),
                    // ),
                    SizedBox(
                      width: 10.w,
                    ),
                    GestureDetector(
                      onTap: () {
                        Get.toNamed(Routers.advancedFunctionRecordPage,
                            arguments: UseRecordListArg.vip);
                      },
                      child: Container(
                        // width: 90.w,
                        // height: 50.h,
                        padding: EdgeInsets.only(left: 15.w, right: 10.w, top: 8.h, bottom: 8.h),
                        decoration: BoxDecoration(
                          color: const Color(0xFFBDCDDF),
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(30.h),
                            bottomLeft: Radius.circular(30.h),
                          ),
                        ),
                        child: Center(
                            child: Text(
                              '记录'.tr,
                          style: TextStyle(fontSize: 22.sp),
                        )),
                      ),
                    ),
                  ],
                )),
          ],
        ),
      ),
    );
  }

  Widget _benefitsContent() {
    return Column(
      children: <Widget>[
        Container(
          // color: Colors.red,
          margin: EdgeInsets.only(left: 130.w, top: 50.h, right: 130.w),
          padding: EdgeInsets.only(left: 30.w),
          child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Image.asset(
                    'images/mine/icon_mine_highFunctionContent_left.png',
                    width: 30.w,
                    height: 30.w),
                Expanded(
                  child: Text(
                      '高级功能权益内容'.tr,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontSize: 24.sp, fontWeight: FontWeight.w600)),
                ),
                Image.asset(
                    'images/mine/icon_mine_highFunctionContent_right.png',
                    width: 30.w,
                    height: 30.w)
              ]),
        ),
        SizedBox(
          height: 10.h,
        ),
        GestureDetector(
          onTap: () {
            Navigator.pushNamed(context, Routers.webviewShowPage,
                arguments: <String, String>{
                  'url': XSConstantMacro.vipServiceDetailURL,
                  'title': '权益内容'.tr
                });
          },
          child: Container(
            margin: EdgeInsets.only(left: 20.w, right: 20.w),
            decoration: BoxDecoration(
              color: const Color(0xFFF5F5F5),
              borderRadius: BorderRadius.circular(15.w),
            ),
            child: Padding(
                padding: EdgeInsets.only(
                    left: 20.w, top: 10.h, right: 20.w, bottom: 10.h),
                child: Text(
                  '${'查看详情'.tr} >',
                  style: TextStyle(fontSize: 20.sp),
                )),
          ),
        ),
        SizedBox(
          height: 1.sw,
          child: GridView.count(
            padding: EdgeInsets.all(10.h),
            crossAxisCount: 3,
            mainAxisSpacing: 10.h,
            crossAxisSpacing: 8.h,
            // childAspectRatio: 1 / 0.5,
            physics: const NeverScrollableScrollPhysics(),
            children: <Widget>[
              _buildItem('images/mine/icon_mine_highFunctionContent_dxmb.png',
                  '短信模板'.tr),
              _buildItem('images/mine/icon_mine_highFunctionContent_yjmb.png',
                  '邮件模板'.tr),
              _buildItem('images/mine/icon_mine_highFunctionContent_sqgly.png',
                  '授权管理员'.tr),
              _buildItem('images/mine/icon_mine_highFunctionContent_sfz.png',
                  '锁分组'.tr),
              _buildItem('images/mine/icon_mine_highFunctionContent_bjft.png',
                  '群发钥匙'.tr),
              // _buildItem("images/mine/icon_mine_highFunctionContent_bjft.png",
              //     TranslationLoader.lanKeys!.markedHouseState!.tr),
              // _buildItem('images/mine/icon_mine_highFunctionContent_fkgj.png',
              //     TranslationLoader.lanKeys!.cardIssuingtool!.tr),
              // _buildItem(
              //     'images/mine/icon_mine_highFunctionContent_fkgj.png', '推送'),
              // _buildItem(
              //     'images/mine/icon_mine_highFunctionContent_fkgj.png', '考勤'),
              _buildItem('images/mine/icon_mine_highFunctionContent_bjft.png',
                  '导出锁数据'.tr),
              _buildItem('images/mine/icon_mine_highFunctionContent_bjft.png',
                  '常开模式'.tr),
              _buildItem('images/mine/icon_mine_highFunctionContent_bjft.png',
                  '一键开锁'.tr),
            ],
          ),
        ),
      ],
    );
  }

  Container _buildItem(String img, String title) {
    return Container(
      margin: EdgeInsets.all(10.h),
      padding: EdgeInsets.only(top: 20.h),
      decoration: BoxDecoration(
        color: const Color(0xFFF7F7FA),
        borderRadius: BorderRadius.all(Radius.circular(20.h)),
        // border: Border.all(width: 0.5.w, color: Colors.black)
      ),
      child: Column(
        // crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Image.asset(
            img,
            width: 70.w,
            height: 70.w,
          ),
          SizedBox(
            height: 10.h,
          ),
          Expanded(
            child: Text(
              title,
              // '啊上级领导发哈老师讲课代发哈金卡拉萨代发户籍卡三打哈发卡机啊哈受打击开发',
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontSize: 22.sp),
              textAlign: TextAlign.center,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buyNotes() {
    return Column(
      children: <Widget>[
        Container(
          // color: Colors.red,
          margin: EdgeInsets.only(left: 110.w, top: 50.h, right: 110.w),
          padding: EdgeInsets.only(left: 30.w),
          child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Image.asset(
                    'images/mine/icon_mine_highFunctionContent_left.png',
                    width: 40.w,
                    height: 40.w),
                SizedBox(
                  width: 10.w,
                ),
                Expanded(
                    child: Text(
                        '购买高级功能须知'.tr,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontSize: 24.sp, fontWeight: FontWeight.w600))),
                SizedBox(
                  width: 10.w,
                ),
                Image.asset(
                    'images/mine/icon_mine_highFunctionContent_right.png',
                    width: 40.w,
                    height: 40.w)
              ]),
        ),
        SizedBox(height: 20.h),
        Container(
          margin: EdgeInsets.only(left: 25.w, right: 25.w),
          decoration: BoxDecoration(
            color: const Color(0xFFF5F5F5),
            borderRadius: BorderRadius.circular(10.h),
          ),
          child: Padding(
              padding: EdgeInsets.only(
                  left: 30.w, top: 30.h, right: 30.w, bottom: 30.h),
              child: Text(
                '购买高级功能提示'.tr,
                style: TextStyle(fontSize: 20.sp),
              )),
        ),
        SizedBox(height: 20.h),
      ],
    );
  }

  Widget _bottomBtn() {
    return Container(
      margin: EdgeInsets.only(top: 30.h, bottom: 30.h),
      child: Row(
        children: <Widget>[
          Visibility(
            child: Container(
              height: 70.h,
              width: (1.sw - 20.w * 3) / 2,
              margin: EdgeInsets.only(left: 20.w),
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(width: 3.w, color: const Color(0xFF000635)),
                borderRadius: BorderRadius.circular(50.h),
              ),
              child: Center(
                  child: Text(
                '免费体验'.tr,
                style: TextStyle(fontSize: 24.sp),
              )),
            ),
          ),
          GestureDetector(
            onTap: () {
              Navigator.pushNamed(context, Routers.valueAddedServicesBuyPage,
                  arguments: 4);
            },
            child: Container(
              height: 70.h,
              width: (1.sw - 20.w * 3) / 2,
              // width: 1.sw-20.w*2,
              margin: EdgeInsets.only(left: 20.w, right: 20.w),
              decoration: BoxDecoration(
                color: const Color(0xFF424658),
                border: Border.all(width: 1, color: AppColors.mainColor),
                borderRadius: BorderRadius.circular(50.h),
              ),
              child: Center(
                  child: Text(
                '立即开通'.tr,
                style:
                    TextStyle(fontSize: 24.sp, color: const Color(0xFFF9CEAC)),
              )),
            ),
          ),
        ],
      ),
    );
  }
}