import { reactive } from 'vue';
import StepLayout from '../../components/step-layout/step-layout.vue';

export default {
    components: {
        StepLayout
    },
    setup() {
        const formData = reactive({
            avatar: '',
            name: '',
            gender: 'F', // Default to female as per image
            idCard: '',
            email: ''
        });

        const chooseAvatar = () => {
            uni.chooseImage({
                count: 1,
                success: (res) => {
                    formData.avatar = res.tempFilePaths[0];
                }
            });
        };

        const setGender = (val) => {
            formData.gender = val;
        };

        const goNext = () => {
            uni.navigateTo({
                url: '/pages/experience/experience'
            });
        };

        const goSkip = () => {
            uni.navigateTo({
                url: '/pages/experience/experience'
            });
        };

        return {
            formData,
            chooseAvatar,
            setGender,
            goNext,
            goSkip
        };
    }
}