/*
 * @Author: Aimee~
 * @Date: 2022-05-26 13:16:03
 * @LastEditTime: 2022-06-01 17:58:47
 * @LastEditors: Aimee
 * @FilePath: /gl_dao/lib/pages/vip/vip.dart
 * @Description: 共力者开通及升级页面
 */

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../main_color.dart';

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

  @override
  State<VipPages> createState() => _VipPagesState();
}

class _VipPagesState extends State<VipPages> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: tVipBg,
      body: Stack(
        children: [
          Container(
            padding: const EdgeInsets.only(bottom: 70),
            child: ListView(
              padding: const EdgeInsets.all(0),
              children: [
                Container(
                  padding: const EdgeInsets.only(
                    top: 144,
                    left: 16,
                    right: 16,
                    bottom: 16,
                  ),
                  width: MediaQuery.of(context).size.width,
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                      alignment: Alignment.topRight,
                      image: AssetImage('assets/images/vip_bg.png'),
                      fit: BoxFit.contain,
                      repeat: ImageRepeat.noRepeat,
                    ),
                  ),
                  child: Column(
                    children: [
                      // 用户当前身份
                      userRole(),
                      // 会员卡片
                      vipInfo(),
                      // 自定义特权介绍
                      vipIndruce(),
                    ],
                  ),
                ),
              ],
            ),
          ),
          bottomBtn(),
          // demo(0.5),
        ],
      ),
    );
  }

  // 自定义特权介绍
  Widget vipIndruce() {
    return Container(
      margin: const EdgeInsets.only(
        top: 30,
      ),
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        border: Border.all(
          color: tVip4.withOpacity(0.4),
        ),
        borderRadius: const BorderRadius.all(Radius.circular(10)),
      ),
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Container(
            padding: const EdgeInsets.only(
              top: 36,
              bottom: 20,
              left: 30,
              right: 30,
            ),
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.only(bottom: 16),
                  child: Row(
                    children: const [
                      Icon(
                        Icons.fiber_manual_record,
                        size: 4,
                        color: Colors.white,
                      ),
                      SizedBox(width: 8),
                      Expanded(
                        flex: 1,
                        child: Text(
                          '权益说明权益说明权益说明权益说明',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 12,
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(bottom: 16),
                  child: Row(
                    children: const [
                      Icon(
                        Icons.fiber_manual_record,
                        size: 4,
                        color: Colors.white,
                      ),
                      SizedBox(width: 8),
                      Expanded(
                        flex: 1,
                        child: Text(
                          '权益说明权益说明权益说明权益说明',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 12,
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(bottom: 16),
                  child: Row(
                    children: const [
                      Icon(
                        Icons.fiber_manual_record,
                        size: 4,
                        color: Colors.white,
                      ),
                      SizedBox(width: 8),
                      Expanded(
                        flex: 1,
                        child: Text(
                          '权益说明权益说明权益说明权益说明',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 12,
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(bottom: 16),
                  child: Row(
                    children: const [
                      Icon(
                        Icons.fiber_manual_record,
                        size: 4,
                        color: Colors.white,
                      ),
                      SizedBox(width: 8),
                      Expanded(
                        flex: 1,
                        child: Text(
                          '权益说明权益说明权益说明权益说明',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 12,
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(bottom: 16),
                  child: Row(
                    children: const [
                      Icon(
                        Icons.fiber_manual_record,
                        size: 4,
                        color: Colors.white,
                      ),
                      SizedBox(width: 8),
                      Expanded(
                        flex: 1,
                        child: Text(
                          '权益说明权益说明权益说明权益说明',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 12,
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
          Positioned(
            left: Get.width / 2 - 75,
            top: -20,
            child: Container(
              width: 100,
              height: 40,
              color: tVipBg,
              alignment: Alignment.center,
              child: const Text(
                '权益说明',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.w500,
                  color: tVip4,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  // 自定义会员卡片
  Widget vipInfo() {
    return Container(
      padding: const EdgeInsets.only(left: 22, right: 22, top: 10, bottom: 10),
      height: 210,
      margin: const EdgeInsets.only(top: 36),
      width: MediaQuery.of(context).size.width,
      decoration: const BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(10)),
        gradient: LinearGradient(
          colors: [tVip1, tVip2],
        ),
      ),
      child: Column(
        children: [
          const SizedBox(height: 10),
          Row(
            children: [
              ShaderMask(
                shaderCallback: (Rect bounds) {
                  return const LinearGradient(
                    colors: <Color>[tVip4, tVip3],
                    tileMode: TileMode.mirror,
                  ).createShader(bounds);
                },
                blendMode: BlendMode.srcATop,
                child: const Center(
                  child: Text(
                    'V6',
                    style: TextStyle(
                      fontSize: 38,
                      fontWeight: FontWeight.bold,
                      color: tVip4,
                    ),
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  padding: const EdgeInsets.only(
                    left: 12,
                    right: 20,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        '还差100023点升级到会员',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 12,
                        ),
                      ),
                      const SizedBox(height: 6),
                      Container(
                        // padding: const EdgeInsets.only(top: 10),
                        decoration: const BoxDecoration(
                          borderRadius: BorderRadius.all(
                            Radius.circular(10),
                          ),
                        ),
                        height: 6,
                        child: const LinearProgressIndicator(
                          value: 5 / 10,
                          color: tVip4,
                          backgroundColor: tVip1,
                        ),
                      ),
                      const SizedBox(height: 4),
                      Text(
                        '12222/33333',
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.5),
                          fontSize: 10,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Container(
                padding: const EdgeInsets.only(
                  top: 6,
                  bottom: 6,
                  left: 10,
                  right: 10,
                ),
                decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(
                    Radius.circular(50),
                  ),
                  gradient: LinearGradient(
                    colors: [tVip3, tVip4],
                  ),
                ),
                child: const Text(
                  '立即升级',
                  style: TextStyle(
                    fontSize: 13,
                    color: tVip2,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              )
            ],
          ),
          Container(
            padding: const EdgeInsets.only(
              top: 20,
              bottom: 10,
            ),
            child: Row(
              children: [
                Text(
                  'VIP会员开通后',
                  style: TextStyle(
                    color: Colors.white.withOpacity(0.7),
                    fontSize: 13,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                Text(
                  '可获得如下奖励',
                  style: TextStyle(
                    color: tVip4.withOpacity(0.7),
                    fontSize: 13,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ],
            ),
          ),
          Container(
            padding: const EdgeInsets.only(
              left: 4,
              right: 4,
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  children: [
                    Image.asset(
                      'assets/images/vip_item_1.png',
                      width: 50,
                      height: 50,
                      fit: BoxFit.cover,
                    ),
                    const SizedBox(height: 10),
                    const Text(
                      '共力值增长',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 13,
                      ),
                    ),
                  ],
                ),
                Column(
                  children: [
                    Image.asset(
                      'assets/images/vip_item_2.png',
                      width: 50,
                      height: 50,
                      fit: BoxFit.cover,
                    ),
                    const SizedBox(height: 10),
                    const Text(
                      '加入部落权',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 13,
                      ),
                    )
                  ],
                ),
                Column(
                  children: [
                    Image.asset(
                      'assets/images/vip_item_3.png',
                      width: 50,
                      height: 50,
                      fit: BoxFit.cover,
                    ),
                    const SizedBox(height: 10),
                    const Text(
                      '家庭会员权',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 13,
                      ),
                    )
                  ],
                ),
                Column(
                  children: [
                    Image.asset(
                      'assets/images/vip_item_4.png',
                      width: 50,
                      height: 50,
                      fit: BoxFit.cover,
                    ),
                    const SizedBox(height: 10),
                    const Text(
                      '角色升级权',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 13,
                      ),
                    )
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  // 自定义用户当前身份
  Widget userRole() {
    return Row(
      children: [
        const CircleAvatar(
          backgroundImage: NetworkImage(
            "https://www.itying.com/images/flutter/1.png",
          ),
        ),
        const SizedBox(width: 8),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                const Text(
                  'BAOTU',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                const SizedBox(width: 20),
                Stack(
                  clipBehavior: Clip.none,
                  children: [
                    Container(
                      padding: const EdgeInsets.only(
                        left: 12,
                        right: 8,
                      ),
                      decoration: const BoxDecoration(
                        borderRadius: BorderRadius.only(
                          bottomRight: Radius.circular(10),
                        ),
                        color: tVip4,
                      ),
                      child: const Text(
                        '共力者',
                        style: TextStyle(
                          color: Color.fromARGB(255, 89, 47, 14),
                          fontWeight: FontWeight.bold,
                          fontSize: 11,
                        ),
                      ),
                    ),
                    Positioned(
                      left: -10,
                      top: -2,
                      child: Image.asset(
                        'assets/images/vip_role.png',
                        fit: BoxFit.cover,
                        width: 22,
                      ),
                    ),
                  ],
                )
              ],
            ),
            const SizedBox(height: 2),
            Row(
              children: [
                Text(
                  '开通后即',
                  style: TextStyle(
                    color: Colors.white.withOpacity(0.7),
                    fontSize: 12,
                  ),
                ),
                Text(
                  ' 永久会员',
                  style: TextStyle(
                    color: tVip4.withOpacity(0.7),
                    fontSize: 12,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                Text(
                  ' 身份',
                  style: TextStyle(
                    color: Colors.white.withOpacity(0.7),
                    fontSize: 12,
                  ),
                ),
              ],
            )
          ],
        )
      ],
    );
  }

  // 自定义底部按钮
  Widget bottomBtn() {
    return Positioned(
      bottom: 0,
      left: 0,
      child: Container(
        height: 100,
        width: MediaQuery.of(context).size.width,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [tVip1, tVip2],
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: MediaQuery.of(context).size.width * 0.7,
              height: 46,
              alignment: Alignment.center,
              decoration: const BoxDecoration(
                borderRadius: BorderRadius.all(
                  Radius.circular(50),
                ),
                gradient: LinearGradient(
                  colors: [tVip3, tVip4],
                ),
              ),
              child: const Text(
                '立即购买',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget demo(double opci) {
    return ListView(
      children: [
        SizedBox(
          width: MediaQuery.of(context).size.width,
          child: Opacity(
            opacity: opci,
            child: Image.asset(
              'assets/images/5fbf2512c344f.jpg',
              width: MediaQuery.of(context).size.width,
              fit: BoxFit.cover,
              alignment: Alignment.bottomCenter,
            ),
          ),
        )
      ],
    );
  }
}