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

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

class Sale_managePage extends GetView<Sale_manageLogic> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('销售查询'),
          centerTitle: true,
          backgroundColor: ColorConfig.themeColor,
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                alignment: Alignment.center,
                height: 40,
                child: const Text('当月总销量', style: TextStyle(fontSize: 18, color: ColorConfig.color33, fontWeight: FontWeight.bold),),
              ),
              const SizedBox(height: 20,),
              Container(
                alignment: Alignment.centerLeft,
                height: 300,
                padding: const EdgeInsets.symmetric(horizontal: 8),
                child: LineChart(
                  sampleData1,
                  swapAnimationDuration: const Duration(milliseconds: 250),
                ),
              ),

              Container(
                alignment: Alignment.center,
                height: 40,
                child: const Text('销售员排名', style: TextStyle(fontSize: 18, color: ColorConfig.color33, fontWeight: FontWeight.bold),),
              ),
              const SizedBox(height: 20,),
              const Divider(height: 1, color: ColorConfig.colorCBCBCB,),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('第一名', style: TextStyle(color: ColorConfig.themeColor, fontSize: 16),),
                    Text('张三(2000张/12000元)', style: TextStyle(color: ColorConfig.color33, fontSize: 16),),
                  ],
                ),
              ),
              const Divider(height: 1, color: ColorConfig.colorCBCBCB,),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('第二名', style: TextStyle(color: ColorConfig.themeColor, fontSize: 16),),
                    Text('李四(1800张/11000元)', style: TextStyle(color: ColorConfig.color33, fontSize: 16),),
                  ],
                ),
              ),
              const Divider(height: 1, color: ColorConfig.colorCBCBCB,),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('第三名', style: TextStyle(color: ColorConfig.themeColor, fontSize: 16),),
                    Text('王五(1600张/9000元)', style: TextStyle(color: ColorConfig.color33, fontSize: 16),),
                  ],
                ),
              ),
              const Divider(height: 1, color: ColorConfig.colorCBCBCB,),

              const SizedBox(height: 20,),
              Container(
                alignment: Alignment.center,
                height: 40,
                child: const Text('畅销排行', style: TextStyle(fontSize: 18, color: ColorConfig.color33, fontWeight: FontWeight.bold),),
              ),

              const SizedBox(height: 20,),
              const Divider(height: 1, color: ColorConfig.colorCBCBCB,),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('第一名', style: TextStyle(color: ColorConfig.themeColor, fontSize: 16),),
                    Text('10元面值刮刮乐(3000张)', style: TextStyle(color: ColorConfig.color33, fontSize: 16),),
                  ],
                ),
              ),
              const Divider(height: 1, color: ColorConfig.colorCBCBCB,),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('第二名', style: TextStyle(color: ColorConfig.themeColor, fontSize: 16),),
                    Text('20元面值刮刮乐(1200张)', style: TextStyle(color: ColorConfig.color33, fontSize: 16),),
                  ],
                ),
              ),
              const Divider(height: 1, color: ColorConfig.colorCBCBCB,),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('第三名', style: TextStyle(color: ColorConfig.themeColor, fontSize: 16),),
                    Text('5元面值刮刮乐(500张)', style: TextStyle(color: ColorConfig.color33, fontSize: 16),),
                  ],
                ),
              ),
              const Divider(height: 1, color: ColorConfig.colorCBCBCB,),
              const SizedBox(height: 200,),
            ],
          ),
        )
    );
  }

  LineChartData get sampleData1 => LineChartData(
    lineTouchData: lineTouchData1,
    gridData: gridData,
    titlesData: titlesData1,
    borderData: borderData,
    lineBarsData: lineBarsData1,
    minX: 0,
    maxX: 30,
    maxY: 10,
    minY: 0,
  );

  LineTouchData get lineTouchData1 => LineTouchData(
    handleBuiltInTouches: true,
    touchTooltipData: LineTouchTooltipData(
      tooltipBgColor: Colors.red.withOpacity(0.8),
    ),
  );

  FlTitlesData get titlesData1 => FlTitlesData(
    bottomTitles: AxisTitles(
      sideTitles: bottomTitles,
    ),
    rightTitles: AxisTitles(
      sideTitles: SideTitles(showTitles: false),
    ),
    topTitles: AxisTitles(
      sideTitles: SideTitles(showTitles: false),
    ),
    leftTitles: AxisTitles(
      sideTitles: leftTitles(),
    ),
  );

  List<LineChartBarData> get lineBarsData1 => [
    lineChartBarData1_1
  ];

  Widget leftTitleWidgets(double value, TitleMeta meta) {
    const style = TextStyle( fontSize: 14,);
    String text;
    switch (value.toInt()) {
      case 1:
        text = '5K';
        break;
      case 2:
        text = '10K';
        break;
      case 3:
        text = '15K';
        break;
      case 4:
        text = '20K';
        break;
      case 5:
        text = '25K';
        break;
      case 6:
        text = '30K';
        break;
      case 7:
        text = '35K';
        break;
      case 8:
        text = '40K';
        break;
      case 9:
        text = '45K';
        break;
      case 10:
        text = '50K';
        break;
      default:
        return Container();
    }

    return Text(text, style: style, textAlign: TextAlign.center);
  }

  SideTitles leftTitles() => SideTitles(
    getTitlesWidget: leftTitleWidgets,
    showTitles: true,
    interval: 1,
    reservedSize: 40,
  );

  Widget bottomTitleWidgets(double value, TitleMeta meta) {
    const style = TextStyle( fontSize: 16,);
    Widget text;
    switch (value.toInt()) {
      case 2:
        text = const Text('5号', style: style);
        break;
      case 7:
        text = const Text('10号', style: style);
        break;
      case 12:
        text = const Text('15号', style: style);
        break;
      case 17:
        text = const Text('20号', style: style);
        break;
      case 23:
        text = const Text('25号', style: style);
        break;
      case 30:
        text = const Text('30号', style: style);
        break;
      default:
        text = const Text('');
        break;
    }

    return SideTitleWidget(
      axisSide: meta.axisSide,
      space: 5,
      child: text,
    );
  }

  SideTitles get bottomTitles => SideTitles(
    showTitles: true,
    reservedSize: 35,
    interval: 1,
    getTitlesWidget: bottomTitleWidgets,
  );

  FlGridData get gridData => FlGridData(show: true, verticalInterval: 1, horizontalInterval: 1);

  FlBorderData get borderData => FlBorderData(
    show: true,
    border: const Border(
      bottom: BorderSide(color: Colors.black, width: 1),
      left: BorderSide(color: Colors.black, width: 1),
      right: BorderSide(color: Colors.transparent),
      top: BorderSide(color: Colors.transparent),
    ),
  );

  LineChartBarData get lineChartBarData1_1 => LineChartBarData(
    isCurved: true,
    color: Colors.green,
    barWidth: 1,
    isStrokeCapRound: true,
    dotData: FlDotData(show: false),
    belowBarData: BarAreaData(show: false),
    spots: const [
      FlSpot(1, 0),
      FlSpot(3, 0.4),
      FlSpot(5, 0.8),
      FlSpot(7, 1.2),
      FlSpot(10, 1.6),
      FlSpot(12, 2.1),
      FlSpot(13, 2.5),
      FlSpot(16, 2.9),
      FlSpot(18, 3.5),
      FlSpot(20, 4.2),
      FlSpot(22, 5.8),
      FlSpot(26, 7.1),
      FlSpot(30, 8.2),
    ],
  );
}