import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:huixiang/utils/MyPainter.dart';
import 'package:huixiang/view_widget/separator.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class FounderStoryPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _FounderStoryPage();
  }
}

class _FounderStoryPage extends State<FounderStoryPage> {
  var controller = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xFFFFFFFF),
        elevation: 0,
        centerTitle: false,
        leading: GestureDetector(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Container(
            alignment: Alignment.centerRight,
            margin: EdgeInsets.only(left: 10.w),
            padding: EdgeInsets.all(6),
            child: Icon(
              Icons.arrow_back_ios,
              color: Colors.black,
              size: 24,
            ),
          ),
        ),
        titleSpacing: 2.w,
        leadingWidth: 56.w,
        automaticallyImplyLeading: true,
      ),
      body: Container(
        child: SingleChildScrollView(
          physics: BouncingScrollPhysics(),
          child: Column(
            children: [
              Container(
                margin: EdgeInsets.only(bottom: 20),
                padding: EdgeInsets.only(left: 32, right: 32, top: 24),
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black.withAlpha(12),
                        offset: Offset(0, 2),
                        blurRadius: 14,
                        spreadRadius: 0)
                  ],
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Image.asset(
                      "assets/image/icon_story_bj.png",
                      alignment: Alignment.center,
                    ),
                    SizedBox(
                      height: 16,
                    ),
                    Text("关于创始人",
                        style:
                            TextStyle(fontSize: 24, color: Color(0xff565656))),
                    SizedBox(
                      height: 18,
                    ),
                    Container(
                      width: double.infinity,
                      child: Stack(
                        children: [
                          RichText(
                              textAlign: TextAlign.start,
                              text: TextSpan(
                                text:
                                    "1993年，台胞李旭清在台湾创建“一心回乡”团队，吸引包括蔡三益在内的30余位伙伴加入。"
                                    "他们致力于实践自然生态农耕，创造与环境共存共荣的绿色发展模式。经过多年探索，形成三产融合的完整产业链和成熟运营模式。",
                                style: TextStyle(
                                    color: Color(0xFF1A1A1A),
                                    fontSize: 12,
                                    height: 1.5),
                              )),
                          Padding(
                            padding: EdgeInsets.only(top: 50),
                            child: Align(
                              alignment: Alignment.bottomRight,
                              child: Image.asset(
                                "assets/image/icon_story_1.png",
                                width: 222,
                                height: 52,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 16,
                    ),
                    RichText(
                        text: TextSpan(
                      text:
                          "2018年在台湾生活了五十七年的李旭清女士决定回到父亲的家乡湖北寻根。在这里为了延续台湾回乡的经验，李姐在湖北武汉创立了,与此同行的还有李姐的两个女儿。"
                          "为了推广更多的好食物，让更多的人参与到环境保护中，一心回乡遇到了知音，在大力支持下，“海峡姐妹餐饮诞生了!",
                      style: TextStyle(
                          color: Color(0xFF1A1A1A), fontSize: 12, height: 1.5),
                    )),
                    Image.asset(
                      "assets/image/icon_story_2.png",
                      alignment: Alignment.centerRight,
                    ),
                    SizedBox(
                      height: 16,
                    ),
                    Image.asset(
                      "assets/image/laoban.png",
                      fit: BoxFit.cover,
                      width: double.infinity,
                      height: 228,
                    ),
                    SizedBox(
                      height: 50,
                    ),
                    Image.asset(
                      "assets/image/icon_story_bj.png",
                      alignment: Alignment.center,
                    ),
                    SizedBox(
                      height: 16,
                    ),
                    Text("回乡之路",
                        style:
                            TextStyle(fontSize: 24, color: Color(0xff565656))),
                    SizedBox(
                      height: 20,
                    ),
                    _textWidget("1994年，为推广生机饮食，在台中逢甲大学开台湾第一家「青青小镇」自然蔬食餐厅。"),
                    _textWidget(
                        "1997年，为了实践减碳生活，邀约一群大学应届毕业生共同生活彼此学习，落实自然饮食新生活,开始推动有机小铺与小区讲座的教育推广模式。"),
                    _textWidget(
                        "2000年 为推广自然饮食概念，及照顾有机农民，开始做保价保证，成立「甘露自然蔬食餐厅」。"),
                    _textWidget(
                        "2005年，不忍农村凋零、土地被农药化肥毒化，带领年轻伙伴回乡购地，成立「回乡有机生活农场」，实践自然生态农耕，以复育生态、改良土壤为目的，创造一个与万物和谐共生的农耕模式。"),
                    Padding(
                      padding: EdgeInsets.only(bottom: 20, left: 18),
                      child: Text("…",
                          style: TextStyle(
                              fontSize: 16, color: Color(0xff565656))),
                    ),
                    _textWidget("2019年，在武汉成立湖北海峡姐妹餐饮有限公司。"
                        "成为百年川椒火锅（光谷店）运营方，通过“素食煮义”和“蔬食之力”推广有机永续美好生活，"
                        "打造“新国民火锅”。在“未来之光”和“创意天地”开设的「海峡姐妹」茶吧，坚持纯天然的食材，"
                        "推动茶饮与健康养生同时兼具的新茶饮文化。"),
                    _textWidget("2019年，在武汉江夏成立旭清回乡生态农业发展有限公司，"
                        "在山坡街拥有1200亩农业生产基地，"
                        "将台湾实践多年并有成功经验的生态农法, 天然食品加工技术, 农业旅游输出落地。"),
                    Image.asset(
                      "assets/image/icon_story_bj.png",
                      alignment: Alignment.center,
                    ),
                    SizedBox(
                      height: 16,
                    ),
                    Text("早期团队",
                        style:
                            TextStyle(fontSize: 24, color: Color(0xff565656))),
                    SizedBox(
                      height: 26,
                    ),
                    Image.asset(
                      "assets/image/icon_story_td.png",
                      fit: BoxFit.cover,
                      width: double.infinity,
                      height: 228,
                    ),
                    SizedBox(
                      height: 24,
                    ),
                    Padding(
                      padding: EdgeInsets.only(
                        top: 10,
                      ),
                      child: MySeparator(
                        width: 5,
                        height: 2,
                        color: Color(0xFF32A060),
                      ),
                    ),
                    SizedBox(
                      height: 17,
                    ),
                    Container(
                      margin: EdgeInsets.only(bottom: 20),
                      padding: EdgeInsets.all(12),
                      decoration: BoxDecoration(
                        color: Color(0xff32A060),
                        boxShadow: [
                          BoxShadow(
                              color: Colors.black.withAlpha(12),
                              offset: Offset(0, 2),
                              blurRadius: 14,
                              spreadRadius: 0)
                        ],
                      ),
                      child: RichText(
                          text: TextSpan(
                        text:
                            "回乡有机团队（早期照片），当年，他们也都是企业高管、IT精英、大学毕业生。日出而作，日落而息，结婚生子，"
                            "子女们一起玩耍，上学读书。转眼间，孩子们都已长大，有些大学毕业后也加入了“回乡”。",
                        style: TextStyle(
                            color: Colors.white, fontSize: 12, height: 1.5),
                      )),
                    ),
                    Padding(
                      padding: EdgeInsets.only(
                        top: 10,
                      ),
                      child: MySeparator(
                        width: 5,
                        height: 2,
                        color: Color(0xFF32A060),
                      ),
                    ),
                    SizedBox(
                      height: 27,
                    ),
                    Text("传递理念",
                        style:
                            TextStyle(fontSize: 24, color: Color(0xff565656))),
                    SizedBox(
                      height: 20,
                    ),
                    Row(
                      children: [
                        _ideaWidget("友爱",
                            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
                        _ideaWidget("纯净",
                            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
                        _ideaWidget("健康",
                            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
                      ],
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Row(
                      children: [
                        _ideaWidget("有机",
                            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
                        _ideaWidget("环保",
                            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
                        _ideaWidget("智慧",
                            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
                      ],
                    ),
                    SizedBox(
                      height: 20,
                    ),
                  ],
                ),
              ),
              Container(
                // margin: EdgeInsets.only(bottom: 20),
                // padding: EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black.withAlpha(12),
                        offset: Offset(0, 2),
                        blurRadius: 14,
                        spreadRadius: 0)
                  ],
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: EdgeInsets.all(16),
                      child: Text("评论 (58)  喜欢 (58)",
                          style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                              color: Color(0xff1A1A1A))),
                    ),
                    SizedBox(
                      height: 600,
                      child: ListView.builder(
                        itemCount: 6,
                        scrollDirection: Axis.vertical,
                        physics: BouncingScrollPhysics(),
                        itemBuilder: (context, position) {
                          return _commentItem(position);
                        },
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(
                height: 12,
              ),
              Container(
                padding: EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black.withAlpha(12),
                        offset: Offset(0, 2),
                        blurRadius: 14,
                        spreadRadius: 0)
                  ],
                  borderRadius: new BorderRadius.only(
                    topLeft: Radius.circular(8.0),
                    topRight: Radius.circular(8.0),
                  ),
                ),
                child: Row(
                  children: [
                    Expanded(
                      flex: 1,
                      child: Container(
                        decoration: new BoxDecoration(
                            color: Color(0xffF2F2F2),
                            borderRadius: BorderRadius.circular(2.0)),
                        child: Column(
                          children: [
                            Container(
                              margin: const EdgeInsets.fromLTRB(4, 0, 4, 0),
                              alignment: Alignment.topLeft,
                              child: TextField(
                                maxLines: 8,
                                minLines: 1,
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  hintText: "留下您精彩的评论吧~",
                                  hintStyle: TextStyle(
                                    fontSize: 14,
                                    color: Color(0xffCDCCCC),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: 20, right: 20),
                      child: Text(
                        "发送",
                        style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                            color: Color(0XFF1A1A1A)),
                      ),
                    ),
                    Image.asset("assets/image/icon_like_h.png")
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _textWidget(var text) {
    return Padding(
      padding: EdgeInsets.only(bottom: 20),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "●",
            style: TextStyle(fontSize: 10, color: Color(0xff32A060)),
          ),
          SizedBox(
            width: 5,
          ),
          Expanded(
              child: Text(text,
                  style: TextStyle(fontSize: 12, color: Colors.black))),
        ],
      ),
    );
  }

  Widget _ideaWidget(var text, var img) {
    return Expanded(
      flex: 1,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            width: 63,
            height: 63,
            child: CircleAvatar(
              radius: 100,
              backgroundImage: NetworkImage(img),
              child: Container(
                  alignment: Alignment.center,
                  child: Text(
                    text,
                    style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.w300,
                        color: Colors.white),
                  )),
            ),
          ),
          Container(
            width: 73,
            height: 73,
            child: CustomPaint(
              painter: MyPainter(
                  lineColor: Color(0xff32A060), width: 2, isDividerRound: true),
            ),
          )
        ],
      ),
    );
  }

  Widget _commentItem(var position) {
    return Container(
      child: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                ClipOval(
                  child: Image.network(
                    "https://t7.baidu.com/it/u=2841334870,333581502&fm=193&f=GIF",
                    fit: BoxFit.cover,
                    width: 40,
                    height: 40,
                  ),
                  clipBehavior: Clip.hardEdge,
                ),
                SizedBox(
                  width: 12,
                ),
                Expanded(
                  child: Container(
                    height: 60,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text.rich(
                          TextSpan(children: [
                            TextSpan(
                              text: "张三",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  fontSize: 14,
                                  color: Colors.black),
                            ),
                          ]),
                          textDirection: TextDirection.ltr,
                        ),
                        Text(
                          "2021.04.12 12:12",
                          overflow: TextOverflow.ellipsis,
                          maxLines: 2,
                          style: TextStyle(
                            fontSize: 12,
                            color: Color(0xff808080),
                          ),
                        ),
                      ],
                    ),
                  ),
                  flex: 1,
                ),
                Container(
                  alignment: Alignment.topRight,
                  child: Row(
                    children: [
                      Image.asset(
                        "assets/image/icon_like.png",
                        width: 16,
                        height: 16,
                      ),
                      Text(
                        "58",
                        style:
                            TextStyle(fontSize: 12, color: Color(0xff1A1A1A)),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(left: 68, right: 16),
            child: Text(
              "文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义（Mess…",
              style: TextStyle(fontSize: 14, color: Color(0xff1A1A1A)),
            ),
          ),
          SizedBox(
            height: 12,
          ),
          Container(
            width: double.infinity,
            margin: EdgeInsets.only(left: 68, right: 16),
            decoration: new BoxDecoration(
              color: Color(0xffF2F2F2),
              borderRadius: BorderRadius.circular(2.0),
            ),
            child: Padding(
              padding: EdgeInsets.only(left: 4, top: 4, bottom: 4),
              child: Text(
                "文本，是指书面语言的表现形式文本，是指、",
                style: TextStyle(fontSize: 12, color: Color(0xff808080)),
              ),
            ),
          ),
          if (position == 5)
            Container(
              height: 63,
              decoration: BoxDecoration(
                color: Color(0xffF2F2F2),
                boxShadow: [
                  BoxShadow(
                      color: Colors.black.withAlpha(12),
                      offset: Offset(0, 2),
                      blurRadius: 14,
                      spreadRadius: 0)
                ],
              ),
              margin: EdgeInsets.only(top: 30),
              alignment: Alignment.center,
              child: Text(
                "-已显示全部评论-",
                style: TextStyle(fontSize: 14, color: Color(0xff353535)),
              ),
            ),
        ],
      ),
    );
  }
}