import "./index.scss";
import Flex from "@/component/flex";
import Layout from "@/component/layout";
import { PropsWithChildren, useContext, useMemo } from "react";
import { Image, View } from "@tarojs/components";
import ImageUtil from "@/utils/imgUtils";
import AppContext from "@/context/appContext";
import Label from "@/component/label";
import APPConfig from "@/config";

interface IAboutProps {}

const About = (props: PropsWithChildren<IAboutProps>) => {
  const appContext = useContext(AppContext);
  const { screenWidth } = appContext.systemInfo!;
  const imgBackStyle = useMemo(() => {
    return {
      ...ImageUtil.calculationHeight(1125 / 957, screenWidth),
      position: "relative",
    } as React.CSSProperties;
  }, []);
  return (
    <Layout>
      <Flex style={{ height: "100vh" }}>
        <View style={imgBackStyle}>
          <Image
            className="background-image"
            src={require(`../../../assets/bg_aboutus@3x.png`)}
          />
          <Flex rowGap="sm" className="background-content">
            <View style={{ height: 200 }} />
            <Flex alignItem="center" className="login-back-logo-wrap">
              <Image
                className="login-logo"
                src={
                  APPConfig.APPID == "480"
                    ? require("@/assets/logo-cyr.png")
                    : require("@/assets/logo.png")
                }
              />
            </Flex>
          </Flex>
        </View>
        <Flex flex={2} />
        <Label
          style={{
            marginBottom: Math.max(appContext.padding.bottom, 16),
            textAlign: "center",
          }}
          type="secondary"
        >
          贵州梵诚融资担保有限公司
        </Label>
      </Flex>
    </Layout>
  );
};

export default About;