<template>
    <div style="margin: 20px;">
        <a-row :gutter="[16, 16]">
            <a-col :span="24">
                <a-card title="基本设置">
                    <div style="margin:0 auto; width: 128px; padding-bottom: 20px;">
                        <a-upload v-model:file-list="fileList" name="avatar" list-type="picture-card"
                            class="avatar-uploader" :show-upload-list="false"
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :before-upload="beforeUpload"
                            @change="handleChange">
                            <img v-if="imageUrl" :src="imageUrl" alt="avatar" width="100%" height="100%" />
                            <div v-else>
                                <loading-outlined v-if="loading"></loading-outlined>
                                <plus-outlined v-else></plus-outlined>
                                <div class="ant-upload-text">Upload</div>
                            </div>
                        </a-upload>
                    </div>
                    <div class="info"><span>账户</span><span>{{ userInfo.phone }}</span></div>
                    <div class="info"><span>账户ID</span><span>{{ userInfo.id }}</span></div>
                    <div class="info" style="display: flex;justify-content: space-between;">
                        <div v-if="userInfo.certificationStatus !== 'CERTIFICATION_PASSED'">
                            <span style="margin-right: 25px;">认证类型</span><span style="color: red;">未实名认证</span>
                        </div>
                        <div 
                            @click="goCertification" 
                            style="color:#1677ff;" 
                            v-if="userInfo.certificationStatus !== 'CERTIFICATION_PASSED'" >前往认证
                        </div>
                        <div v-if="userInfo.certificationStatus == 'CERTIFICATION_PASSED'">
                            <span style="margin-right: 25px;">认证类型</span><span>{{ certificationInfo.certificationType
                            }}</span>
                        </div>
                    </div>
                </a-card>
            </a-col>
            <a-col :span="24">
                <a-card title="安全设置">
                    <div class="info" style="display: flex;justify-content: space-between;">
                        <div>
                            <span style="margin-right: 38px;width: 80px;">手机号</span><span>{{ userInfo.phone }}</span>
                        </div>

                    </div>
                    <div class="info" style="display: flex;justify-content: space-between;">
                        <div>
                            <span style="margin-right: 25px;">绑定微信</span><span style="color: #666;">未绑定微信</span>
                        </div>
                        <div style="color:#1677ff;cursor: pointer;">绑定</div>
                    </div>
                    <div class="info" style="display: flex;justify-content: space-between;">
                        <div>
                            <span style="margin-right: 25px;cursor: pointer;">登录密码</span><span>********</span>
                        </div>
                        <div style="color:#1677ff;cursor: pointer;" @click="handleModifyPassword">修改</div>
                    </div>
                </a-card>
            </a-col>
        </a-row>

        <!-- 第一步：身份验证对话框（共用） -->
        <a-modal v-model:visible="verifyVisible" title="身份验证" @ok="handleVerify" @cancel="handleCancelVerify"
            :maskClosable="false" :width="480" :ok-button-props="{ disabled: !isVerificationValid }"
            :confirmLoading="verifying" okText="下一步">
            <div class="verify-content">
                <!-- 安全提示 -->
                <div class="security-tip">
                    <!-- <div class="security-icon">🔒</div> -->
                    <div class="security-text">
                        <div class="security-title">为确保账号安全，请您本人操作进行身份验证</div>
                        <div class="security-subtitle">我们将向您绑定的手机发送验证码</div>
                    </div>
                </div>

                <!-- 手机号信息 -->
                <div class="phone-info">
                    <div class="phone-label">验证手机号</div>
                    <div class="phone-number">
                        <!-- <span class="phone-icon">📱</span> -->
                        <span class="phone-text">{{ userInfo.phone }}</span>
                    </div>
                </div>

                <!-- 验证码输入 -->
                <div class="verification-code">
                    <div class="code-label">验证码</div>
                    <div class="code-input-group">
                        <a-input v-model:value="verificationCode" placeholder="请输入6位验证码" :maxlength="6"
                            @input="handleCodeInput" class="code-input" />
                        <a-button type="link" @click="sendVerificationCode" :disabled="countdown > 0 || sendingCode"
                            class="send-code-btn">
                            {{ countdownText }}
                        </a-button>
                    </div>
                    <div v-if="codeError" class="code-error">{{ codeError }}</div>
                </div>

                <!-- 发送状态 -->
                <div v-if="sendStatus" class="send-status" :class="{ 'send-success': sendStatus === '发送成功' }">
                    {{ sendStatus }}
                </div>
            </div>
        </a-modal>

        <!-- 第二步：修改手机号对话框 -->
        <a-modal v-model:visible="changePhoneVisible" title="修改手机号" @ok="handleChangePhone"
            @cancel="handleCancelChangePhone" :maskClosable="false" :width="480"
            :ok-button-props="{ disabled: !isChangeValid }" :confirmLoading="changing">
            <div class="change-phone-content">
                <!-- 安全提示 -->
                <div class="security-tip">
                    <!-- <div class="security-icon">🔒</div> -->
                    <div class="security-text">
                        <div class="security-title">为确保账号安全，请您本人操作进行手机号的修改</div>
                    </div>
                </div>

                <!-- 新手机号输入 -->
                <div class="new-phone-section">
                    <div class="input-label">新手机号</div>
                    <a-input v-model:value="newPhoneNumber" placeholder="请输入新手机号" :maxlength="11"
                        @input="handlePhoneInput" class="phone-input" />
                    <div v-if="phoneError" class="input-error">{{ phoneError }}</div>
                </div>

                <!-- 新手机号验证码 -->
                <div class="verification-code">
                    <div class="code-label">验证码</div>
                    <div class="code-input-group">
                        <a-input v-model:value="newVerificationCode" placeholder="请输入6位验证码" :maxlength="6"
                            @input="handleNewCodeInput" class="code-input" />
                        <a-button type="link" @click="sendNewVerificationCode"
                            :disabled="newCountdown > 0 || sendingNewCode" class="send-code-btn">
                            {{ newCountdownText }}
                        </a-button>
                    </div>
                    <div v-if="newCodeError" class="input-error">{{ newCodeError }}</div>
                </div>
            </div>
        </a-modal>

        <!-- 修改密码对话框 -->
        <a-modal v-model:visible="changePasswordVisible" title="修改密码" @ok="handleChangePassword"
            @cancel="handleCancelChangePassword" :maskClosable="false" :width="480"
            :ok-button-props="{ disabled: !isPasswordValid }" :confirmLoading="changingPassword">
            <div class="change-password-content">
                <!-- 安全提示 -->
                <div class="security-tip">
                    <!-- <div class="security-icon">🔒</div> -->
                    <div class="security-text">
                        <div class="security-title">为确保账号安全，请设置新的登录密码</div>
                    </div>
                </div>

                <!-- 原密码输入 -->
                <div class="password-section">
                    <div class="input-label">原密码</div>
                    <a-input-password v-model:value="oldPassword" placeholder="请输入原密码" @input="handleOldPasswordInput"
                        class="password-input" :visibilityToggle="true" />
                    <div v-if="oldPasswordError" class="input-error">{{ oldPasswordError }}</div>
                </div>

                <!-- 新密码输入 -->
                <div class="password-section">
                    <div class="input-label">新密码</div>
                    <a-input-password v-model:value="newPassword" placeholder="请输入新密码（6-20位字符）"
                        @input="handleNewPasswordInput" class="password-input" :visibilityToggle="true" />
                    <div v-if="newPasswordError" class="input-error">{{ newPasswordError }}</div>
                    <div class="password-tip">
                        <div class="tip-item" :class="{ 'valid': passwordStrength.lengthValid }">
                            <span class="tip-icon">{{ passwordStrength.lengthValid ? '✓' : '○' }}</span>
                            <span>6-20位字符</span>
                        </div>
                        <div class="tip-item" :class="{ 'valid': passwordStrength.hasLetter }">
                            <span class="tip-icon">{{ passwordStrength.hasLetter ? '✓' : '○' }}</span>
                            <span>至少包含字母</span>
                        </div>
                        <div class="tip-item" :class="{ 'valid': passwordStrength.hasNumber }">
                            <span class="tip-icon">{{ passwordStrength.hasNumber ? '✓' : '○' }}</span>
                            <span>至少包含数字</span>
                        </div>
                    </div>
                </div>

                <!-- 确认密码输入 -->
                <div class="password-section">
                    <div class="input-label">确认密码</div>
                    <a-input-password v-model:value="confirmPassword" placeholder="请再次输入新密码"
                        @input="handleConfirmPasswordInput" class="password-input" :visibilityToggle="true" />
                    <div v-if="confirmPasswordError" class="input-error">{{ confirmPasswordError }}</div>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onUnmounted, watch, onBeforeMount } from 'vue';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { message, Modal as AModal, Input as AInput, InputPassword as AInputPassword, Button as AButton } from 'ant-design-vue';
import { certificationInfoApi } from '@/apis/certification';
import { CodeAuth } from '@/apis/home'
import { updatePassword } from '@/apis/modules/login'
import router from '@/router';
const loading = ref(false);
const imageUrl = ref<string | null>("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
const fileList = ref<any[]>([{ url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' }]);
const userInfo = ref<any>({})
const certificationInfo = ref<any>({})
// 操作类型：修改手机号或修改密码
const operationType = ref<'phone' | 'password'>('phone');
// 第一步：身份验证相关状态（共用）
const verifyVisible = ref(false);
const verificationCode = ref('');
const countdown = ref(0);
const sendingCode = ref(false);
const sendStatus = ref('');
const codeError = ref('');
const verifying = ref(false);

// 第二步：修改手机号相关状态
const changePhoneVisible = ref(false);
const newPhoneNumber = ref('');
const newVerificationCode = ref('');
const newCountdown = ref(0);
const sendingNewCode = ref(false);
const newCodeError = ref('');
const phoneError = ref('');
const changing = ref(false);

// 修改密码相关状态
const changePasswordVisible = ref(false);
const oldPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('');
const oldPasswordError = ref('');
const newPasswordError = ref('');
const confirmPasswordError = ref('');
const changingPassword = ref(false);
const successCode = ref('')
// 用户当前绑定的手机号
const currentPhone = ref('17044054908');

// 计算属性
const maskedPhone = computed(() => {
    const phone = currentPhone.value;
    if (phone.length > 7) {
        return phone.slice(0, 3) + '****' + phone.slice(7);
    }
    return phone;
});

const countdownText = computed(() => {
    if (countdown.value > 0) {
        return `${countdown.value}秒后重试`;
    }
    return '获取验证码';
});

const newCountdownText = computed(() => {
    if (newCountdown.value > 0) {
        return `${newCountdown.value}秒后重试`;
    }
    return '获取验证码';
});

const isVerificationValid = computed(() => {
    return verificationCode.value.length === 6 && /^\d+$/.test(verificationCode.value);
});

const isChangeValid = computed(() => {
    return newPhoneNumber.value.length === 11 &&
        /^1[3-9]\d{9}$/.test(newPhoneNumber.value) &&
        newVerificationCode.value.length === 6 &&
        /^\d+$/.test(newVerificationCode.value);
});

// 密码强度验证
const passwordStrength = computed(() => {
    const lengthValid = newPassword.value.length >= 6 && newPassword.value.length <= 20;
    const hasLetter = /[a-zA-Z]/.test(newPassword.value);
    const hasNumber = /\d/.test(newPassword.value);

    return {
        lengthValid,
        hasLetter,
        hasNumber
    };
});

const isPasswordValid = computed(() => {
    const isOldPasswordValid = oldPassword.value.length >= 6;
    const isNewPasswordValid = passwordStrength.value.lengthValid &&
        passwordStrength.value.hasLetter &&
        passwordStrength.value.hasNumber;
    const isConfirmValid = confirmPassword.value === newPassword.value && confirmPassword.value.length > 0;

    return isOldPasswordValid && isNewPasswordValid && isConfirmValid;
});

// 监听密码输入变化
watch(newPassword, (newVal) => {
    if (newVal.length > 0 && newVal.length < 6) {
        newPasswordError.value = '密码长度不能少于6位';
    } else if (newVal.length > 20) {
        newPasswordError.value = '密码长度不能超过20位';
    } else {
        newPasswordError.value = '';
    }

    // 更新确认密码错误提示
    if (confirmPassword.value && confirmPassword.value !== newVal) {
        confirmPasswordError.value = '两次输入的密码不一致';
    } else {
        confirmPasswordError.value = '';
    }
});

watch(confirmPassword, (newVal) => {
    if (newVal && newVal !== newPassword.value) {
        confirmPasswordError.value = '两次输入的密码不一致';
    } else {
        confirmPasswordError.value = '';
    }
});

// 倒计时定时器
let timer: NodeJS.Timeout | null = null;
let newTimer: NodeJS.Timeout | null = null;

// 清理定时器
onUnmounted(() => {
    if (timer) {
        clearInterval(timer);
        timer = null;
    }
    if (newTimer) {
        clearInterval(newTimer);
        newTimer = null;
    }
});

const beforeUpload = (file: File) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('只能上传JPG/PNG格式的图片!');
        return false;
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('图片大小不能超过2MB!');
        return false;
    }
    return isJpgOrPng && isLt2M;
};

const handleChange = (info: any) => {
    if (info.file.status === 'uploading') {
        loading.value = true;
        return;
    }
    if (info.file.status === 'done') {
        const reader = new FileReader();
        reader.addEventListener('load', () => {
            imageUrl.value = reader.result as string;
            loading.value = false;
            message.success('头像上传成功');
        });
        reader.readAsDataURL(info.file.originFileObj);
    }
};

// 修改手机号按钮点击
const handleModifyPhone = () => {
    operationType.value = 'phone';
    showPhoneVerifyDialog();
};

// 修改密码按钮点击
const handleModifyPassword = () => {
    operationType.value = 'password';
    showPhoneVerifyDialog();
};

// 显示身份验证对话框（共用）
const showPhoneVerifyDialog = () => {
    // 重置验证状态
    verificationCode.value = '';
    codeError.value = '';
    sendStatus.value = '';
    verifyVisible.value = true;
};

// 取消身份验证
const handleCancelVerify = () => {
    verifyVisible.value = false;
    // 重置倒计时
    if (timer) {
        clearInterval(timer);
        timer = null;
    }
    countdown.value = 0;
};

// 验证码输入处理
const handleCodeInput = (e: Event) => {
    const target = e.target as HTMLInputElement;
    const value = target.value;
    // 只允许数字
    const numbersOnly = value.replace(/\D/g, '');
    verificationCode.value = numbersOnly.slice(0, 6);

    // 清除错误提示
    if (codeError.value) {
        codeError.value = '';
    }
};

// 发送当前手机号验证码
const sendVerificationCode = async () => {
    if (countdown.value > 0 || sendingCode.value) return;

    sendingCode.value = true;
    sendStatus.value = '发送中...';
    codeError.value = '';

    try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1000));

        // 假设发送成功
        sendStatus.value = '发送成功';
        countdown.value = 60;

        // 开始倒计时
        timer = setInterval(() => {
            countdown.value--;
            if (countdown.value <= 0) {
                if (timer) {
                    clearInterval(timer);
                    timer = null;
                }
            }
        }, 1000);

        message.success('验证码已发送');
    } catch (error) {
        codeError.value = '发送失败，请稍后重试';
        sendStatus.value = '';
    } finally {
        sendingCode.value = false;
    }
};

// 执行身份验证，成功后根据操作类型跳转到相应的下一步
const handleVerify = async () => {
    if (!isVerificationValid.value) {
        codeError.value = '请输入有效的6位验证码';
        return;
    }
    verifying.value = true;
    try {
        // 假设验证成功
        const res: any = await CodeAuth({ code: verificationCode.value, phone: userInfo.value.phone })
        console.log(res)
        if (res) {
            successCode.value = res.success_code
            verifyVisible.value = false;
            // 根据操作类型打开相应的下一步对话框
            if (operationType.value === 'phone') {
                showChangePhoneDialog();
            } else if (operationType.value === 'password') {
                showChangePasswordDialog();
            }
        } else {
             message.error("验证码无效")
        }

    } catch (error) {
        codeError.value = '验证码错误，请重新输入';
        verificationCode.value = '';
    } finally {
        verifying.value = false;
    }
};

// 显示修改手机号对话框
const showChangePhoneDialog = () => {
    // 重置状态
    newPhoneNumber.value = '';
    newVerificationCode.value = '';
    newCodeError.value = '';
    phoneError.value = '';
    changePhoneVisible.value = true;
};

// 取消修改手机号
const handleCancelChangePhone = () => {
    changePhoneVisible.value = false;
    // 重置倒计时
    if (newTimer) {
        clearInterval(newTimer);
        newTimer = null;
    }
    newCountdown.value = 0;
};

// 新手机号输入处理
const handlePhoneInput = (e: Event) => {
    const target = e.target as HTMLInputElement;
    const value = target.value;
    // 只允许数字
    const numbersOnly = value.replace(/\D/g, '');
    newPhoneNumber.value = numbersOnly.slice(0, 11);

    // 清除错误提示
    if (phoneError.value) {
        phoneError.value = '';
    }
    if (newCodeError.value) {
        newCodeError.value = '';
    }
};

// 新验证码输入处理
const handleNewCodeInput = (e: Event) => {
    const target = e.target as HTMLInputElement;
    const value = target.value;
    // 只允许数字
    const numbersOnly = value.replace(/\D/g, '');
    newVerificationCode.value = numbersOnly.slice(0, 6);

    // 清除错误提示
    if (newCodeError.value) {
        newCodeError.value = '';
    }
};

// 发送新手机号验证码
const sendNewVerificationCode = async () => {
    // 验证手机号格式
    if (!newPhoneNumber.value || newPhoneNumber.value.length !== 11) {
        phoneError.value = '请输入11位手机号';
        return;
    }

    if (!/^1[3-9]\d{9}$/.test(newPhoneNumber.value)) {
        phoneError.value = '请输入正确的手机号格式';
        return;
    }

    if (newPhoneNumber.value === currentPhone.value) {
        phoneError.value = '新手机号不能与当前手机号相同';
        return;
    }

    if (newCountdown.value > 0 || sendingNewCode.value) return;

    sendingNewCode.value = true;
    newCodeError.value = '';

    try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1000));

        // 假设发送成功
        newCountdown.value = 60;

        // 开始倒计时
        newTimer = setInterval(() => {
            newCountdown.value--;
            if (newCountdown.value <= 0) {
                if (newTimer) {
                    clearInterval(newTimer);
                    newTimer = null;
                }
            }
        }, 1000);

        message.success('验证码已发送到新手机号');
    } catch (error) {
        newCodeError.value = '发送失败，请稍后重试';
    } finally {
        sendingNewCode.value = false;
    }
};

// 执行手机号修改
const handleChangePhone = async () => {
    if (!isChangeValid.value) {
        // 详细错误提示
        if (!newPhoneNumber.value || newPhoneNumber.value.length !== 11) {
            phoneError.value = '请输入11位手机号';
            return;
        }
        if (!/^1[3-9]\d{9}$/.test(newPhoneNumber.value)) {
            phoneError.value = '请输入正确的手机号格式';
            return;
        }
        if (newPhoneNumber.value === currentPhone.value) {
            phoneError.value = '新手机号不能与当前手机号相同';
            return;
        }
        if (!newVerificationCode.value || newVerificationCode.value.length !== 6) {
            newCodeError.value = '请输入6位验证码';
            return;
        }
        return;
    }

    changing.value = true;

    try {
        // 模拟API调用修改手机号
        await new Promise(resolve => setTimeout(resolve, 1500));

        // 更新当前手机号
        currentPhone.value = newPhoneNumber.value;

        // 关闭对话框
        changePhoneVisible.value = false;

        // 重置所有状态
        resetAllStates();

        message.success('手机号修改成功');

    } catch (error) {
        newCodeError.value = '修改失败，请稍后重试';
    } finally {
        changing.value = false;
    }
};

// 显示修改密码对话框
const showChangePasswordDialog = () => {
    console.log(111)
    // 重置状态
    oldPassword.value = '';
    newPassword.value = '';
    confirmPassword.value = '';
    oldPasswordError.value = '';
    newPasswordError.value = '';
    confirmPasswordError.value = '';
    changePasswordVisible.value = true;
};

// 取消修改密码
const handleCancelChangePassword = () => {
    changePasswordVisible.value = false;
};

// 原密码输入处理
const handleOldPasswordInput = (e: Event) => {
    const target = e.target as HTMLInputElement;
    const value = target.value;
    oldPassword.value = value;

    // 清除错误提示
    if (oldPasswordError.value) {
        oldPasswordError.value = '';
    }
};

// 新密码输入处理
const handleNewPasswordInput = (e: Event) => {
    const target = e.target as HTMLInputElement;
    const value = target.value;
    newPassword.value = value;

    // 清除错误提示
    if (newPasswordError.value) {
        newPasswordError.value = '';
    }
};

// 确认密码输入处理
const handleConfirmPasswordInput = (e: Event) => {
    const target = e.target as HTMLInputElement;
    const value = target.value;
    confirmPassword.value = value;

    // 清除错误提示
    if (confirmPasswordError.value) {
        confirmPasswordError.value = '';
    }
};

// 执行密码修改
const handleChangePassword = async () => {
    if (!isPasswordValid.value) {
        // 详细错误提示
        if (!oldPassword.value || oldPassword.value.length < 6) {
            oldPasswordError.value = '请输入原密码';
            return;
        }
        if (!newPassword.value || newPassword.value.length < 6) {
            newPasswordError.value = '请输入新密码';
            return;
        }
        if (!passwordStrength.value.hasLetter || !passwordStrength.value.hasNumber) {
            newPasswordError.value = '密码必须包含字母和数字';
            return;
        }
        if (!confirmPassword.value) {
            confirmPasswordError.value = '请确认密码';
            return;
        }
        if (confirmPassword.value !== newPassword.value) {
            confirmPasswordError.value = '两次输入的密码不一致';
            return;
        }
        return;
    }

    changingPassword.value = true;

    try {
        const res = await updatePassword({ confirm_password: confirmPassword.value, new_password: newPassword.value, old_password: oldPassword.value, success_code: successCode.value })
        if (res) {
            // 关闭对话框
            changePasswordVisible.value = false;
            // 重置所有状态
            resetPasswordStates();
            message.success('密码修改成功');
            localStorage.clear()
            router.replace('/login')

        }

    } catch (error) {
        oldPasswordError.value = '原密码错误或修改失败';
    } finally {
        changingPassword.value = false;
    }
};

// 重置所有状态
const resetAllStates = () => {
    // 身份验证状态重置
    verificationCode.value = '';
    codeError.value = '';
    sendStatus.value = '';
    if (timer) {
        clearInterval(timer);
        timer = null;
    }
    countdown.value = 0;

    // 修改手机号状态重置
    newPhoneNumber.value = '';
    newVerificationCode.value = '';
    newCodeError.value = '';
    phoneError.value = '';
    if (newTimer) {
        clearInterval(newTimer);
        newTimer = null;
    }
    newCountdown.value = 0;
};

// 重置密码相关状态
const resetPasswordStates = () => {
    oldPassword.value = '';
    newPassword.value = '';
    confirmPassword.value = '';
    oldPasswordError.value = '';
    newPasswordError.value = '';
    confirmPasswordError.value = '';
};
const getCertificationInfo = async () => {
    try {
        const res = await certificationInfoApi();
        certificationInfo.value = res;
    } catch (error) {
        message.error('获取认证信息失败');
    }
};

// 前往认证
const goCertification = () => {
    router.push('/layout/admin/realnameAuth');
};


// 前往修改手机号
onBeforeMount(() => {
    const userInfoStr = localStorage.getItem('userInfo');
    if (userInfoStr) {
        userInfo.value = JSON.parse(userInfoStr);
        if (userInfo.value.certificationStatus === 'CERTIFICATION_PASSED') {
            getCertificationInfo();
        }
    }
})
</script>

<style scoped lang="scss">
.avatar-uploader .ant-upload {
    width: 128px;
    height: 128px;
    border-radius: 50% !important;
    overflow: hidden;
    border: none !important;
    background: none !important;
}

.avatar-uploader img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}

.info {
    display: flex;
    justify-content: flex-start;
    padding: 10px 20px;
    border-bottom: 1px solid #f0f0f0;

    span:first-child {
        width: 80px;
    }

    div[style*="color:#1677ff"] {
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
            color: #0958d9;
        }
    }
}

/* 身份验证对话框样式 */
.verify-content {
    padding: 8px 0;
}

.security-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background: #f6f9ff;
    border-radius: 8px;
    border: 1px solid #e6f0ff;
}

.security-icon {
    font-size: 20px;
    line-height: 1.4;
}

.security-text {
    flex: 1;
}

.security-title {
    color: #1890ff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.security-subtitle {
    color: #595959;
    font-size: 13px;
}

.phone-info {
    margin-bottom: 24px;
    padding: 16px;
    background: #fafafa;
    border-radius: 6px;
    border: 1px solid #f0f0f0;
}

.phone-label {
    color: #595959;
    font-size: 13px;
    margin-bottom: 8px;
}

.phone-number {
    display: flex;
    align-items: center;
    gap: 8px;
}

.phone-icon {
    font-size: 16px;
}

.phone-text {
    color: #262626;
    font-size: 16px;
    font-weight: 500;
}

.verification-code {
    margin-bottom: 16px;
}

.code-label {
    color: #262626;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.code-input-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

.code-input {
    flex: 1;
}

:deep(.code-input .ant-input) {
    height: 40px;
    font-size: 14px;
    letter-spacing: 2px;
}

.send-code-btn {
    width: 100px;
    height: 40px;
    padding: 0;
    white-space: nowrap;
}

.send-code-btn:disabled {
    color: #bfbfbf;
}

.code-error {
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 4px;
    min-height: 20px;
}

.send-status {
    color: #595959;
    font-size: 12px;
    text-align: center;
    margin-top: 8px;
    min-height: 20px;
}

.send-success {
    color: #52c41a;
}

/* 修改手机号对话框样式 */
.change-phone-content {
    padding: 8px 0;
}

.new-phone-section {
    margin-bottom: 24px;
}

.input-label {
    color: #262626;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.phone-input {
    width: 100%;
}

:deep(.phone-input .ant-input) {
    height: 40px;
    font-size: 14px;
}

.input-error {
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 4px;
    min-height: 20px;
}

/* 修改密码对话框样式 */
.change-password-content {
    padding: 8px 0;
}

.password-section {
    margin-bottom: 20px;
}

.password-input {
    width: 100%;
}

:deep(.password-input .ant-input) {
    height: 40px;
    font-size: 14px;
}

.password-tip {
    margin-top: 8px;
    padding: 8px 12px;
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
}

.tip-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #8c8c8c;
    margin-bottom: 4px;

    &:last-child {
        margin-bottom: 0;
    }

    &.valid {
        color: #52c41a;
    }
}

.tip-icon {
    font-size: 10px;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 响应式 */
@media (max-width: 768px) {
    .code-input-group {
        flex-direction: column;
        gap: 8px;
    }

    .send-code-btn {
        width: 100%;
    }
}
</style>