import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:zhiying_comm/zhiying_comm.dart';


class VipCenterUpgradeDialogPage extends StatefulWidget {
  @override
  _VipCenterUpgradeDialogPageState createState() => _VipCenterUpgradeDialogPageState();
}

class _VipCenterUpgradeDialogPageState extends State<VipCenterUpgradeDialogPage> {

  bool _agreeLicense = false;

  /// 关闭
  void _onClickClose(BuildContext context) {
    Navigator.pop(context);
  }

  /// 点击同意协议
  void _onClickAgreeLicense(){
    setState(() {
      _agreeLicense = !_agreeLicense;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        Container(
          padding: const EdgeInsets.only(top: 50),
          width: double.infinity,
          child: Stack(
            children: <Widget>[
              /// 主要视图
              _buildMainWidget(context),

              /// 皇冠
              Align(alignment: Alignment.topCenter, child: _buildCrownWidget()),
            ],
          ),
        ),
      ],
    );
  }

  /// 主视图
  Widget _buildMainWidget(context) {
    return Container(
      padding: const EdgeInsets.only(bottom: 20),
      // height: 456,
      width: double.infinity,
      decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.only(topRight: Radius.circular(10), topLeft: Radius.circular(10))),
      child: Column(
        children: <Widget>[
          /// 关闭按钮
          Padding(padding: const EdgeInsets.only(top: 15, right: 15), child: Align(alignment: Alignment.topRight, child: _buildCloseButtonWidget(context))),

          /// 会员升级
          const SizedBox(height: 14),
          Text('会员升级', style: TextStyle(fontSize: 18, color: HexColor.fromHex('#333333'), fontWeight: FontWeight.bold)),

          /// 当前等级
          const SizedBox(height: 10),
          RichText(
              text: TextSpan(children: [
                TextSpan(text: '当前等级：', style: TextStyle(color: HexColor.fromHex('#666666'), fontSize: 16)),
                TextSpan(text: '普通会员', style: TextStyle(color: HexColor.fromHex('#666666'), fontSize: 16))
              ])),

          /// 会员等级
          const SizedBox(height: 10),
          RichText(
            text: TextSpan(children: [
              TextSpan(text: '升级为：', style: TextStyle(color: HexColor.fromHex('#666666'), fontSize: 16)),
              TextSpan(text: '初级会员', style: TextStyle(color: HexColor.fromHex('#666666'), fontSize: 16, fontWeight: FontWeight.bold))
            ]),
          ),

          ///  套餐
          const SizedBox(height: 30),
          Padding(
              padding: const EdgeInsets.only(left: 12.5),
              child: Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    '请选择适合您的会员套餐：',
                    style: TextStyle(fontSize: 14, color: HexColor.fromHex('#999999')),
                  ))),

          /// 套餐列表
          const SizedBox(height: 15),
          _buildDataWidget(),

          /// 协议提示
          const SizedBox(height: 15),
          Padding(padding: const EdgeInsets.only(left: 12.5), child: Align(alignment: Alignment.centerLeft, child: _buildAutoTipWidget())),

          /// 确认按钮
          const SizedBox(height: 30),
          _buildConfirmButtonWidget(),
        ],
      ),
    );
  }

  /// 套餐数据
  Widget _buildDataWidget() {
    return Container(
      height: 120,
      width: double.infinity,
      child: ListView.builder(
        shrinkWrap: true,
        itemBuilder: (context, index) {
          return Container(
            margin: EdgeInsets.only(right: 15, left: index == 0 ? 12.5 :0),
            height: double.infinity,
            width: 85,
            color: Colors.red,
          );
        },
        itemCount: 8,
        scrollDirection: Axis.horizontal,
        itemExtent: 120,
      ),
    );
  }

  /// 皇冠
  Widget _buildCrownWidget() {
    return Transform.translate(
      offset: Offset(0, -50),
      child: Container(
        width: 210,
        height: 90,
        color: HexColor.fromHex('#eeF0D199'),
      ),
    );
  }

  /// 关闭按钮
  Widget _buildCloseButtonWidget(context) {
    return GestureDetector(
      onTap: () => _onClickClose(context),
      behavior: HitTestBehavior.opaque,
      child: Container(
        width: 21,
        height: 21,
        color: Colors.red,
      ),
    );
  }

  /// 同意自动续费提示
  Widget _buildAutoTipWidget() {
    return GestureDetector(
      onTap: ()=> _onClickAgreeLicense(),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            width: 12,
            height: 12,
            color: !_agreeLicense ? Colors.yellowAccent: Colors.red,
          ),
          const SizedBox(width: 4.5),
          Text(
            '同意《自动续费协议》开启自动续费',
            style: TextStyle(fontSize: 12, color: HexColor.fromHex('#999999')),
          ),
        ],
      ),
    );
  }

  /// 立即享受会员特权按钮
  Widget _buildConfirmButtonWidget() {
    return Container(
      height: 50,
      width: double.infinity,
      margin: const EdgeInsets.only(left: 47.5, right: 47.5),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(50 / 2),
        color: Colors.red,
      ),
    );
  }
}

