/*
 * @Author: Aimee~
 * @Date: 2022-05-26 13:16:03
 * @LastEditTime: 2022-06-06 17:32:27
 * @LastEditors: Aimee
 * @FilePath: /gl_dao/lib/pages/store/buy/buy.dart
 * @Description: 订单确认页面
 */
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../main_color.dart';
import '../../address/adds_list/adds_list_page.dart';
// import '../../components/yy_alert_dialog_with_divider.dart';
import '../checkout/checkout_page.dart';

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

  @override
  State<BuyPages> createState() => _BuyPagesState();
}

class _BuyPagesState extends State<BuyPages> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: appBar(),
      body: Stack(
        children: [
          Padding(
            padding: const EdgeInsets.only(bottom: 60),
            child: ListView(
              children: [
                // 地址
                selectAddress(),
                // 分割线 -  供应商购买信息
                Container(
                  height: 16,
                  width: MediaQuery.of(context).size.width,
                  color: tMainBg,
                ),
                purchaseInfo(),
                Container(
                  height: 16,
                  width: MediaQuery.of(context).size.width,
                  color: tMainBg,
                ),
                purchaseInfo(),
              ],
            ),
          ),
          buttomButton(),
        ],
      ),
    );
  }

  // 自定义底部提交按钮
  Widget buttomButton() {
    return Positioned(
      bottom: 0,
      left: 0,
      child: Container(
        width: MediaQuery.of(context).size.width,
        color: Colors.white,
        child: SafeArea(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                flex: 1,
                child: Container(
                  padding: const EdgeInsets.only(left: 20),
                  decoration: BoxDecoration(
                    border: Border(
                      top: BorderSide(
                        color: Colors.black.withOpacity(0.1),
                      ),
                    ),
                  ),
                  width: double.infinity,
                  height: 59,
                  alignment: Alignment.centerLeft,
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      const Text(
                        '1999',
                        style: TextStyle(
                          fontSize: 26,
                          color: tMainRedColor,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      Container(
                        padding: const EdgeInsets.only(bottom: 2),
                        child: const Text(
                          ' DT积分',
                          style: TextStyle(
                            fontSize: 13,
                            color: tMainRedColor,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              GestureDetector(
                onTap: () {
                  Get.to(const CheckoutPage());
                  // yYAlertDialogWithDivider(
                  //   context,
                  //   title: '订单提交成功',
                  //   type: 'success',
                  //   text1: '继续采购',
                  //   text2: '查看订单',
                  //   onCancel: onCancel,
                  //   onSure: onSure,
                  // );
                },
                child: Container(
                  margin: const EdgeInsets.only(top: 1),
                  padding: const EdgeInsets.fromLTRB(26, 10, 26, 10),
                  height: 60,
                  alignment: Alignment.center,
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      colors: [tMainRedColor, tMainRedColor],
                    ),
                  ),
                  child: const Text(
                    '提交订单',
                    style: TextStyle(
                      fontSize: 17,
                      color: Colors.white,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  onCancel() {
    // ignore: avoid_print
    print('onCancel.....');
  }

  onSure() {
    // ignore: avoid_print
    print('onSure.....');
  }

  // 自定义购买信息
  Widget purchaseInfo() {
    return Container(
      width: MediaQuery.of(context).size.width - 32,
      margin: const EdgeInsets.only(
        top: 16,
        left: 16,
        right: 16,
        bottom: 0,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Container(
                height: 16,
                width: 4,
                color: tMainRedColor.withOpacity(0.5),
              ),
              const SizedBox(width: 6),
              const Text(
                '供应商名称',
                style: TextStyle(
                  fontSize: 16,
                  color: tTextColor333,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ],
          ),
          Container(
            width: double.infinity,
            height: 84,
            margin: const EdgeInsets.only(top: 10),
            padding: const EdgeInsets.all(10),
            decoration: const BoxDecoration(
              color: tMainBg,
              borderRadius: BorderRadius.all(
                Radius.circular(2),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    for (var i = 0; i < 10; i++)
                      if (i < 4)
                        Container(
                          margin: const EdgeInsets.only(right: 10),
                          decoration: const BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                  color: Colors.black12,
                                  offset: Offset(0.0, 2.0), //阴影xy轴偏移量
                                  blurRadius: 2.0, //阴影模糊程度
                                  spreadRadius: 2.0 //阴影扩散程度
                                  )
                            ],
                          ),
                          child: AspectRatio(
                            aspectRatio: 1.0 / 1.0, // 宽高比
                            child: ClipRRect(
                              child: Image.network(
                                'https://pics4.baidu.com/feed/a686c9177f3e6709d8176cf9c0a30a3af8dc5508.jpeg?token=b8f66e0570589dabfd098cd47d88927b',
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                        ),
                  ],
                ),
                Container(
                  padding: const EdgeInsets.only(left: 4),
                  child: Column(
                    children: const [
                      Text(
                        '...',
                        style: TextStyle(
                          color: tMainRedColor,
                          fontSize: 28,
                        ),
                      ),
                      SizedBox(height: 6),
                      Text(
                        '共4件',
                        style: TextStyle(
                          color: tTextColor333,
                          fontSize: 14,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: const [
                    Text(
                      '支付方式:',
                      style: TextStyle(
                        fontSize: 14,
                        color: tTextColor666,
                      ),
                    ),
                    SizedBox(width: 10),
                    Text(
                      'DT积分',
                      style: TextStyle(
                        fontSize: 14,
                        color: tTextColor333,
                      ),
                    ),
                  ],
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: const [
                    Text(
                      '总价:',
                      style: TextStyle(
                        fontSize: 14,
                        color: tTextColor666,
                      ),
                    ),
                    SizedBox(width: 4),
                    Text(
                      '1500',
                      style: TextStyle(
                        fontSize: 17,
                        color: tMainRedColor,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Container(
            padding: const EdgeInsets.only(
              top: 16,
              bottom: 16,
            ),
            child: TextField(
              cursorColor: Colors.black,
              maxLength: 150, // 文字最长
              maxLines: 3, // 最多显示三行
              decoration: InputDecoration(
                hintText: "请输入备注信息", // 提示语的表单
                hintStyle: const TextStyle(
                  fontSize: 14,
                ),
                filled: true,
                fillColor: tMainBg,
                border: const OutlineInputBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(4.0),
                  ),
                ),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.grey.withOpacity(0.3),
                    width: 1,
                    style: BorderStyle.solid,
                  ),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.grey.withOpacity(0.3),
                    width: 1,
                    style: BorderStyle.solid,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 自定义地址组件
  Widget selectAddress() {
    return Container(
      width: MediaQuery.of(context).size.width - 32,
      margin: const EdgeInsets.only(
        top: 16,
        left: 16,
        right: 16,
        bottom: 10,
      ),
      padding: const EdgeInsets.only(top: 10),
      child: Column(
        children: [
          Row(
            children: const [
              Text(
                '张三丰',
                style: TextStyle(
                  fontSize: 17,
                  color: tTextColor333,
                  fontWeight: FontWeight.w500,
                ),
              ),
              SizedBox(width: 16),
              Text(
                '18823456789',
                style: TextStyle(
                  fontSize: 17,
                  color: tTextColor333,
                  fontWeight: FontWeight.w500,
                ),
              ),
              SizedBox(width: 10),
              Icon(
                Icons.edit_location_alt_outlined,
                color: tMainRedColor,
                size: 17,
              )
            ],
          ),
          Container(
            padding: const EdgeInsets.only(
              top: 12,
              bottom: 8,
            ),
            child: const Divider(height: 1),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              SizedBox(
                width: MediaQuery.of(context).size.width - 140,
                child: const Text(
                  '张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰',
                  style: TextStyle(
                    fontSize: 14,
                    color: tTextColor666,
                  ),
                ),
              ),
              GestureDetector(
                onTap: () {
                  Get.to(const AddressListPage());
                },
                child: Row(
                  children: const [
                    Text(
                      '切换地址',
                      style: TextStyle(
                        fontSize: 14,
                        color: tTextColor333,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    Icon(
                      Icons.chevron_right,
                      color: tTextColor333,
                      size: 24,
                    )
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  //  自定义顶部导航
  PreferredSizeWidget appBar() {
    return AppBar(
      backgroundColor: tMainRedColor,
      title: const Text(
        '确认订单',
        style: TextStyle(
          color: Colors.white,
          fontSize: 18,
          fontWeight: FontWeight.w500,
        ),
      ),
    );
  }
}