<template>
    <view v-if="visible" class="manual-bind-mask" @click="close">
        <view class="manual-bind-panel" @click.stop>
            <text class="panel-title">手动绑定孩子账号</text>
            <input
                v-model="childAccount"
                class="panel-input"
                type="text"
                placeholder="请输入孩子账号"
                placeholder-class="panel-placeholder"
                :adjust-position="false"
                @confirm="confirm"
            />
            <view class="panel-actions">
                <view class="panel-btn cancel" @click="close">取消</view>
                <view class="panel-btn primary" :class="{ disabled: submitting }" @click="confirm">
                    {{ submitting ? '绑定中...' : '绑定' }}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { manualBindChild } from '@/api/parent';

const props = defineProps<{
    visible: boolean;
}>();

const emit = defineEmits<{
    (e: 'update:visible', value: boolean): void;
    (e: 'success'): void;
}>();

const childAccount = ref('');
const submitting = ref(false);

watch(
    () => props.visible,
    (val) => {
        if (!val) childAccount.value = '';
    },
);

const close = () => {
    if (submitting.value) return;
    emit('update:visible', false);
};

const confirm = async () => {
    const acc = childAccount.value.trim();
    if (!acc) {
        uni.showToast({ title: '请输入孩子账号', icon: 'none' });
        return;
    }
    if (submitting.value) return;

    submitting.value = true;
    try {
        const res = await manualBindChild(acc);
        const code = Number(res.data);
        if (code === 1) {
            uni.showToast({ title: '绑定成功', icon: 'success' });
            emit('success');
            emit('update:visible', false);
        } else if (code === 2) {
            uni.showToast({ title: '已向管理员发送绑定请求', icon: 'none' });
            emit('success');
            emit('update:visible', false);
        } else {
            uni.showToast({ title: '绑定失败', icon: 'none' });
        }
    } catch (e: any) {
        uni.showToast({ title: e?.message || '绑定失败', icon: 'none' });
    } finally {
        submitting.value = false;
    }
};
</script>

<style lang="scss" scoped>
.manual-bind-mask {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48rpx;
}

.manual-bind-panel {
    width: 100%;
    max-width: 620rpx;
    padding: 40rpx 36rpx 32rpx;
    border-radius: 32rpx;
    background: #fff;
    box-shadow: 0 24rpx 60rpx rgba(8, 145, 178, 0.18);
}

.panel-title {
    display: block;
    color: #164e63;
    font-size: 34rpx;
    font-weight: 900;
    text-align: center;
}

.panel-input {
    height: 88rpx;
    margin-top: 32rpx;
    padding: 0 24rpx;
    border-radius: 20rpx;
    border: 2rpx solid #e2e8f0;
    background: #f8fafc;
    color: #164e63;
    font-size: 28rpx;
}

.panel-placeholder {
    color: #94a3b8;
}

.panel-actions {
    display: flex;
    gap: 20rpx;
    margin-top: 36rpx;
}

.panel-btn {
    flex: 1;
    height: 80rpx;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    font-weight: 700;

    &.cancel {
        color: #64748b;
        background: #f1f5f9;
    }

    &.primary {
        color: #fff;
        background: linear-gradient(135deg, #0891b2, #06b6d4);

        &.disabled {
            opacity: 0.6;
        }
    }
}
</style>
