import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:zhiying_base_widget/pages/goods_share_page/goods_share_editor/goods_share_preview.dart';
import 'package:zhiying_comm/zhiying_comm.dart';

class GoodsShareEditor extends StatefulWidget {
  @override
  _GoodsShareEditorState createState() => _GoodsShareEditorState();
}

class _GoodsShareEditorState extends State<GoodsShareEditor> {
  TextEditingController _controller;

  @override
  void initState() {
    _controller = TextEditingController(
        text:
            '{标题}\n原价】{原价}元\n【券后价】{券后价}元\n【用嗨如意再省】{补贴省}元\n   -------------\n    復製{淘口令},\n    用【Tao·寳】下单\n   -------------\n    【商品链接】\n   {商品链接}');
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _createNav(),
      body: GestureDetector(
        onTap: () {
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              _createCommission(),
              _createInput(),
              _createDesc(),
              _createBottom(),
            ],
          ),
        ),
      ),
    );
  }

  // 导航栏
  Widget _createNav() {
    return CupertinoNavigationBar(
      border: Border(
        bottom: BorderSide(
          width: 0.0, // One physical pixel.
          style: BorderStyle.none,
        ),
      ),
      // backgroundColor: HexColor.fromHex('#ffffff'),
      leading: Navigator.canPop(context)
          ? GestureDetector(
              child: Container(
                padding: EdgeInsets.zero,
                child: Icon(
                  Icons.arrow_back_ios,
                  size: 20,
                ),
              ),
              onTap: () {
                if (Navigator.canPop(context)) {
                  Navigator.pop(context);
                }
              },
            )
          : Container(),
      middle: Text(
        '编辑模版',
        style: TextStyle(
          fontSize: 15,
          color: HexColor.fromHex('#333333'),
        ),
      ),
    );
  }

  Widget _createCommission() {
    return Container(
      margin: EdgeInsets.only(left: 12.5, right: 12.5, top: 4, bottom: 4),
      padding: EdgeInsets.only(left: 10, right: 10),
      width: double.infinity,
      height: 32,
      decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(8)),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            width: 20,
            height: 20,
            margin: EdgeInsets.only(right: 10),
            decoration: BoxDecoration(
                color: Colors.redAccent,
                borderRadius: BorderRadius.circular(10)),
          ),
          Text(
            '请不要修改 {} 之间的文字避免无法使用',
            style: TextStyle(
                fontSize: 13,
                fontWeight: FontWeight.bold,
                color: Color(0xff333333)),
          ),
        ],
      ),
    );
  }

  Widget _createBottom() {
    return SafeArea(
      child: Container(
        margin: EdgeInsets.only(left: 12.5, right: 12.5, top: 4, bottom: 4),
        child: Row(
          children: <Widget>[
            Expanded(
              child: Container(
                height: 36,
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(18),
                ),
                child: Center(
                  child: Text(
                    '恢复默认',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                margin: EdgeInsets.only(left: 5),
                height: 36,
                decoration: BoxDecoration(
                  color: Colors.orangeAccent,
                  borderRadius: BorderRadius.circular(18),
                ),
                child: Center(
                  child: Text(
                    '保存模板',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
            Expanded(
              child: GestureDetector(
                child: Container(
                  margin: EdgeInsets.only(left: 5),
                  height: 36,
                  decoration: BoxDecoration(
                    color: Colors.amber,
                    borderRadius: BorderRadius.circular(18),
                  ),
                  child: Center(
                    child: Text(
                      '预览模板',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
                onTap: () {
                  _showPreview();
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _createInput() {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.all(12),
      padding: EdgeInsets.all(10),
      height: 180,
      decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(8)),
      child: CupertinoTextField(
        controller: _controller,
        decoration: BoxDecoration(),
        keyboardType: TextInputType.multiline,
        style: TextStyle(
          fontSize: 12,
          fontWeight: FontWeight.bold,
          color: Color(0xff333333),
        ),
        maxLines: null,
      ),
    );
  }

  Widget _createDesc() {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.all(12),
      decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(8)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(top: 10),
            width: 70,
            height: 30,
            color: Colors.redAccent,
          ),
          Padding(
            padding: EdgeInsets.all(10),
            child: Text(
              '1.{标题}  表示商品标题\n2.{商品原价}  表示在售价格\n3.{券后价}  表示券后价格\n4.{补贴省}  表示平台补贴\n5.{推荐理由}  表示商品的推荐词，可为空\n6.{淘口令}  表示商品下单的口令\n7.{商品链接}  表示商品的链接',
              style: TextStyle(fontSize: 12, color: Color(0xff999999)),
            ),
          )
        ],
      ),
    );
  }

  void _showPreview() {
    showCupertinoModalPopup(
      context: context,
      builder: (context) => GoodsSharePreview(),
    );
  }
}
