import React, { useState, useEffect } from "react";
import { View, Text, Image, Button } from "@tarojs/components";
import { PopupPicker } from "@/components/Picker/index";
import Taro from "@tarojs/taro";
import "./index.scss";
import { UserService, PickerOption } from "@/services/userService";
import { clear_login_state } from "@/services/loginService";
import { convert_db_gender_to_display } from "@/utils/genderUtils";
import { EditModal, GeneralNavbar } from "@/components";
// import img from "@/config/images";
import CommonDialog from "@/components/CommonDialog";
import {
  useUserActions,
  useUserInfo,
  useNicknameChangeStatus,
} from "@/store/userStore";
import { UserInfoType } from "@/services/userService";
import {
  useCities,
  useProfessions,
  useNtrpLevels,
} from "@/store/pickerOptionsStore";
import { handleCustomerService } from "@/services/userService";
import evaluateService from "@/services/evaluateService";

const EditProfilePage: React.FC = () => {
  const { updateUserInfo, updateNickname } = useUserActions();
  // 直接从store获取用户信息，确保响应式更新
  const user_info = useUserInfo();
  const nickname_change_status = useNicknameChangeStatus();
  const ntrpLevels = useNtrpLevels();

  // 表单状态，基于store中的用户信息初始化
  const getInitialFormData = () => {
    const info = user_info as UserInfoType;
    return {
      nickname: info?.nickname ?? "",
      personal_profile: info?.personal_profile ?? "",
      occupation: info?.occupation ?? "",
      ntrp_level: info?.ntrp_level ?? "",
      phone: info?.phone ?? "",
      gender: info?.gender ?? "",
      birthday: info?.birthday ?? "",
      country: info?.country ?? "",
      province: info?.province ?? "",
      city: info?.city ?? "",
      district: info?.district ?? "",
    };
  };
  const [form_data, setFormData] = useState(getInitialFormData());

  // 加载状态
  const [loading, setLoading] = useState(false);
  const [showLogoutDialog, setShowLogoutDialog] = useState(false);

  // 编辑弹窗状态
  const [edit_modal_visible, setEditModalVisible] = useState(false);
  const [editing_field, setEditingField] = useState<string>("");
  const [gender_picker_visible, setGenderPickerVisible] = useState(false);
  const [birthday_picker_visible, setBirthdayPickerVisible] = useState(false);
  const [location_picker_visible, setLocationPickerVisible] = useState(false);
  const [ntrp_picker_visible, setNtrpPickerVisible] = useState(false);
  const [occupation_picker_visible, setOccupationPickerVisible] =
    useState(false);

  // 职业数据
  const professions = useProfessions();

  // 城市数据
  const cities = useCities();

  const [ntrpTested, setNtrpTested] = useState<boolean>(false);

  // 监听store中的用户信息变化，同步到表单状态
  useEffect(() => {
    if (user_info && Object.keys(user_info).length > 0) {
      const info = user_info as UserInfoType;
      setFormData({
        nickname: info?.nickname ?? "",
        personal_profile: info?.personal_profile ?? "",
        occupation: info?.occupation ?? "",
        ntrp_level: info?.ntrp_level ?? "",
        phone: info?.phone ?? "",
        gender: info?.gender ?? "",
        birthday: info?.birthday ?? "",
        country: info?.country ?? "",
        province: info?.province ?? "",
        city: info?.city ?? "",
        district: info?.district ?? "",
      });
    }

    const getLastResult = async () => {
      // 获取测试结果
      const res = await evaluateService.getLastResult();
      if (res.code === 0) {
        setNtrpTested(res.data.has_test_in_last_month);
      }
    };
    getLastResult();
  }, [user_info]);

  // 页面加载时初始化数据
  // useEffect(() => {
  //   getCities();
  //   getProfessions();
  // }, []);

  // const getProfessions = async () => {
  //   try {
  //     const res = await UserService.getProfessions();
  //     setProfessions(res);
  //   } catch (e) {
  //     console.log("获取职业失败：", e);
  //   }
  // };
  // const getCities = async () => {
  //   try {
  //     const res = await UserService.getCities();
  //     setCities(res);
  //   } catch (e) {
  //     console.log("获取城市列表失败：", e);
  //   }
  // };

  // 加载用户信息
  // const load_user_info = async () => {
  //   try {
  //     setLoading(true);
  //     const user_data = await UserService.get_user_info();
  //     setUserInfo(user_data);
  //     setFormData({
  //       nickname: user_data.nickname || "",
  //       personal_profile: user_data.personal_profile || "",
  //       occupation: user_data.occupation || "",
  //       ntrp_level: user_data.ntrp_level || "NTRP 4.0",
  //       phone: user_data.phone || "",
  //       gender: user_data.gender || "",
  //       birthday: user_data.birthday || "",
  //       country: user_data.country || "",
  //       province: user_data.province || "",
  //       city: user_data.city || "",
  //     });
  //   } catch (error) {
  //     console.warn("加载用户信息失败:", error);
  //     Taro.showToast({
  //       title: "加载用户信息失败",
  //       icon: "error",
  //       duration: 2000,
  //     });
  //   } finally {
  //     setLoading(false);
  //   }
  // };

  // 处理头像上传
  const handle_avatar_upload = () => {
    Taro.chooseImage({
      count: 1,
      sizeType: ["compressed"],
      sourceType: ["album", "camera"],
      success: async (res) => {
        const tempFilePath = res.tempFilePaths[0];
        try {
          const avatar_url = await UserService.upload_avatar(tempFilePath);
          await updateUserInfo({ avatar_url: avatar_url });
          Taro.showToast({
            title: "头像上传成功",
            icon: "success",
          });
        } catch (error) {
          console.warn("头像上传失败:", error);
          Taro.showToast({
            title: error.message,
            icon: "none",
          });
        }
      },
    });
  };

  // 处理编辑弹窗
  const handle_open_edit_modal = (field: string) => {
    if (field === "gender") {
      setGenderPickerVisible(true);
      return;
    }
    if (field === "birthday") {
      setBirthdayPickerVisible(true);
      return;
    }
    if (field === "location") {
      setLocationPickerVisible(true);
      return;
    }
    if (field === "ntrp_level") {
      setNtrpPickerVisible(true);
      return;
    }
    if (field === "occupation") {
      setOccupationPickerVisible(true);
      return;
    }
    if (field === "nickname") {
      if (!nickname_change_status.can_change) {
        return Taro.showToast({
          title: `30天内仅可修改4次昵称，${nickname_change_status.next_period_start_date}后可修改`,
          icon: "none",
          duration: 2000,
        });
      }
      // 手动输入
      setEditingField(field);
      setEditModalVisible(true);
    } else {
      setEditingField(field);
      setEditModalVisible(true);
    }
  };

  const handle_edit_modal_save = async (value: string) => {
    try {
      // 验证值不能是 undefined 或 null
      if (value === undefined || value === null) {
        Taro.showToast({
          title: "数据不完整，请重新输入",
          icon: "none",
        });
        return;
      }
      // 调用更新用户信息接口，只传递修改的字段
      const update_data = { [editing_field]: value };
      editing_field === "nickname"
        ? await updateNickname(value)
        : await updateUserInfo(update_data);
      // 更新表单状态（store会自动更新）
      setFormData((prev) => ({ ...prev, [editing_field]: value }));

      // 关闭弹窗
      setEditModalVisible(false);
      setEditingField("");

      // 显示成功提示
      Taro.showToast({
        title: "保存成功",
        icon: "success",
      });
    } catch (error) {
      console.warn("保存失败:", error);
      Taro.showToast({
        title: "保存失败",
        icon: "error",
      });
    }
  };

  const handle_edit_modal_cancel = () => {
    setEditModalVisible(false);
    setEditingField("");
  };

  // 处理字段编辑
  const handle_field_edit = async (
    field: string | { [key: string]: string },
    value?: string
  ) => {
    try {
      if (
        typeof field === "object" &&
        field !== null &&
        !Array.isArray(field)
      ) {
        // 验证对象中的值不能是 undefined
        const hasUndefined = Object.values(field).some(
          (v) => v === undefined || v === null
        );
        if (hasUndefined) {
          Taro.showToast({
            title: "数据不完整，请重新选择",
            icon: "none",
          });
          return;
        }
        await updateUserInfo({ ...field });

        // 更新表单状态（store会自动更新）
        setFormData((prev) => ({ ...prev, ...field }));
      } else {
        // 验证值不能是 undefined
        if (value === undefined || value === null) {
          Taro.showToast({
            title: "数据不完整，请重新选择",
            icon: "none",
          });
          return;
        }
        // 调用更新用户信息接口，只传递修改的字段
        const update_data = { [field as string]: value };
        await updateUserInfo(update_data);

        // 更新表单状态（store会自动更新）
        setFormData((prev) => ({ ...prev, [field as string]: value }));
      }
      // 显示成功提示
      Taro.showToast({
        title: "保存成功",
        icon: "success",
      });
    } catch (error) {
      console.warn("保存失败:", error);
      Taro.showToast({
        title: "保存失败",
        icon: "error",
      });
    }
  };

  // 处理性别选择
  const handle_gender_change = (e: any) => {
    if (!Array.isArray(e) || e.length === 0 || e[0] === undefined) {
      Taro.showToast({
        title: "请选择性别",
        icon: "none",
      });
      return;
    }
    const gender_value = e[0];
    handle_field_edit("gender", String(gender_value));
  };

  // 处理生日选择
  const handle_birthday_change = (e: any) => {
    if (!Array.isArray(e) || e.length < 3 || e.some((v) => v === undefined)) {
      Taro.showToast({
        title: "请完整选择生日",
        icon: "none",
      });
      return;
    }
    const [year, month, day] = e;
    handle_field_edit(
      "birthday",
      `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(
        2,
        "0"
      )}`
    );
  };

  // 处理地区选择
  const handle_location_change = (e: any) => {
    if (
      !Array.isArray(e) ||
      e.length < 3 ||
      e.some((v) => v === undefined || v === null)
    ) {
      Taro.showToast({
        title: "请完整选择地区",
        icon: "none",
      });
      return;
    }
    const [province, city, district] = e;
    handle_field_edit({
      province: String(province ?? ""),
      city: String(city ?? ""),
      district: String(district ?? ""),
    });
  };

  // 处理NTRP水平选择
  const handle_ntrp_level_change = (e: any) => {
    // if (!Array.isArray(e) || e.length === 0 || e[0] === undefined) {
    //   Taro.showToast({
    //     title: "请选择NTRP水平",
    //     icon: "none",
    //   });
    //   return;
    // }
    const ntrp_level_value = e[0];
    handle_field_edit("ntrp_level", ntrp_level_value);
  };

  // 处理职业选择
  const handle_occupation_change = (e: any) => {
    if (
      !Array.isArray(e) ||
      e.length === 0 ||
      e.some((v) => v === undefined || v === null)
    ) {
      Taro.showToast({
        title: "请完整选择职业",
        icon: "none",
      });
      return;
    }
    // 职业可能是多级联动，将所有选中的值用空格连接
    const occupation_value = e
      .map((v) => String(v ?? ""))
      .filter(Boolean)
      .join(" ");
    handle_field_edit("occupation", occupation_value);
  };

  // 处理退出登录
  const handle_logout = () => {
    Taro.showModal({
      title: "确认退出",
      content: "确定要退出登录吗？",
      success: (res) => {
        if (res.confirm) {
          // 清除用户数据
          clear_login_state();

          Taro.reLaunch({
            url: "/login_pages/index/index",
          });
        }
      },
    });
  };

  // 注销账户
  const handle_close_account = () => {
    setShowLogoutDialog(true);
  };

  const onGetPhoneNumber = async (e) => {
    if (!e.detail || !e.detail.code) {
      Taro.showToast({
        title: "获取手机号失败，请重试",
        icon: "none",
        duration: 2000,
      });
      return;
    }
    try {
      const phone = await UserService.parse_phone(e.detail.code);
      handle_field_edit("phone", phone);
    } catch (e) {
      console.warn("解析手机号失败:", e);
      Taro.showToast({
        title: "解析手机号失败，请重试",
        icon: "none",
        duration: 2000,
      });
    }
  };

  const handleJoinGroup = () => {
    Taro.navigateTo({
      url: "/user_pages/joinGroup/index",
    });
  };

  const getDefaultOption = (options) => {
    if (!Array.isArray(options) || options.length === 0) {
      return [];
    }

    const defaultOptions: string[] = [];
    let current = options[0];

    while (current) {
      defaultOptions.push(current.text);
      current = current.children?.[0];
    }

    return defaultOptions;
  };

  return (
    <View className="edit_profile_page">
      {/* 导航栏 */}
      {/* <View className="custom-navbar">
        <View className="detail-navigator">
          <View
            className="detail-navigator-back"
            onClick={() => {
              Taro.navigateBack();
            }}
          >
            <Image
              className="detail-navigator-back-icon"
              src={img.ICON_NAVIGATOR_BACK}
            />
          </View>
        </View>
      </View> */}
      {/* 顶部导航栏 */}
      <GeneralNavbar
        title=""
        showBack={true}
        showAvatar={false}
        onBack={() => {
          Taro.navigateBack();
        }}
      />
      {/* 主要内容 */}
      <View className="edit_main_content">
        {loading ? (
          <View className="loading_container">
            <Text className="loading_text">加载中...</Text>
          </View>
        ) : (
          <>
            {/* 头像编辑区域 */}
            <View className="avatar_section">
              <View className="avatar_container" onClick={handle_avatar_upload}>
                <Image
                  className="avatar"
                  src={(user_info as UserInfoType)?.avatar_url || ""}
                  mode="aspectFill"
                />
                <View className="avatar_overlay">
                  <Image
                    className="upload_icon"
                    src={require("@/static/userInfo/edit2.svg")}
                  />
                </View>
              </View>
            </View>

            {/* 基本信息编辑 */}
            <View className="form_section">
              {/* 名字 */}
              <View className="form_group">
                <View
                  className="form_item"
                  onClick={() => handle_open_edit_modal("nickname")}
                >
                  <View className="item_left">
                    <Image
                      className="item_icon"
                      src={require("@/static/userInfo/user.svg")}
                    />
                    <Text className="item_label">名字</Text>
                  </View>
                  <View className="item_right">
                    <Text className="item_value">
                      {form_data.nickname || ""}
                    </Text>
                    <Image
                      className="arrow_icon"
                      src={require("@/static/list/icon-list-right-arrow.svg")}
                    />
                  </View>
                </View>
                <View className="divider"></View>
              </View>

              {/* 性别 */}
              <View className="form_group">
                <View
                  className="form_item"
                  onClick={() => handle_open_edit_modal("gender")}
                >
                  <View className="item_left">
                    <Image
                      className="item_icon"
                      src={require("@/static/userInfo/gender.svg")}
                    />
                    <Text className="item_label">性别</Text>
                  </View>
                  <View className="item_right">
                    <Text
                      className={`item_value ${form_data.gender ? "" : "placeholder"
                        }`}
                    >
                      {convert_db_gender_to_display(form_data.gender)}
                    </Text>
                    <Image
                      className="arrow_icon"
                      src={require("@/static/list/icon-list-right-arrow.svg")}
                    />
                  </View>
                </View>
                <View
                  className="divider"
                  style="transform: translate(0, 0);"
                ></View>
              </View>

              {/* 生日 */}
              <View className="form_group">
                <View
                  className="form_item"
                  onClick={() => handle_open_edit_modal("birthday")}
                >
                  <View className="item_left">
                    <Image
                      className="item_icon"
                      src={require("@/static/userInfo/birthday.svg")}
                    />
                    <Text className="item_label">生日</Text>
                  </View>
                  <View className="item_right">
                    <Text
                      className={`item_value ${form_data.birthday ? "" : "placeholder"
                        }`}
                    >
                      {form_data.birthday || "选择生日"}
                    </Text>
                    <Image
                      className="arrow_icon"
                      src={require("@/static/list/icon-list-right-arrow.svg")}
                    />
                  </View>
                </View>
              </View>
            </View>

            {/* 简介编辑 */}
            <View className="form_section">
              <View className="form_group">
                <View
                  className="form_item"
                  onClick={() => handle_open_edit_modal("personal_profile")}
                >
                  <View className="item_left">
                    <Image
                      className="item_icon"
                      src={require("@/static/userInfo/introduce.svg")}
                    />
                    <Text className="item_label">简介</Text>
                  </View>
                  <View className="item_right">
                    <Text
                      className={`item_value ${form_data.personal_profile ? "" : "placeholder"
                        }`}
                    >
                      {form_data.personal_profile.replace(/\n/g, " ") ||
                        "介绍一下自己"}
                    </Text>
                    <Image
                      className="arrow_icon"
                      src={require("@/static/list/icon-list-right-arrow.svg")}
                    />
                  </View>
                </View>
              </View>
            </View>

            {/* 地区、NTRP水平、职业 */}
            <View className="form_section">
              <View className="form_group">
                {/* 地区 */}
                <View
                  className="form_item"
                  onClick={() => handle_open_edit_modal("location")}
                >
                  <View className="item_left">
                    <Image
                      className="item_icon"
                      src={require("@/static/userInfo/gender.svg")}
                    />
                    <Text className="item_label">地区</Text>
                  </View>
                  <View className="item_right">
                    <Text
                      className={`item_value ${form_data.province ||
                        form_data.city ||
                        form_data.district
                        ? ""
                        : "placehoder"
                        }`}
                    >
                      {form_data.province ||
                        form_data.city ||
                        form_data.district
                        ? `${form_data.province} ${form_data.city} ${form_data.district}`
                        : "选择所在地区"}
                    </Text>
                    <Image
                      className="arrow_icon"
                      src={require("@/static/list/icon-list-right-arrow.svg")}
                    />
                  </View>
                </View>
                <View className="divider"></View>

                {/* NTRP水平 */}
                <View
                  className="form_item"
                  onClick={() => handle_open_edit_modal("ntrp_level")}
                >
                  <View className="item_left">
                    <Image
                      className="item_icon"
                      src={require("@/static/userInfo/ball.svg")}
                    />
                    <Text className="item_label">NTRP 水平</Text>
                  </View>
                  <View className="item_right">
                    <Text
                      className={`item_value ${form_data.ntrp_level ? "" : "placeholder"
                        }`}
                    >
                      {form_data.ntrp_level || "测测你的 NTRP 水平"}
                    </Text>
                    <Image
                      className="arrow_icon"
                      src={require("@/static/list/icon-list-right-arrow.svg")}
                    />
                  </View>
                </View>
                <View className="divider"></View>

                {/* 职业 */}
                <View
                  className="form_item"
                  onClick={() => handle_open_edit_modal("occupation")}
                >
                  <View className="item_left">
                    <Image
                      className="item_icon"
                      src={require("@/static/userInfo/business.svg")}
                    />
                    <Text className="item_label">职业</Text>
                  </View>
                  <View
                    className={`item_right ${form_data.occupation ? "" : "placeholder"
                      }`}
                  >
                    <Text
                      className={`item_value ${form_data.occupation ? "" : "placeholder"
                        }`}
                    >
                      {form_data.occupation || "填写你的职业"}
                    </Text>
                    <Image
                      className="arrow_icon"
                      src={require("@/static/list/icon-list-right-arrow.svg")}
                    />
                  </View>
                </View>
              </View>
            </View>

            {/* 手机号 */}
            <View className="form_section">
              <View className="form_group">
                <View className="form_item">
                  <View className="item_left">
                    <Image
                      className="item_icon"
                      src={require("@/static/userInfo/phone.svg")}
                    />
                    <Text className="item_label">手机</Text>
                  </View>
                  <View className="item_right">
                    {/* <Input
                      className="item_input"
                      value={form_data.phone}
                      placeholder="请输入手机号"
                      type="number"
                      onInput={handle_phone_input}
                      onBlur={handle_phone_blur}
                    /> */}
                    <Button
                      className={form_data.phone ? "" : "placeholer"}
                      openType="getPhoneNumber"
                      onGetPhoneNumber={onGetPhoneNumber}
                    >
                      {form_data.phone
                        ? form_data.phone.replace(
                          /(\d{3})(\d{4})(\d{4})/,
                          "$1 $2 $3"
                        )
                        : "未绑定"}
                    </Button>
                    <Image
                      className="arrow_icon"
                      src={require("@/static/list/icon-list-right-arrow.svg")}
                    />
                  </View>
                </View>
                {/* <View className="divider"></View> */}
              </View>
            </View>

            <View className="logout_section group">
              <View className="logout_button" onClick={handleCustomerService}>
                <Image
                  src={require("@/static/wallet/custom-service.svg")}
                ></Image>
                <Text className="logout_text">客服聊天</Text>
              </View>
              <View className="logout_button" onClick={handleJoinGroup}>
                <Image src={require("@/static/userInfo/chat.svg")}></Image>
                <Text className="logout_text">加入社群</Text>
              </View>
            </View>

            {/* 退出登录 */}
            <View className="logout_section">
              <View className="logout_button" onClick={handle_logout}>
                <Text className="logout_text">退出登录</Text>
              </View>
            </View>

            {/* 注销账号 */}
            <View className="logout_section">
              <View className="logout_button" onClick={handle_close_account}>
                <Text className="logout_text close_account">注销账号</Text>
              </View>
            </View>
          </>
        )}
      </View>

      {/* 编辑弹窗 */}
      <EditModal
        visible={edit_modal_visible}
        type={editing_field}
        title={editing_field === "nickname" ? "编辑名字" : "编辑简介"}
        placeholder={
          editing_field === "nickname"
            ? "请输入您的名字"
            : "介绍一下你的喜好，或者训练习惯"
        }
        initialValue={form_data[editing_field as keyof typeof form_data] || ""}
        maxLength={editing_field === "nickname" ? 24 : 100}
        invalidCharacters={
          editing_field === "nickname"
            ? /^[\u4e00-\u9fa5a-zA-Z0-9_\-\.\(\)\s]*$/
            : null
        }
        onSave={handle_edit_modal_save}
        onCancel={handle_edit_modal_cancel}
        validationMessage={
          editing_field === "nickname"
            ? `请填写 2-24 个字符，不包括 @<>/等无效字符。30 天内可修改 4 次昵称，${nickname_change_status.next_period_start_date} 前还可修改 ${nickname_change_status.remaining_count} 次。`
            : "请填写 2-100 个字符"
        }
      />
      {/* 性别选择弹窗 */}
      {gender_picker_visible && (
        <PopupPicker
          showHeader={true}
          title="选择性别"
          confirmText="保存"
          options={[
            [
              { text: "男", value: "0" },
              { text: "女", value: "1" },
              { text: "保密", value: "2" },
            ],
          ]}
          visible={gender_picker_visible}
          setvisible={setGenderPickerVisible}
          value={form_data.gender === "" ? ["0"] : [form_data.gender]}
          onChange={handle_gender_change}
        />
      )}
      {/* 生日选择弹窗 */}
      {birthday_picker_visible && (
        <PopupPicker
          minYear={1970}
          maxYear={new Date().getFullYear()}
          showHeader={true}
          title="选择生日"
          confirmText="保存"
          visible={birthday_picker_visible}
          setvisible={setBirthdayPickerVisible}
          value={[
            new Date(form_data.birthday || Date.now()).getFullYear(),
            new Date(form_data.birthday || Date.now()).getMonth() + 1,
            new Date(form_data.birthday || Date.now()).getDate(),
          ]}
          type="day"
          onChange={handle_birthday_change}
        />
      )}
      {/* 地区选择弹窗 */}
      {location_picker_visible && (
        <PopupPicker
          showHeader={true}
          title="选择地区"
          confirmText="保存"
          options={cities}
          visible={location_picker_visible}
          setvisible={setLocationPickerVisible}
          value={
            form_data.province
              ? [form_data.province, form_data.city, form_data.district]
              : getDefaultOption(cities)
          }
          onChange={handle_location_change}
        />
      )}
      {/* NTRP水平选择弹窗 */}
      {ntrp_picker_visible && (
        <PopupPicker
          showHeader={true}
          title="选择 NTRP 自评水平"
          confirmText="保存"
          ntrpTested={ntrpTested}
          options={ntrpLevels}
          type="ntrp"
          // img={(user_info as UserInfoType)?.avatar_url}
          visible={ntrp_picker_visible}
          setvisible={setNtrpPickerVisible}
          value={!form_data.ntrp_level ? ["2.5"] : [form_data.ntrp_level]}
          onChange={handle_ntrp_level_change}
        />
      )}
      {/* 职业选择弹窗 */}
      {occupation_picker_visible && (
        <PopupPicker
          showHeader={true}
          title="选择职业"
          confirmText="保存"
          options={professions}
          visible={occupation_picker_visible}
          setvisible={setOccupationPickerVisible}
          value={
            form_data.occupation
              ? [...form_data.occupation.split(" ")]
              : getDefaultOption(professions)
          }
          onChange={handle_occupation_change}
        />
      )}
      {/* 取消关注确认弹窗 */}
      <CommonDialog
        visible={showLogoutDialog}
        cancelText="确定注销"
        confirmText="再想想"
        onCancel={() => {
          UserService.logout();
        }}
        onConfirm={() => setShowLogoutDialog(false)}
        contentTitle="确定要注销账号吗？"
        contentDesc="你的账号将会彻底删除，该操作不可恢复。"
      />
    </View>
  );
};

export default EditProfilePage;