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

import '../../../common/colors.dart';
import 'ticket_main_logic.dart';

class Ticket_mainPage extends GetView<Ticket_mainLogic> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: GetBuilder<Ticket_mainLogic>(builder: (logic) {
            return Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                InkWell(
                  child: Container(
                    width: 74,
                    height: 32,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        borderRadius: const BorderRadius.only(topLeft: Radius.circular(5), bottomLeft: Radius.circular(5)),
                        border: Border.all(color: ColorConfig.color548DEE),
                        color: logic.selectIndex == 0 ? ColorConfig.color548DEE : ColorConfig.white
                    ),
                    child: Text('账本管理', style: TextStyle(fontSize: 14, color: logic.selectIndex == 0 ? ColorConfig.white : ColorConfig.color548DEE)),
                  ),
                  onTap: (){ logic.changeSelect(0); },
                ),
                InkWell(
                  child: Container(
                    width: 74,
                    height: 32,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        borderRadius: const BorderRadius.only(topRight: Radius.circular(5), bottomRight: Radius.circular(5)),
                        border: Border.all(color: ColorConfig.color548DEE),
                        color: logic.selectIndex == 1 ? ColorConfig.color548DEE : ColorConfig.white
                    ),
                    child: Text('清账管理', style: TextStyle(fontSize: 14, color: logic.selectIndex == 1 ? ColorConfig.white : ColorConfig.color548DEE)),
                  ),
                  onTap: (){ logic.changeSelect(1); },
                )
              ],
            );
          },),
          centerTitle: true,
          backgroundColor: ColorConfig.white,
          shadowColor: Colors.transparent,
        ),
        body: GetBuilder<Ticket_mainLogic>(builder: (logic) {
          if(logic.selectIndex == 0) {
            return _buildAccountManage(context);
          } else {
            return _buildClearManage(context);
          }
        },)
    );
  }

  Widget _buildAccountManage(BuildContext context) {
    return Column(
      children: [
        Container(
          alignment: Alignment.centerLeft,
          height: 40,
          decoration: BoxDecoration(
            color: Colors.yellow,
            border: Border.all(color: Colors.orange, width: 1,)
          ),
          child: RichText(
            text: TextSpan(
              children: [
                WidgetSpan(child: SizedBox(width: 15,)),
                WidgetSpan(
                    alignment: PlaceholderAlignment.middle,
                    child: Icon(Icons.info_outline, color: ColorConfig.color99, size: 20,)
                ),
                WidgetSpan(child: SizedBox(width: 10,)),
                TextSpan(
                  text: "账本/礼金是什么?",
                  style: TextStyle(color: ColorConfig.color66, fontSize: 14)
                ),
                WidgetSpan(child: SizedBox(width: 12,)),
                TextSpan(
                    text: "查看详情>>",
                    style: TextStyle(color: ColorConfig.color548DEE, fontSize: 14)
                ),
              ]
            ),
          ),
        ),
        Container(
          color: ColorConfig.colorF0F0F0,
          alignment: Alignment.centerLeft,
          padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 15),
          child: Row(
            children: [
              Expanded(
                  child: Container(
                    height: 36,
                    decoration: BoxDecoration(
                      borderRadius: const BorderRadius.all(Radius.circular(4)),
                      border: Border.all(color: ColorConfig.colorCBCBCB, width: 1)
                    ),
                    padding: const EdgeInsets.symmetric(horizontal: 8),
                    child: TextField(
                      focusNode: controller.focusNode,
                      controller: controller.textController,
                      textInputAction: TextInputAction.search,
                      decoration: InputDecoration(
                        hintText: '请输入商品关键词'.tr,
                        hintStyle: const TextStyle(color: ColorConfig.color99, fontSize: 14),
                        hintMaxLines: 1,
                        border: const OutlineInputBorder(
                            borderSide: BorderSide(width: 0, color: Colors.transparent)
                        ),
                        contentPadding: const EdgeInsets.only(top: 0, bottom: 0),
                        enabledBorder: const OutlineInputBorder(
                          borderSide: BorderSide(width: 0, color: Colors.transparent)
                        ),
                        focusedBorder: const OutlineInputBorder(
                            borderSide: BorderSide(width: 0, color: Colors.transparent)
                        ),
                        disabledBorder: const OutlineInputBorder(
                            borderSide: BorderSide(width: 0, color: Colors.transparent)
                        ),
                      ),
                      onSubmitted: (s) { controller.searchAction(); },
                      onChanged: (s) {
                        controller.changeToolForWords(s);
                      },
                    ),
                  )
              ),
              const SizedBox(width: 6,),
              Container(
                height: 36,
                width: 36,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: ColorConfig.color548DEE,
                  borderRadius: BorderRadius.all(Radius.circular(5))
                ),
                child: Icon(Icons.search, color: ColorConfig.white, size: 20,),
              )
            ],
          ),
        ),

        Container(
          alignment: Alignment.centerLeft,
          color: ColorConfig.colorF0F0F0,
          padding: const EdgeInsets.only(left: 15, bottom: 15),
          child: const Text('账本用户:  1人, 账本总计: 999.99', style: TextStyle(color: ColorConfig.color66),),
        ),
        const Divider(color: ColorConfig.colorCBCBCB, height: 0.5,),
        Expanded(
            child: ListView.builder(
                itemBuilder: (item, index) {
                  return Column(
                    children: [
                      InkWell(
                        child: Container(
                          color: ColorConfig.white,
                          padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 15),
                          child: Row(
                            children: [
                              Expanded(
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text("17栋2单元1002", style: TextStyle(color: ColorConfig.color548DEE, fontSize: 15),),
                                      SizedBox(height: 5,),
                                      Text('账本: 12.00元', style: TextStyle(color: ColorConfig.color99, fontSize: 13))
                                    ],
                                  )
                              ),
                              const Icon(Icons.keyboard_arrow_right, size: 24, color: ColorConfig.color99,)
                            ],
                          ),
                        ),
                        onTap: () {
                          controller.jumpToDetail();
                        },
                      ),
                      const Divider(color: ColorConfig.colorCBCBCB, height: 0.5,),
                    ],
                  );
                },
              itemCount: 3,
            )
        )
      ],
    );
  }

  Widget _buildClearManage(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Divider(color: ColorConfig.colorCBCBCB, height: 0.5,),
        Container(
          height: 44,
          color: ColorConfig.white,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                RichText(
                  text: TextSpan(
                      text: '允许清账方式',
                      style: TextStyle(color: ColorConfig.color_999, fontSize: 14),
                      children: [
                        WidgetSpan(child: SizedBox(width: 10,)),
                        TextSpan(text: "微信、支付宝、现金、银行卡", style: TextStyle(fontSize: 14, color: ColorConfig.color33))
                      ]
                  ),
                ),
                Text('修改>', style: TextStyle(color: ColorConfig.color548DEE, fontSize: 14),)
              ],
            ),
          ),
        ),
        const Divider(color: ColorConfig.colorCBCBCB, height: 0.5,),
        Container(
          height: 44,
          color: ColorConfig.white,
          alignment: Alignment.center,
          child: Row(
            children: [
              Expanded(
                flex: 1,
                child: Align(
                  alignment: Alignment.center,
                  child: RichText(
                    text: TextSpan(
                        text: "近7天",
                        style: TextStyle(color: ColorConfig.color66, fontSize: 13),
                        children: [
                          WidgetSpan(
                              alignment: PlaceholderAlignment.middle,
                              child: Icon(Icons.arrow_drop_down, size: 22, color: ColorConfig.color66,)
                          )
                        ]
                    ),
                  ),
                ),
              ),
              const VerticalDivider(width: 1, color: ColorConfig.colorCBCBCB, indent: 14, endIndent: 14,),
              Expanded(
                flex: 1,
                child: Align(
                  alignment: Alignment.center,
                  child: RichText(
                    text: TextSpan(
                        text: "待处理",
                        style: TextStyle(color: ColorConfig.color66, fontSize: 13),
                        children: [
                          WidgetSpan(
                              alignment: PlaceholderAlignment.middle,
                              child: Icon(Icons.arrow_drop_down, size: 22, color: ColorConfig.color66,)
                          )
                        ]
                    ),
                  ),
                ),
              ),
              const VerticalDivider(width: 1, color: ColorConfig.colorCBCBCB, indent: 14, endIndent: 14,),
              Expanded(
                flex: 1,
                child: Align(
                  alignment: Alignment.center,
                  child: RichText(
                    text: TextSpan(
                        text: "全部清账方式",
                        style: TextStyle(color: ColorConfig.color66, fontSize: 13),
                        children: [
                          WidgetSpan(
                              alignment: PlaceholderAlignment.middle,
                              child: Icon(Icons.arrow_drop_down, size: 22, color: ColorConfig.color66,)
                          )
                        ]
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
        Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 12, vertical: 12),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("笔数: 0笔  合计金额: 0.00元", style: TextStyle(fontSize: 14, color: ColorConfig.color66),),
                      SizedBox(height: 3,),
                      Text("微信: 0.00  支付宝: 0.00  现金: 0.00  银行卡: 0.00", style: TextStyle(fontSize: 14, color: ColorConfig.color66),),
                    ],
                  ),
                ),
                Expanded(
                    child: Align(
                      alignment: Alignment.center,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(Icons.not_interested, size: 100, color: ColorConfig.color99,),
                          Text("没有匹配结果, 建议更换条件再查询", style: TextStyle(color: ColorConfig.color99),),
                          SizedBox(height: 100,),
                        ],
                      ),
                    )
                )
              ],
            )
        )
      ],
    );
  }
}