<template>
    <view class="page-bg">
        <navbar title="完善信息" bg="#F6F7F8"></navbar>

        <view class="container" style="padding-top: 20px;">
            <!-- 基本信息 -->
            <view class="form-card">
                <view class="section-title">
                    基本信息 <text class="required">*</text>
                </view>
                
                <view class="form-item">
                    <view class="label">姓名</view>
                    <input class="input" type="text" placeholder="请填写姓名" placeholder-class="placeholder-style" v-model="formData.name" />
                </view>
                
                <view class="form-item">
                    <view class="label">出生年月</view>
                    <picker mode="date" @change="onDateChange">
                        <view class="picker-view" :class="{'has-value': formData.birth}">
                            <text>{{ formData.birth || '请选择出生年月' }}</text>
                            <image src="https://xh.stnav.com/uploads/sport/icon_down.png" style="width: 36rpx; height: 36rpx;"  mode="aspectFit"></image>
                        </view>
                    </picker>
                </view>

                <view class="form-item no-border">
                    <view class="label">身份证号</view>
                    <input class="input" type="idcard" placeholder="请输入身份证号码" placeholder-class="placeholder-style" v-model="formData.idCard" />
                </view>
            </view>

            <!-- 随行子女信息 -->
            <view class="form-card" v-if="comboType === 'family'">
                <view class="section-title">
                    随行子女信息 <text class="required">*</text>
                </view>
                
                <view class="form-item">
                    <view class="label">姓名</view>
                    <input class="input" type="text" placeholder="请填写姓名" placeholder-class="placeholder-style" v-model="formData.childName" />
                </view>
                
                <view class="form-item">
                    <view class="label">出生年月</view>
                    <picker mode="date" @change="onChildDateChange">
                        <view class="picker-view" :class="{'has-value': formData.childBirth}">
                            <text>{{ formData.childBirth || '请选择出生年月' }}</text>
                            <image src="https://xh.stnav.com/uploads/sport/icon_down.png" style="width: 36rpx; height: 36rpx;"  mode="aspectFit"></image>
                        </view>
                    </picker>
                </view>

                <view class="form-item no-border">
                    <view class="label">身份证号</view>
                    <input class="input" type="idcard" placeholder="请输入身份证号码" placeholder-class="placeholder-style" v-model="formData.childIdCard" />
                </view>
            </view>

            <!-- 联系方式 -->
            <view class="form-card">
                <view class="section-title">
                    联系方式 <text class="required">*</text>
                </view>
                
                <view class="form-item-row no-border">
                    <view class="label">联系电话</view>
                    <input class="input-grey" type="number" placeholder="请填写联系方式" placeholder-class="placeholder-style-small" v-model="formData.phone" />
                </view>
            </view>

            <!-- 提示信息 -->
            <view class="tips">
                *提交表单申请，工作人员将在3个工作日内进行审核，如需及时了解，请直接电话咨询，我们将在第一时间解答
            </view>
            
            <!-- 底部按钮 -->
            <view class="footer-bar">
                <view class="btn btn-default" @click="contactUs">联系我们</view>
                <view class="btn btn-primary" @click="submitForm">提交申请</view>
            </view>

            <!-- 提交成功弹窗 -->
            <view class="modal-container" v-if="showSuccessPopup">
                <view class="modal-mask" @click="showSuccessPopup = false"></view>
                <view class="modal-content">
                    <!-- 注：根据设计图比例此处设为280rpx，猜测28rpx属于笔误 -->
                    <image class="modal-icon" src="https://xh.stnav.com/uploads/sport/add-success.png" style="width: 280rpx; height: 280rpx;"></image>
                    <view class="modal-title">信息提交成功</view>
                    <view class="modal-desc">请您耐心等候，我们将尽快为您审核</view>
                    <view class="modal-btn" @click="confirmSuccess">好的</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import navbar from '@/components/navbar.vue';

export default {
    components: {
        navbar,
    },
    data() {
        return {
            showSuccessPopup: false,
            comboType: 'adult', // 套餐类型：adult(成人卡) youth(青年卡) family(亲子卡)
            formData: {
                name: '',
                birth: '',
                idCard: '',
                phone: '',
                childName: '',
                childBirth: '',
                childIdCard: ''
            }
        }
    },
    onLoad(args) {
        this.comboType = args.type || 'adult'
    },
    methods: {
        onDateChange(e) {
            this.formData.birth = e.detail.value;
        },
        onChildDateChange(e) {
            this.formData.childBirth = e.detail.value;
        },
        contactUs() {
            uni.showToast({ title: '正在连接客服...', icon: 'none' });
        },
        submitForm() {
            if(!this.formData.name || !this.formData.birth || !this.formData.idCard || !this.formData.phone) {
                return uni.showToast({ title: '请填写完整包含星号的信息', icon: 'none' });
            }
            if(this.comboType === 'family') {
                if(!this.formData.childName || !this.formData.childBirth || !this.formData.childIdCard) {
                    return uni.showToast({ title: '请填写随行子女信息', icon: 'none' });
                }
            }
            this.showSuccessPopup = true;
        },
        confirmSuccess() {
            this.showSuccessPopup = false;
            // 点击好的之后，可以跳转或返回上一页
            uni.navigateBack();
        }
    }
}
</script>

<style lang="scss">
page {
    background-color: #F6F7F8;
}

.page-bg {
    background-color: #F6F7F8;
    min-height: 100vh;
}

.container {
    padding: 24rpx 30rpx 200rpx;
}

.form-card {
    background-color: #FFFFFF;
    border-radius: 12rpx;
    padding: 40rpx 30rpx;
    margin-bottom: 24rpx;
}

.section-title {
    font-size: 32rpx;
    color: #333333;
    font-weight: 500;
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
    
    .required {
        color: #E53935;
        margin-left: 8rpx;
        font-weight: normal;
    }
}

.form-item {
    margin-bottom: 10rpx;
    border-bottom: 2rpx solid #F5F5F5;
    padding-bottom: 16rpx;
    
    &.no-border {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .label {
        font-size: 28rpx;
        color: #666666;
        margin-bottom: 20rpx;
        margin-top: 30rpx;
    }
    
    .input {
        font-size: 30rpx;
        color: #333333;
        width: 100%;
        height: 60rpx;
    }
    
    .picker-view {
        font-size: 30rpx;
        color: #CCCCCC;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        &.has-value {
            color: #333333;
        }
        .arrow-down {
            font-size: 30rpx;
            color: #CCCCCC;
            margin-left: 10rpx;
            transform: scaleY(0.6);
        }
    }
}

.form-item-row {
    display: flex;
    align-items: center;
    margin-top: 30rpx;
    
    .label {
        font-size: 30rpx;
        color: #333333;
        width: 160rpx;
    }
    
    .input-grey {
        flex: 1;
        background-color: #F6F7F8;
        height: 80rpx;
        border-radius: 8rpx;
        padding: 0 24rpx;
        font-size: 28rpx;
        color: #333333;
    }
}

.placeholder-style {
    color: #CCCCCC;
    font-size: 30rpx;
}

.placeholder-style-small {
    color: #CCCCCC;
    font-size: 28rpx;
}

.tips {
    font-size: 26rpx;
    color: #666666;
    line-height: 1.6;
    padding: 20rpx 10rpx;
}

.footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    background-color: #F6F7F8;
    padding: 20rpx 30rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    
    .btn {
        flex: 1;
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        border-radius: 8rpx;
    }
    
    .btn-default {
        background-color: #FFFFFF;
        color: #333333;
        margin-right: 20rpx;
    }
    
    .btn-primary {
        background-color: #3B5B9B;
        color: #FFFFFF;
    }
}

.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100; // 遮罩层要在最上面
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); // 半透明黑色背景
}

.modal-content {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border-radius: 48rpx 48rpx 0 0;
    padding: 70rpx 50rpx;
    padding-bottom: calc(70rpx + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 101; // 内容在遮罩层上方

    .modal-icon {
        margin-bottom: 40rpx;
    }

    .modal-title {
        font-size: 36rpx;
        color: #333333;
        font-weight: 500;
        margin-bottom: 20rpx;
    }

    .modal-desc {
        font-size: 26rpx;
        color: #999999;
        margin-bottom: 174rpx;
        text-align: center;
    }

    .modal-btn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        background-color: #3B5B9B;
        color: #FFFFFF;
        font-size: 32rpx;
        border-radius: 8rpx;
    }
}
</style>