<script setup lang="ts">
    import { reactive, ref, onMounted } from 'vue'
    import * as NongjifuwuAPI from '@/api/model/nongjifuwu'
    import { useUserStore } from '@/store/modules/user'
    import AreaPicker from '@/components/AreaPicker/index.vue'

    const { getUserInfo } = useUserStore()

    const pageData = reactive({
        show: false,
        areaShow: {
            time: false,
            address: false,
        },
        scopeText: '',
        form: {
            machineId: '',
            serviceType: '',
            userId: '',
            time: '',
            startTime: '',
            endTime: '',
            scope: '',
            address: '',
            phone: '',
            demand: '',
        },
        rules: [
            { name: 'phone', rule: ['required', 'isMobile'], msg: ['请填写手机号码', '手机号格式不正确'] },
            { name: 'scope', rule: ['required'], msg: ['请选择作业区域'] },
            { name: 'startTime', rule: ['required'], msg: ['请选择开始时间'] },
            { name: 'endTime', rule: ['required'], msg: ['请选择结束时间'] },
            { name: 'address', rule: ['required'], msg: ['请填写详细地址'] },
            { name: 'demand', rule: ['required'], msg: ['请填写需求'] },
        ],
    })

    function handleTimeChange(e) {
        pageData.form.startTime = e.startDate.result
        pageData.form.endTime = e.endDate.result
        pageData.form.time = `${e.startDate.result} 至 ${e.endDate.result}`
        pageData.areaShow.time = false
    }

    function open(params) {
        reset()
        pageData.form.machineId = params.id
        pageData.form.serviceType = params.serviceType
        pageData.form.userId = getUserInfo?.id || ''
        pageData.show = true
    }

    function close() {
        pageData.show = false
    }

    function reset() {
        pageData.form = {
            machineId: '', serviceType: '', userId: '', time: '', startTime: '', endTime: '',
            scope: '', address: '', phone: '', demand: '',
        }
        pageData.scopeText = ''
    }

    const formRef = ref()
    function submit() {
        formRef.value.validator(pageData.form, pageData.rules, true).then((res) => {
            if (res.isPassed) {
                NongjifuwuAPI.farmMachineRegister(pageData.form).then(() => {
                    uni.showToast({ title: '预约提交成功', icon: 'success' })
                    close()
                })
            }
        })
    }

    function handleAreaConfirm(e) {
        pageData.form.scope = e.fullCode
        pageData.scopeText = e.fullText
    }

    defineExpose({ open, close })
</script>

<template>
    <fui-dialog title="" :buttons="[]" :show="pageData.show" maskClosable @close="close">
        <view class="dialog-header">
            <text class="dialog-title">预约登记</text>
            <fui-icon name="close" :size="40" color="#999" @click="close"></fui-icon>
        </view>
        <view class="dialog-body">
            <fui-form ref="formRef">
                <fui-input label="联系电话" placeholder="请输入手机号" v-model="pageData.form.phone" required type="number" maxlength="11" />
                <fui-input label="作业区域" placeholder="请选择" v-model="pageData.scopeText" @click="pageData.areaShow.address = true" disabled required />
                <fui-input label="详细地址" placeholder="村组/街道门牌" v-model="pageData.form.address" required />
                <fui-input label="作业时间" placeholder="请选择周期" v-model="pageData.form.time" @click="pageData.areaShow.time = true" disabled required />
                <fui-textarea label="需求说明" placeholder="简要说明作业要求..." v-model="pageData.form.demand" required height="120rpx" />
                
                <view class="submit-btn-wrap">
                    <fui-button text="立即预约" radius="100rpx" background="#5db66f" @click="submit" />
                </view>
            </fui-form>
        </view>
    </fui-dialog>

    <fui-date-picker :show="pageData.areaShow.time" type="3" range @change="handleTimeChange" @cancel="pageData.areaShow.time = false" />
    <AreaPicker v-model:show="pageData.areaShow.address" :layer="3" title="选择作业区域" @confirm="handleAreaConfirm" />
</template>

<style lang="scss" scoped>
    .dialog-header {
        display: flex; justify-content: space-between; align-items: center; padding: 20rpx 0;
        .dialog-title { font-size: 32rpx; font-weight: bold; color: #333; }
    }
    .dialog-body { text-align: left; padding-bottom: 20rpx; }
    .submit-btn-wrap { margin-top: 40rpx; }
    :deep(.fui-input__label) { font-size: 28rpx; width: 160rpx !important; }
</style>
