<template>
    <van-popup v-model:show="show" destroy-on-close round position="bottom">
        <div class=" h-8 bg-blue-200/10 flex items-center justify-center font-semibold">成为代理</div>
        <div v-if="ancestor" class="text-center text-xs my-2 text-gray-500">{{ maskName(ancestor) }}邀您成为天远数据代理方</div>
        <div class="p-4">
            <van-field label-width="56" v-model="form.region" is-link readonly label="地区" placeholder="请选择地区"
                @click="showCascader = true" />
            <van-popup v-model:show="showCascader" round position="bottom">
                <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="showCascader = false"
                    @finish="onFinish" />
            </van-popup>
            <van-field label-width="56" v-model="form.wechat_id" label="微信号" name="wechat_id" placeholder="请输入微信号" />
            <van-field label-width="56" v-model="form.mobile" label="手机号" name="mobile" placeholder="请输入手机号" />

            <!-- 获取验证码按钮 -->
            <div class="flex items-center justify-between">
                <van-field label-width="56" v-model="form.code" label="验证码" name="code" placeholder="请输入验证码" />
                <button class="px-2 py-1 text-sm font-bold flex-shrink-0 rounded-lg transition duration-300"
                    :class="isCountingDown || !isPhoneNumberValid ? 'cursor-not-allowed bg-gray-300 text-gray-500' : 'bg-blue-500 text-white hover:bg-blue-600'"
                    @click="getSmsCode">
                    {{ isCountingDown ? `${countdown}s重新获取` : '获取验证码' }}
                </button>
            </div>
            <!-- 同意条款的复选框 -->
            <div class="p-4">
                <div class="flex items-start">
                    <van-checkbox v-model="isAgreed" name="agree" icon-size="16px" class=" flex-shrink-0 mr-2">
                    </van-checkbox>
                    <div class="text-xs text-gray-400 leading-tight">
                        我已阅读并同意
                        <a class="cursor-pointer text-blue-400" @click="toUserAgreement">《用户协议》</a><a
                            class="cursor-pointer text-blue-400" @click="toServiceAgreement">《信息技术服务合同》</a><a
                            class="cursor-pointer text-blue-400" @click="toAgentManageAgreement">《推广方管理制度协议》</a>
                        <div class="text-xs text-gray-400 mt-1">点击勾选即代表您同意上述法律文书的相关条款并签署上述法律文书</div>
                        <div class="text-xs text-gray-400 mt-1">手机号未在本平台注册账号则申请后将自动生成账号</div>

                    </div>
                </div>
            </div>

            <div class="mt-4">
                <van-button type="primary" round block @click="submit">提交申请</van-button>
            </div>
            <div class="mt-2">
                <van-button type="default" round block @click="closePopup">取消</van-button>
            </div>
        </div>
    </van-popup>
</template>

<script setup>
const router = useRouter()
const show = defineModel('show')
import { useCascaderAreaData } from '@vant/area-data';
import { showToast } from 'vant';  // 引入 showToast 方法
const emit = defineEmits();  // 确保 emit 可以正确使用
const props = defineProps({
    ancestor: {
        type: String,
        required: true
    }
})
const { ancestor } = toRefs(props);
const form = ref({
    region: '',
    mobile: '',
    wechat_id: '',
    code: '',  // 增加验证码字段
});
const showCascader = ref(false);
const cascaderValue = ref('');
const options = useCascaderAreaData();
const loadingSms = ref(false);  // 控制验证码按钮的loading状态
const isCountingDown = ref(false)
const isAgreed = ref(false)
const countdown = ref(60)
const onFinish = ({ selectedOptions }) => {
    showCascader.value = false;
    form.value.region = selectedOptions.map((option) => option.text).join('/');
};
const isPhoneNumberValid = computed(() => {
    return /^1[3-9]\d{9}$/.test(form.value.mobile)
})

const getSmsCode = async () => {
    if (!form.value.mobile) {
        showToast({ message: '请输入手机号' });
        return;
    }

    if (!isPhoneNumberValid.value) {
        showToast({ message: '手机号格式不正确' });
        return;
    }

    loadingSms.value = true;

    const { data, error } = await useApiFetch('auth/sendSms')
        .post({ mobile: form.value.mobile, actionType: 'agentApply' })
        .json();

    loadingSms.value = false;

    if (data.value && !error.value) {
        if (data.value.code === 200) {
            showToast({ message: "获取成功" });
            startCountdown();  // 启动倒计时
        } else {
            showToast(data.value.msg);
        }
    }
};
let timer = null

function startCountdown() {
    isCountingDown.value = true
    countdown.value = 60
    timer = setInterval(() => {
        if (countdown.value > 0) {
            countdown.value--
        } else {
            clearInterval(timer)
            isCountingDown.value = false
        }
    }, 1000)
}
onUnmounted(() => {
    if (timer) {
        clearInterval(timer)
    }
})
const submit = () => {
    // 校验表单字段
    if (!form.value.region) {
        showToast({ message: '请选择地区' });
        return;
    }
    if (!form.value.mobile) {
        showToast({ message: '请输入手机号' });
        return;
    }

    if (!isPhoneNumberValid.value) {
        showToast({ message: '手机号格式不正确' });
        return;
    }

    if (!form.value.wechat_id) {
        showToast({ message: '请输入微信号' });
        return;
    }

    if (!form.value.code) {
        showToast({ message: '请输入验证码' });
        return;
    }
    if (!isAgreed.value) {
        showToast({ message: "请先阅读并同意用户协议及相关条款" });
        return
    }
    console.log("form", form.value)
    // 触发父组件提交申请
    emit('submit', form.value);
};
const maskName = computed(() => {
    return (name) => {
        return name.substring(0, 3) + "****" + name.substring(7);
    }
})
const closePopup = () => {
    emit('close');
};

const toUserAgreement = () => {
    router.push({ name: "userAgreement" })
}
const toServiceAgreement = () => {
    router.push({ name: "agentSerivceAgreement" })

}
const toAgentManageAgreement = () => {
    router.push({ name: "agentManageAgreement" })

}
</script>
