import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:one_poem/category/models/category_item_entity.dart';
import 'package:one_poem/poem/poem_router.dart';
import 'package:one_poem/res/gaps.dart';
import 'package:one_poem/res/resources.dart';
import 'package:one_poem/routers/fluro_navigator.dart';
import 'package:one_poem/setting/setting_router.dart';

class CategoryItem extends StatelessWidget {
  const CategoryItem({
    Key? key,
    required this.item,
    required this.index,
    required this.selectIndex,
  }) : super(key: key);

  final CategoryItemEntity item;
  final int index;
  final int selectIndex;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        NavigatorUtils.push(context, '${PoemRouter.poemDetailPage}?id=100');
      },
      child: Container(
        margin: const EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
        width: double.infinity,
        decoration: BoxDecoration(
          color: Colors.grey.shade200.withOpacity(0.1),
          border: Border.all(color: Colors.grey, width: 0.5), // 边色与边宽度
        ),
        child: ClipRect(
          child: BackdropFilter(
            filter: ImageFilter.blur(
              sigmaX: 10.0,
              sigmaY: 10.0,
            ),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.grey.shade200.withOpacity(0.1),
              ),
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      mainAxisSize: MainAxisSize.max,
                      //交叉轴的布局方式，对于column来说就是水平方向的布局方式
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        const Text("此地"),
                        // Icon(
                        //   Icons.query_builder_outlined,
                        //   size: 15.0,
                        // ),
                        Wrap(
                          crossAxisAlignment: WrapCrossAlignment.center,
                          children: const [
                            Icon(
                              Icons.room_outlined,
                              size: 15.0,
                            ),
                            Text(
                              "北京 海淀 万泉庄",
                              maxLines: 3,
                            ),
                          ],
                        ),
                        const Text(
                          "京",
                          style: TextStyle(
                              fontSize: 30, fontFamily: "ZhiMangXing"),
                        ),
                      ],
                    ),
                    Gaps.vGap16,
                    const Text(
                      "前不见古人，后不见来者。\n念天地之悠悠，独怆然而涕下。\n",
                      style:
                          TextStyle(fontSize: 22.0, fontFamily: "ZCOOLXiaoWei"),
                    ),
                    const Text(
                      "[唐] 陈子昂《登幽州台歌》",
                      maxLines: 1,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}