import { View, Text, ScrollView, Image } from "@tarojs/components";
import "./index.less";
import Taro, { useLoad } from "@tarojs/taro";
import icon12 from "@/assets/icon/icon12.png";
import useGlobalStore from "@/store";
import { useMemo } from "react";
import { Flex, Button } from "@taroify/core";
import { RecordsOutlined } from "@taroify/icons";

export default function () {
  const params = Taro.getCurrentInstance().router?.params;

  const { projectConfig, mainBodyInfo, projectFlowConfig, queryProjectConfig } =
    useGlobalStore();

  useLoad(async () => {
    if (params?.id) {
      queryProjectConfig(params.id);
    }
  });

  const scope = useMemo(() => {
    if (!projectFlowConfig) {
      return { names: [], keys: [] };
    }
    console.log(projectFlowConfig);
    const { scopeCodeOfApplication, scopeOfApplication } = projectFlowConfig;

    const names = scopeCodeOfApplication?.split(",") ?? [];
    const keys = scopeOfApplication?.split(",") ?? [];

    return { names, keys };
  }, [projectFlowConfig]);

  const enable = useMemo(() => {
    return scope.keys.some((item) => {
      console.log("item", mainBodyInfo);
      return mainBodyInfo?.findIndex((v) => v.entityTypeId === item) !== -1;
    });
  }, [scope, mainBodyInfo]);

  const applyForHandle = () => {
    Taro.navigateTo({
      url: `/pages/Approve/Apply/index?id=${params?.id}`,
    });
  };

  return (
    <ScrollView className="container" scrollY>
      <View className="apply-content">
        <View className="title">{projectConfig?.thingName}</View>
        <View className="decorate"></View>
        <View>{projectConfig?.acceptanceCriteria}</View>
        <View className="subTitle">可申请对象</View>
        <View className="scopeList">
          {scope.names.map((item, index) => {
            return (
              <View className="scopeCard" key={item}>
                <Flex align="center" direction="column">
                  <Image src={icon12} className="scopeCard-img"></Image>
                  {item}
                </Flex>
              </View>
            );
          })}
        </View>

        <Button
          disabled={!enable}
          shape="round"
          className="btn"
          block
          color="primary"
          onClick={applyForHandle}
          icon={<RecordsOutlined />}
        >
          立即申请
        </Button>
      </View>
    </ScrollView>
  );
}
