<template>
    <view class="popup-tip">
        <view class="popup-tip-content">
            <view class="content-1">
                <image :src="`${$baseUrl}chanjianTool/1001/tip-mark.png`"></image>
            </view>
            <view class="content-2">
                <template v-if="isType == '3'">
                    当前状态已达上限
                </template>
                <template v-else>
                    {{ type == '1' ? '当前非宝宝状态' : '当前非孕中状态' }}
                </template>

            </view>
            <view :class="['content-3', isType == '3' ? 'content-3-3' : '']">
                <template v-if="isType == '3'">
                    当前状态已经达到添加上限哦
                </template>
                <template v-else>
                    <template v-if="type == '2'">
                        可以去{{ pregnancyStatus }}状态
                    </template>
                    <template v-else-if="type == '1'">
                        可以去{{ babyStatus }}状态
                    </template>
                </template>
            </view>
            <view class="content-4">
                <template v-if="isType == '3'">

                </template>
                <template v-else>
                    再使用工具哦
                </template>

            </view>

            <view class="form-btn" @click="onAdd">
                <image v-if="isType == '0' || isType == '2'" :src="`${$baseUrl}chanjianTool/1001/icon23.png`"></image>
                <template v-if="type == '1'">
                    {{ isType == '0' ? '添加宝宝' : isType == '3' ? '我知道了' : isType == '1' ? '切换状态' : '修改状态' }}
                </template>
                <template v-if="type == '2'">
                    {{ isType == '0' ? '添加状态' : isType == '3' ? '我知道了' : isType == '1' ? '切换状态' : '修改状态' }}
                </template>
                <button v-if="isNotLogin" type="primary" class="phone-button" open-type="getPhoneNumber"
                    @getphonenumber="getRealtimePhoneNumber" />
            </view>
        </view>
    </view>
</template>

<script setup>
import {
    ref,
    onMounted,
    computed,
    defineEmits,
    watch
} from 'vue'
import { useUserStore } from "@/stores/user";
// 接受父组件参数
const props = defineProps({
    type: {
        type: String,
        default: '1', // 1 非宝宝状态  2 非孕中状态
    },
    isNotLogin: {
        type: Boolean,
        default: false   //是否未登录
    }
})
// 用户信息
const userStore = useUserStore();
const babyInfo = ref(userStore.babyInfo)

// 回调函数
const emit = defineEmits(['statusChange', 'close'])

const isType = ref('0')  // 0 添加状态或者宝宝  1 切换状态 2 修改状态  3 宝宝已达上限

// 对应的id
const babyBaseId = ref('')

// 产检信息
const pregnancyStatus = computed(() => {
    return isType.value == '0' ? '新增孕中'
        : isType.value == '1' ? '切换孕中'
            : isType.value == '2' ? '修改备孕'
                : '';
})
// 生长曲线和喂养记录
const babyStatus = computed(() => {
    return isType.value == '0' ? '新增宝宝'
        : isType.value == '1' ? '切换宝宝'
            : isType.value == '2' ? (babyInfo.value.babyStage == 0 ? '修改备孕' :
                babyInfo.value.babyStage == 1 ? '修改孕中' : '')
                : '';
})
// 跳转新增宝宝状态页面
const navigateToFn = () => {
    emit('close')
    const type = 'add'
    uni.navigateTo({
        url: `/pages/person/person?type=${type}`
    })
}
const getRealtimePhoneNumber = async (e) => {
    console.log("获取手机号码", e);

    if (e.detail.errMsg !== "getPhoneNumber:ok") {
        uni.showToast({
            title: "请授权使用手机号",
            icon: "none",
        });
        return;
    }
    await userStore.phoneCallback(e.detail, () => { }, () => {

        emit('afterPhone') //如果没有宝宝信息，页面中处理宝宝注册信息
    });
    console.log("closeclosecloseclose");

    emit('close')
    emit('statusChange') //借用这个事件，刷新下页面数据
};
// 切换状态 需要对应的宝宝id 直接请求接口
const switchState = async () => {
    console.log('切换状态', babyBaseId.value)
    await userStore.changeBabySelected(babyBaseId.value);
    // 发送事件 通知主页面
    emit('statusChange')
}
// 修改状态 需要对应备胎的id  跳转到编辑页面
const modifyState = async () => {
    emit('close')
    console.log('修改状态', babyBaseId.value)
    await userStore.changeBabySelected(babyBaseId.value);
    const type = "edit"
    // navigateTo
    uni.navigateTo({
        url: `/pages/person/person?type=${type}&id=${babyBaseId.value}`
    })
}
//这里新增一下未登录的情况，点击事件直接去拉起手机号授权
// 跳转新增产检页面
const onAdd = () => {
    if (props.isNotLogin == true) {
        return;
    }
    // 0 添加状态或者宝宝  1 切换状态 2 修改状态  3 宝宝已达上限
    switch (isType.value) {
        case '0':
            navigateToFn()
            break;
        case '1':
            switchState()
            break;
        case '2':
            modifyState()
            break;
        case '3':
            if (getCurrentPages().length > 1) {
                uni.navigateBack()
            } else {
                uni.reLaunch({
                    url: '/pages/index/index'
                })
            }

            break;
        default:
            break;
    }
}

onMounted(async () => {
    if (props.isNotLogin) {
        await userStore.wxAutoLogin();
    }

    // 宝宝生长测试和喂养记录
    console.log('babyInfo-获取宝宝', babyInfo.value)
    const babyBaseInfo = babyInfo?.value?.allBabyBaseInfo
    console.log("🚀 ~ babyBaseInfo:", babyBaseInfo)
    // 有宝宝状态
    if (babyBaseInfo) {
        // 2 判断宝宝信息是否达到上限 3个
        if (babyBaseInfo.length >= 3) {
            // 产检提醒和喂养记录
            if (props.type == '1') {
                // 判断有没有宝宝状态切换到宝宝状态
                const stageOneBaby = babyBaseInfo.find(baby => baby.babyStage == 2);
                const hasStage = !!stageOneBaby; // 如果找到，hasStage 为 true
                if (hasStage) {
                    isType.value = '1';
                    // 如果找到符合条件的 baby，取出它的 id 并赋值
                    babyBaseId.value = stageOneBaby.id;
                } else {  // 修改 
                    console.log('没有找到符合条件的 baby');
                    // // 判断没有备孕的状态
                    // if (!babyBaseInfo.some(baby => baby.babyStage == 0)) {
                    //     isType.value = '3'
                    // } else {
                    //     const stageZeroBaby = babyBaseInfo.find(baby => baby.babyStage == 0);
                    //     babyBaseId.value = stageZeroBaby.id;
                    //     isType.value = '2';
                    // }
                    babyBaseId.value = babyInfo.value.content.id;
                    isType.value = '2';

                }
            }
            //   产检提醒
            if (props.type == '2') {
                // 判断有没有孕中状态切换到孕中状态
                const stageOneBaby = babyBaseInfo.find(baby => baby.babyStage == 1);
                const hasStage = !!stageOneBaby; // 如果找到，hasStage 为 true
                if (hasStage) {
                    isType.value = '1';
                    // 如果找到符合条件的 baby，取出它的 id 并赋值
                    babyBaseId.value = stageOneBaby.id;
                } else {  // 修改
                    // // 判断没有备孕的状态
                    if (!babyBaseInfo.some(baby => baby.babyStage == 0)) {
                        isType.value = '3'
                    } else {
                        const stageZeroBaby = babyBaseInfo.find(baby => baby.babyStage == 0);
                        babyBaseId.value = stageZeroBaby.id;
                        isType.value = '2';
                    }
                    // babyBaseId.value = babyInfo.value.content.id;
                    // isType.value = '2';
                }
            }
        } else {
            console.log("🚀 ~ 状态不够三个")
            // 产检提醒和喂养记录
            if (props.type == '1') {
                // 判断有没有宝宝状态切换到宝宝状态
                const stageOneBaby = babyBaseInfo.find(baby => baby.babyStage == 2);
                const hasStage = !!stageOneBaby; // 如果找到，hasStage 为 true
                if (hasStage) {
                    isType.value = '1';
                    // 如果找到符合条件的 baby，取出它的 id 并赋值
                    babyBaseId.value = stageOneBaby.id;
                } else {  // 修改 
                    console.log('没有找到符合条件的 baby', babyInfo.value);
                    // // 判断没有备孕的状态
                    // if (!babyBaseInfo.some(baby => baby.babyStage == 0)) {
                    //     isType.value = '0'
                    // } else {
                    //     const stageZeroBaby = babyBaseInfo.find(baby => baby.babyStage == 0);
                    babyBaseId.value = babyInfo.value.content.id;
                    isType.value = '2';
                    // }

                }
            }
            //   产检提醒
            if (props.type == '2') {
                // 判断有没有孕中状态切换到孕中状态
                const stageOneBaby = babyBaseInfo.find(baby => baby.babyStage == 1);
                const hasStage = !!stageOneBaby; // 如果找到，hasStage 为 true
                if (hasStage) {
                    isType.value = '1';
                    // 如果找到符合条件的 baby，取出它的 id 并赋值
                    babyBaseId.value = stageOneBaby.id;
                } else {  // 修改
                    // 判断没有备孕的状态
                    if (!babyBaseInfo.some(baby => baby.babyStage == 0)) {
                        isType.value = '0'
                    } else {
                        const stageZeroBaby = babyBaseInfo.find(baby => baby.babyStage == 0);
                        babyBaseId.value = stageZeroBaby.id;
                        isType.value = '2';
                    }
                    // babyBaseId.value = babyInfo.value.content.id;
                    // isType.value = '2';
                }
            }
        }
    } else {  // 没有宝宝状态
        isType.value = '0'
    }

})
</script>

<style lang="scss" scoped>
.popup-tip {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    &-content {
        width: 661rpx;
        height: 492rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 52rpx;
        background: #ffffff;

        .content-1 {
            width: 79rpx;
            height: 79rpx;
            margin-top: 35rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .content-2 {
            font-size: 37rpx;
            color: #d3a358;
            margin-top: 20rpx;
        }

        .content-3 {
            margin-top: 20rpx;
        }

        .content-4 {
            margin-top: 12rpx;
        }

        .content-3-3 {
            margin-top: 60rpx;
        }

        .content-3,
        .content-4 {
            font-size: 30rpx;
            color: #000000;
        }

    }
}

// 保存
.form-btn {
    width: 565rpx;
    height: 97rpx;
    border-radius: 48rpx;
    background-color: #d3a358;
    color: #ffffff;
    font-size: 38rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 55rpx;
    position: relative;

    image {
        width: 42rpx;
        height: 42rpx;
        margin-right: 12rpx;
    }

    .phone-button {
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
    }
}
</style>