import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:zhiying_base_widget/widgets/goods_details/detail_img/bloc/goods_details_img_bloc.dart';
import 'package:zhiying_base_widget/widgets/goods_details/detail_img/goods_details_img_sk.dart';
import 'package:zhiying_base_widget/widgets/goods_details/detail_img/model/goods_details_img_model.dart';
import 'package:zhiying_base_widget/widgets/home/home_quick_entry/cached_network_image_util.dart';
import 'package:zhiying_comm/zhiying_comm.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:zhiying_base_widget/widgets/goods_details/detail_img/bloc/goods_details_img_repository.dart';

///
/// 商品详情图片
///
class GoodsDetailsImgWidget extends StatelessWidget {
  final Map<String, dynamic> model;

  const GoodsDetailsImgWidget(this.model);

  @override
  Widget build(BuildContext context) {
    return BlocProvider<GoodsDetailsImgBloc>(
      create: (_) => GoodsDetailsImgBloc(repository: GoodsDetailsImgRepository())..add(GoodsDetailsImgInitEvent(model: model)),
      child: GoodsDetailsImgWidgetContainer(),
    );
  }
}

class GoodsDetailsImgWidgetContainer extends StatefulWidget {
  @override
  _GoodsDetailsImgWidgetContainerState createState() => _GoodsDetailsImgWidgetContainerState();
}

class _GoodsDetailsImgWidgetContainerState extends State<GoodsDetailsImgWidgetContainer> {
  @override
  Widget build(BuildContext context) {
    return BlocConsumer<GoodsDetailsImgBloc, GoodsDetailsImgState>(
      listener: (BuildContext context, GoodsDetailsImgState state) {
        if (state is GoodsDetailsImgErrorState) {
          print('数据加载出错');
        }
      },
      buildWhen: (previous, current) {
        /// 数据加载出错不进行build
        if (current is GoodsDetailsImgErrorState) {
          return false;
        }
        return true;
      },
      builder: (context, state) {
        print('currente state = $state');
        if (state is GoodsDetailsImgLoadedState) {
          if (!EmptyUtil.isEmpty(state.model)) {
            return _getMainWidget(state.model);
          }
        }
        // 骨架屏
        return GoodsDetailsImgSkeleton();
      },
    );
  }

  ///
  Widget _getMainWidget(GoodsDetailsImgModel model) {
    return Column(
      children: <Widget>[
        /// 标题
        _getTitleWidget(model),
        /// 图片列表
        _getImgListWidget(model),
      ],
    );
  }

  /// 图片列表
  Widget _getImgListWidget(GoodsDetailsImgModel model){
    return Column(
      children: model.image_detail_list.map((item){
        return CachedNetworkImage(
          imageUrl: item ?? '',
          fit: BoxFit.fitWidth,
        );
      }).toList(),
    );
  }

  /// 标题Widget
  Widget _getTitleWidget(GoodsDetailsImgModel model) {
    return Container(
      color: Colors.white,
      margin: const EdgeInsets.only(top: 6),
      width: double.infinity,
      padding: const EdgeInsets.only(top: 15, bottom: 15, left: 12.5, right: 12.5),
      child: _getLeftWidget(model),
    );
  }

  /// 左边图标加文字
  Widget _getLeftWidget(GoodsDetailsImgModel model) {
    return Row(
      children: <Widget>[
        CachedNetworkImage(
          imageUrl: model?.icon ?? '',
          width: 12,
        ),
        const SizedBox(width: 2.5),
        Text(model?.title ?? '商品详情', style: TextStyle(color: HexColor.fromHex(model?.title_color ?? '#333333'), fontSize: 12)),
      ],
    );
  }
}
