import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:sk_base_mobile/app_theme.dart';
import 'package:sk_base_mobile/config.dart';
import 'package:sk_base_mobile/constants/bg_color.dart';
import 'package:sk_base_mobile/models/user_info.model.dart';
import 'package:sk_base_mobile/screens/inventory_inout/components/responsive.dart';
import 'package:sk_base_mobile/util/screen_adaper_util.dart';
import 'package:sk_base_mobile/widgets/core/sk_avatar.dart';
import 'package:sk_base_mobile/widgets/core/sk_tag.dart';
import 'package:sk_base_mobile/widgets/fade_in_cache_image.dart';
import 'package:sk_base_mobile/widgets/core/sk_appbar.dart';

class EmployeeDetail extends StatelessWidget {
  final _controller = Get.put(EmployeeDetailController());
  EmployeeDetail({super.key});
  final userInfo = Get.arguments as UserInfoModel;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const SkAppbar(
        backgroundColor: AppTheme.white,
        iconAndTextColor: AppTheme.black,
        title: '员工详情',
      ),
      body: buildBody(),
    );
  }

  Widget buildBody() {
    return Column(
      children: [
        buildTopInfo(),
        Expanded(child: buildContent()),
      ],
    );
  }

  Widget buildTopInfo() {
    return Container(
      padding: EdgeInsets.symmetric(
          vertical: ScreenAdaper.height(defaultPadding),
          horizontal: ScreenAdaper.width(defaultPadding * 2)),
      color: AppTheme.white,
      child: Row(
        children: [
          SkAvatar(url: userInfo.avatar),
          SizedBox(
            width: ScreenAdaper.width(defaultPadding),
          ),
          // 中间信息
          Expanded(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('${userInfo.nickname}',
                  style: TextStyle(
                      fontSize: ScreenAdaper.height(30),
                      fontWeight: FontWeight.w600)),

              SizedBox(
                height: ScreenAdaper.height(5),
              ), // role
              Text('${userInfo.dept?.name}',
                  style: TextStyle(color: AppTheme.grey)),
              SizedBox(
                height: ScreenAdaper.height(5),
              ),
              Wrap(
                spacing: ScreenAdaper.height(5),
                runSpacing: ScreenAdaper.height(5),
                children: [
                  ...userInfo.roles.map((e) => SkTag(
                      text: '${e.name}', color: AppTheme.primaryColorLight))
                ],
              ),
            ],
          )),
        ],
      ),
    );
  }

  Widget buildContent() {
    return Container(
      margin: EdgeInsets.all(ScreenAdaper.height(defaultPadding)),
      decoration: const BoxDecoration(color: AppTheme.white),
      child: DefaultTabController(
          length: 4,
          initialIndex: _controller.selectedTabIndex.value,
          child: Column(
            children: [
              _buildTabBar(),
              Expanded(
                child: _buildTabView(),
              )
            ],
          )),
    );
  }

  Widget _buildTabBar() {
    return TabBar(
      onTap: (index) {
        _controller.selectedTabIndex.value = index;
      },
      labelStyle: TextStyle(
          fontSize: ScreenAdaper.height(25), fontWeight: FontWeight.w600),
      labelPadding: EdgeInsets.zero,
      labelColor: AppTheme.primaryColorLight,
      // unselectedLabelColor: AppTheme.grey,
      indicator: BoxDecoration(
        border: Border(
            bottom: BorderSide(
          width: ScreenAdaper.height(5),
          color: AppTheme.primaryColorLight,
        )),
      ),
      tabs: const [
        Tab(
          text: '基本信息',
        ),
        Tab(
          text: '考勤记录',
        ),
        Tab(
          text: '任务进度',
        ),
        Tab(
          text: '相关文件',
        ),
      ],
    );
  }

  Widget _buildTabView() {
    return TabBarView(
      children: [
        Responsive(
            tablet: buildBaseInfo(
              columnNum: 3,
            ),
            largeTablet: buildBaseInfo(
              columnNum: 4,
            ),
            mobile: buildBaseInfo(
              columnNum: 2,
            )),
        Container(
          child: Text('考勤记录'),
        ),
        Container(
          child: Text('请假记录'),
        ),
        Container(
          child: Text('加班记录'),
        ),
      ],
    );
  }

  //基本信息
  Widget buildBaseInfo({
    required int columnNum,
  }) {
    return Container(
        padding: EdgeInsets.symmetric(
            vertical: ScreenAdaper.height(defaultPadding),
            horizontal: ScreenAdaper.height(defaultPadding)),
        child: MasonryGridView.count(
          crossAxisCount: columnNum,
          itemCount: 7,
          mainAxisSpacing: ScreenAdaper.height(50),
          itemBuilder: (context, index) {
            return buildBaseInfoItem(label: '姓名', value: '张三');
          },
        ));
  }

  Widget buildBaseInfoItem({String? label, String? value}) {
    return Container(
      // decoration: BoxDecoration(color: Colors.red),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '$label',
            style: TextStyle(
                fontSize: ScreenAdaper.height(26),
                color: AppTheme.grey,
                fontWeight: FontWeight.w600),
          ),
          SizedBox(
            height: ScreenAdaper.height(10),
          ),
          Text(
            '$value',
            style: TextStyle(fontSize: ScreenAdaper.height(26)),
          )
        ],
      ),
    );
  }
}

class EmployeeDetailController extends GetxController {
  final selectedTabIndex = 0.obs;
}