<script setup lang="ts">
    import { reactive } from 'vue'
    import * as LinghuoyonggongAPI from '@/api/model/linghuoyonggong'
    import { useUserStore } from '@/store/modules/user'

    const { getUserInfo } = useUserStore()

    const pageData = reactive({
        show: false,
        content: '',
        form: {
            employmentId: '',
            userId: '',
            reservedname: null,
            reservedmobile: null,
        },
        rules: [
            {
                name: 'reservedname',
                rule: ['required'],
                msg: ['请输入预留姓名'],
            },
            {
                name: 'reservedmobile',
                rule: ['required', 'isMobile'],
                msg: ['请输入预留手机', '请输入正确的手机号'],
            },
        ],
    })
    function open(params) {
        reset()
        pageData.form.employmentId = params.id
        pageData.form.userId = getUserInfo.id
        pageData.show = true
    }
    function close() {
        pageData.show = false
    }
    function reset() {
        pageData.form = {
            employmentId: '',
            userId: '',
            reservedname: null,
            reservedmobile: null,
        }
    }
    const formRef = ref()
    function submit() {
        formRef.value.validator(pageData.form, pageData.rules, true).then((res) => {
            if (res.isPassed) {
                LinghuoyonggongAPI.employmentRegister(pageData.form).then(() => {
                    reset()
                    close()
                    uni.showToast({
                        title: '报价成功',
                        icon: 'success',
                    })
                })
            }
        })
    }
    defineExpose({
        open,
        close,
    })
</script>

<template>
    <fui-dialog title="" :buttons="[]" :show="pageData.show" maskClosable>
        <view class="title flex justify-center">
            <view class="flex-1">报名</view>
            <fui-icon class="close flex-basis" name="close" size="46" color="#999999" @click="close" />
        </view>
        <view class="text-left">
            <fui-form ref="formRef">
                <fui-input
                    marginTop="30"
                    size="28"
                    placeholder="请填写姓名"
                    v-model="pageData.form.reservedname"
                    required
                    maxlength="16"
                    placeholderStyle="margin-left: 10rpx"
                />
                <fui-input
                    marginTop="30"
                    size="28"
                    placeholder="请填写预留手机"
                    v-model="pageData.form.reservedmobile"
                    required
                    type="number"
                    maxlength="11"
                    placeholderStyle="margin-left: 10rpx"
                />
                <view style="margin-top: 30rpx">
                    <fui-button text="提交" bold radius="96rpx" @click="submit" />
                </view>
            </fui-form>
        </view>
    </fui-dialog>
</template>

<style lang="scss" scoped>
    :deep(.fui-dialog__body) {
        background: linear-gradient(0deg, rgba(93, 182, 111, 0) 0%, rgba(93, 182, 111, 0.25) 100%);
        margin: 0;
    }
    :deep(.fui-dialog__footer) {
        display: none;
    }
    :deep(.fui-input) {
        margin-top: 40rpx;
    }
</style>
