import { View, Image, ScrollView } from "@tarojs/components";
import Taro, { useDidShow, useLoad } from "@tarojs/taro";
import "./index.less";
import Login from "./Login";
import useGlobalStore from "@/store";
import icon5 from "@/assets/icon/icon5.png";
import icon6 from "@/assets/icon/icon6.png";
import icon7 from "@/assets/icon/icon7.png";
import icon8 from "@/assets/icon/icon8.png";
import { useEffect, useState } from "react";
import services from "@/services";
import ApproveCard from "./components/ApproveCard";
import { Flex } from "@taroify/core";

export default function Index() {
  const {
    updateUserInfo,
    isAuth,
    userInfo,
    queryMainBodyInfo,
    queryAuthenticationInfo,
  } = useGlobalStore();

  const [projectList, setProjectList] = useState<
    {
      id: string;
      thingName: string;
      icon: string;
    }[]
  >([]);
  /** 页面初始化 */
  const init = () => {
    updateUserInfo();
    services.approve.queryProjectList().then((res) => {
      if (res.code === 200) {
        setProjectList(res.data.list);
      }
    });
    queryAuthenticationInfo();
  };

  useDidShow(() => {
    init();
  });

  useEffect(() => {
    if (isAuth) {
      /** 获取用户主体信息  */
      queryMainBodyInfo(userInfo?.mobile);
    }
  }, [isAuth]);

  const menu = [
    {
      icon: icon5,
      name: "建议",
    },
    {
      icon: icon6,
      name: "咨询",
    },
    {
      icon: icon7,
      name: "投诉",
    },
    {
      icon: icon8,
      name: "举报",
    },
  ];

  const menuClick = ({ name }: (typeof menu)[number]) => {
    Taro.navigateTo({ url: "/pages/Feedback/Report/index?type=" + name });
  };

  const ApplyHandler = (id: string) => {
    if (!userInfo?.id) {
      Taro.showToast({
        title: "请先登录",
        icon: "none",
      });
      return;
    }
    if (!isAuth) {
      Taro.showToast({
        title: "请先前往个人中心进行认证",
        icon: "none",
      });
      return;
    }
    Taro.navigateTo({
      url: `/pages/Approve/ApplyDesc/index?id=${id}`,
    });
  };

  return (
    <View className="container">
      <ScrollView className="scrollView" scrollY>
        <View className="scroll_content">
          <Login />
          <View className="subTitle">共建美丽新都</View>
          <View className="menu">
            {menu.map((item) => {
              return (
                <View className="menu-item" key={item.name}>
                  <Image
                    onClick={menuClick.bind(this, item)}
                    className="menu-item-icon"
                    src={item.icon}
                  />
                  <View className="menu-item-text">{item.name}</View>
                </View>
              );
            })}
          </View>
          <Flex className="sspWrap" gutter={12}>
            <Flex.Item span={12}>
              <View className="sspWrap-leftCard">
                <View className="sspWrap_title">随手拍</View>
                <View className="sspWrap_desc">这里是1句话</View>
              </View>
            </Flex.Item>
            <Flex.Item span={12}>
              <View className="sspWrap-rightCard">
                <View className="sspWrap_title">举手之劳</View>
                <View className="sspWrap_desc">这里是1句话</View>
              </View>
            </Flex.Item>
          </Flex>

          <View className="subTitle">便民服务查询</View>

          <Flex className="bmWrap" gutter={12}>
            <Flex.Item span={8}>
              <View
                className="bmWrap-centerCard"
                onTap={() => {
                  if (userInfo?.id) {
                    Taro.navigateTo({
                      url: "/pages/CommonProblem/index",
                    });
                  } else {
                    Taro.showToast({
                      title: "请先登录",
                      icon: "none",
                    });
                  }
                }}
              >
                常见咨询
              </View>
            </Flex.Item>
            <Flex.Item span={8}>
              <View
                className="bmWrap-leftCard"
                onClick={() => {
                  if (userInfo?.id) {
                    Taro.navigateTo({
                      url: "/pages/ServiceLocation/TypeList/index",
                    });
                  } else {
                    Taro.showToast({
                      title: "请先登录",
                      icon: "none",
                    });
                  }
                }}
              >
                办事地点
              </View>
            </Flex.Item>

            <Flex.Item span={8}>
              <View
                className="bmWrap-rightCard"
                onTap={() => {
                  if (userInfo?.id) {
                    Taro.navigateTo({
                      url: "/pages/Law/index",
                    });
                  } else {
                    Taro.showToast({
                      title: "请先登录",
                      icon: "none",
                    });
                  }
                }}
              >
                政策法规
              </View>
            </Flex.Item>
          </Flex>

          <View className="subTitle">垃圾分类专区</View>

          <View
            className="kitchenWaste"
            onTap={() => {
              if (!userInfo?.id) {
                Taro.showToast({
                  title: "请先登录",
                  icon: "none",
                });
                return;
              }
              Taro.navigateTo({
                url: "/pages/kitchenWaste/index",
              });
            }}
          >
            餐厨垃圾收运
          </View>

          <View className="subTitle">行政许可备案</View>

          <View>
            {projectList?.map((item) => {
              return (
                <ApproveCard
                  onclick={ApplyHandler.bind(this, item.id)}
                  dataSource={item}
                ></ApproveCard>
              );
            })}
          </View>
        </View>
      </ScrollView>
    </View>
  );
}
