import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: {
            // 注意这里配置的别名需要再 tsconfig 的 paths 属性下声明
            "@": resolve(__dirname, "src"),
        },
        // 导入时可以省略的扩展名列表
        extensions: ["mjs", ".js", "ts", "jsx", "tsx"],
    },
    server: {
        port: 3033,
        proxy: {
            "/api": {
                changeOrigin: true,
                target: "https://www.xxxx.com",
                rewrite: (url) => url.replace("/api", ""),
            },
        },
    },
});

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import WindiCss from "vite-plugin-windicss";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        react(),
        WindiCss(), // 添加 windicss 插件
    ],
});

// main.ts
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "virtual:windi.css"; // 添加 windicss

const app = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
app.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import WindiCss from "vite-plugin-windicss";
import vitePluginForArco from "@arco-plugins/vite-react";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        react(),
        WindiCss(),
        vitePluginForArco({
            style: true, // 动态导入组件样式 less
        }),
    ],
});

// store/user.ts
import { action, computed, makeAutoObservable, makeObservable, observable } from "mobx";

export interface UserStoreType {
    name: string;
    age: number;
    doubleAge: number;
    editName: (name: string) => void;
}

class UserStore implements UserStoreType {
    name: string = "";
    age: number = 0;
    constructor() {
        // makeObservable需要手动注解
        makeObservable(this, {
            name: observable,
            age: observable,
            doubleAge: computed,
            editName: action,
        });
    }

    get doubleAge(): number {
        return this.age * 2;
    }

    editName = (name: string) => {
        this.name = name;
    };
}

export { UserStore };

// store/index.ts
import { createContext } from "react";
import { UserStore, UserStoreType } from "./user";

export type { UserStoreType };

export const stores = {
    userStore: new UserStore(),
};

export const useStore = useContext(createContext(stores));

// utils/http.ts
import axios from "axios";
import Qs from "qs";
import { isFormData, getRandomId } from "@/utils/helper";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

const http = axios.create({
    timeout: 30 * 1000,
    baseURL: "/api",
});

let httpNum = 0;

const addHttp = () => {
    if (httpNum === 0) {
        NProgress.start();
    }
    httpNum++;
};

const finishHttp = () => {
    httpNum--;
    if (httpNum <= 0) {
        NProgress.done();
    }
};

// http request 拦截器
http.interceptors.request.use(
    (config) => {
        addHttp();
        // 添加请求 id
        if (config.url) {
            const reqId = getReqId();
            config.url = config.url.includes("?") ? `${config.url}&reqId=${reqId}` : `${config.url}?reqId=${reqId}`;
        }
        // 添加 token
        const token = localStorage.getItem("token") || "";
        if (token) {
            config.headers!.Authorization = token;
        }
        // post 请求格式化入参
        if (config.method === "post" && !isFormData(config.data)) {
            // 上传文件不能使用 QS 去格式化
            config.data = Qs.stringify(config.data);
        }
        return config;
    },
    (err) => {
        return Promise.reject(err);
    }
);

// http response 拦截器
http.interceptors.response.use(
    (res) => {
        finishHttp();
        if (res.data.errno === 999) {
            console.log("token过期");
        }
        return res;
    },
    (error) => {
        return Promise.reject(error);
    }
);
export default http;

// utils.helper.ts

// await-to-js
export const to = <T, U = Error>(func: Promise<T>, error?: U): Promise<[null, T] | [U, null]> => func.then<[null, T]>((res: T) => [null, res]).catch<[U, null]>((err: U) => [err, null]);

// 生成随机 ID
export const getRandomId = (): string => Date.now().toString() + (Math.random() * 10000 * 10000).toFixed();

// 判断数据类型是否是 formData
export const isFormData = (data：any) => Object.prototype.toString.call(data) === '[object FormData]'