import { PropsWithChildren, useContext } from "react";
import Layout from "@/component/layout";
import SizeBox from "@/component/sizeBox";
import AppContext from "@/context/appContext";
import { Image, View } from "@tarojs/components";

import "./index.scss";

interface IMineProps {}
// @ts-ignore
const OfficialAccountTab = (props: PropsWithChildren<IMineProps>) => {
  const appContext = useContext(AppContext);
  const { statusBarHeight } = appContext.systemInfo!;

  const platformName = "惠融钱包";
  const bonusList = [
    {
      name: "进度提醒 ：申请进度 服务通知",
    },
    {
      name: "粉丝福利 ：关注享提额 最高20万",
    },
    {
      name: "专属客服 ：随时解答贷款问题",
    },
  ];

  return (
    <Layout className="official-account" bottomBarIndex={1}>
      <SizeBox height={statusBarHeight}></SizeBox>
      <SizeBox height={36}></SizeBox>
      <View className="wrap">
        <View className="title-content">
          <View className="follow-content">
            <Image
              src={require("../../assets/official-account/checkbox.svg")}
              className="checkbox"
            />
            <View className="text">关注【{platformName}】公众号</View>
          </View>

          <View className="get-services">获取专属服务</View>
        </View>

        <View className="white-content">
          <Image
            src={require("../../assets/official-account/qrCode.png")}
            className="qrCode"
            showMenuByLongpress={true}
          />
          <View className="text">长按识别二维码</View>

          <View className="line-content">
            <View className="line"></View>
          </View>

          <View className="tip-content">
            <View className="top-content">
              <Image
                src={require("../../assets/official-account/left.svg")}
                className="icon"
              />

              <View className="tip-text">关注公众号您将获取专属服务</View>

              <Image
                src={require("../../assets/official-account/right.svg")}
                className="icon"
              />
            </View>
            <View className="bonus-content">
              <View className="bonus-box">
                {bonusList.map((bonus, index) => (
                  <View key={index} className="bonus-item">
                    <Image
                      src={require("../../assets/official-account/checkbox-green.svg")}
                      className="bonus-icon"
                    />
                    <View className="bonus-text">{bonus.name}</View>
                  </View>
                ))}
              </View>
            </View>
          </View>
        </View>
      </View>
    </Layout>
  );
};

export default OfficialAccountTab;
