import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:zhiying_comm/zhiying_comm.dart';

// 商品详情分享，合成模板
class GoodsShareTemplate extends StatelessWidget {
  final GlobalKey contentKey;

  const GoodsShareTemplate({Key key, this.contentKey}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return OverflowBox(
      maxHeight: double.infinity,
      maxWidth: 375, //固定宽度，保证所以手机下生成的模板一致
      child: RepaintBoundary(
        key: contentKey, // 用于导出模板样式的key
        child: Container(
          // 模板的内容
          width: double.infinity,
          padding: EdgeInsets.all(20),
          color: Colors.white,
          child: Column(
            children: <Widget>[
              _createHeader(),
              _createImage(),
              _createBottom(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _createHeader() {
    return Row(
      children: <Widget>[
        Container(
          width: 30,
          height: 30,
          decoration: BoxDecoration(
              color: Colors.redAccent, borderRadius: BorderRadius.circular(15)),
        ),
        Expanded(
          child: Container(
            margin: EdgeInsets.only(left: 10, right: 10),
            height: 30,
            width: 80,
            color: Colors.redAccent,
          ),
        ),
        Container(
          padding: EdgeInsets.only(left: 10, right: 10, top: 8, bottom: 8),
          decoration: BoxDecoration(
              color: Color(0xfff7f7f7),
              borderRadius: BorderRadius.circular(30)),
          child: Text(
            '邀请码  SDWE45',
            style: TextStyle(fontSize: 11, fontWeight: FontWeight.bold),
          ),
        )
      ],
    );
  }

  // 商品图
  Widget _createImage() {
    return Padding(
      padding: const EdgeInsets.only(top: 20, bottom: 20),
      child: AspectRatio(
        aspectRatio: 1,
        child: Container(
          width: double.infinity,
          child: CachedNetworkImage(
            imageUrl:
                'https://img.alicdn.com/bao/uploaded/i1/2200818126974/O1CN01HvqWcg21O8mq9EPwf_!!0-item_pic.jpg_500x500.jpg',
            fit: BoxFit.fitWidth,
          ),
          // color: Colors.redAccent,
        ),
      ),
    );
  }

  Widget _createBottom() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Expanded(
          child: Container(
            margin: EdgeInsets.only(right: 20),
            height: 160,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                _createTitle(),
                Expanded(
                  child: Container(),
                ),
                _createLeftBottom()
              ],
            ),
          ),
        ),
        Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(bottom: 12),
              width: 124,
              height: 124,
              // color: Colors.redAccent,
              child: CachedNetworkImage(
                imageUrl:
                    'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1410436569,3239963707&fm=26&gp=0.jpg',
              ),
            ),
            Container(
              child: Row(
                children: <Widget>[
                  Container(
                    width: 14,
                    height: 16,
                    color: Colors.redAccent,
                    margin: EdgeInsets.only(right: 4),
                  ),
                  Text(
                    '长按识别领取优惠',
                    style: TextStyle(
                      fontSize: 11,
                      color: Color(0xffb3b3b3),
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ],
    );
  }

  Widget _createTitle() {
    List<InlineSpan> list = List();
    list.add(WidgetSpan(
      child: Container(
        padding: EdgeInsets.only(left: 2, right: 2, top: 3, bottom: 3),
        margin: EdgeInsets.only(right: 4),
        child: Text(
          '淘宝',
          style: TextStyle(
            fontSize: 9,
            height: 1,
            color: Colors.white,
          ),
        ),
        decoration: BoxDecoration(
            color: Colors.redAccent, borderRadius: BorderRadius.circular(2.5)),
      ),
    ));
    list.add(TextSpan(
      text: '小米10至尊纪念版5g手机120X变焦骁龙865小米官方旗舰店小米手机',
      style: TextStyle(
          fontSize: 14,
          color: HexColor.fromHex('#333333'),
          fontWeight: FontWeight.bold),
    ));
    return RichText(
      maxLines: 3,
      overflow: TextOverflow.ellipsis,
      text: TextSpan(children: list),
    );
  }

  Widget _createLeftBottom() {
    return Row(
      children: <Widget>[
        Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(right: 5),
              padding: EdgeInsets.only(left: 10, right: 10, top: 3, bottom: 3),
              decoration: BoxDecoration(
                color: Colors.redAccent,
                borderRadius: BorderRadius.circular(2.5),
              ),
              child: Text(
                '到手价',
                textAlign: TextAlign.center,
                maxLines: 1,
                style: TextStyle(
                  height: 1,
                  fontSize: 11,
                  color: HexColor.fromHex('#ffffff'),
                ),
              ),
            ),
            _createPrice(),
          ],
        ),
        Expanded(
          child: Container(),
        ),
        Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(right: 5, bottom: 8),
              padding: EdgeInsets.only(left: 10, right: 10, top: 3, bottom: 3),
              decoration: BoxDecoration(
                color: Colors.redAccent,
                borderRadius: BorderRadius.circular(2.5),
              ),
              child: Text(
                '700元券',
                textAlign: TextAlign.center,
                maxLines: 1,
                style: TextStyle(
                  height: 1,
                  fontSize: 11,
                  color: HexColor.fromHex('#ffffff'),
                ),
              ),
            ),
            _createOriginPrice(),
          ],
        ),
      ],
    );
  }

  Widget _createOriginPrice() {
    return Padding(
        padding: EdgeInsets.only(bottom: 2),
        child: Text(
          '￥5999',
          style: TextStyle(
            fontSize: 11,
            height: 1,
            color: HexColor.fromHex('#b3b3b3'),
            fontWeight: FontWeight.normal,
            fontFamily: 'Din',
            package: 'zhiying_base_widget',
            decoration: TextDecoration.lineThrough,
          ),
        ));
  }

  Widget _createPrice() {
    return RichText(
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
      text: TextSpan(children: [
        TextSpan(
          text: '￥',
          style: TextStyle(
            fontSize: 10,
            color: HexColor.fromHex('#ff4242'),
            fontWeight: FontWeight.bold,
            fontFamily: 'Din-Bold',
            package: 'zhiying_base_widget',
          ),
        ),
        TextSpan(
          text: '5299',
          style: TextStyle(
            fontSize: 20,
            color: HexColor.fromHex('#ff4242'),
            fontWeight: FontWeight.bold,
            fontFamily: 'Din-Bold',
            package: 'zhiying_base_widget',
          ),
        )
      ]),
    );
  }

  Widget _createCupone() {
    List<Widget> widgets = List();

    widgets.add(Container(
      margin: EdgeInsets.only(right: 5),
      padding: EdgeInsets.only(left: 10, right: 10, top: 3, bottom: 3),
      decoration: BoxDecoration(
        color: HexColor.fromHex('#ff4242'),
        borderRadius: BorderRadius.circular(2.5),
      ),
      child: Text(
        '到手价',
        textAlign: TextAlign.center,
        maxLines: 1,
        style: TextStyle(
          height: 1,
          fontSize: 11,
          color: HexColor.fromHex('#ffffff'),
        ),
      ),
    ));

    return Container(
      margin: EdgeInsets.only(top: 6),
      child: Row(
        children: widgets,
      ),
    );
  }
}
