<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-bottom-popup :show="pageData.show" @close="close">
        <view class="popup-wrap">
            <!-- 弹窗头部 -->
            <view class="popup-header">
                <view class="header-left">
                    <view class="header-icon">
                        <fui-icon name="notice" :size="32" color="#fff"></fui-icon>
                    </view>
                    <text class="header-title">预约登记</text>
                </view>
                <view class="close-btn" @click="close">
                    <fui-icon name="close" :size="36" color="#999"></fui-icon>
                </view>
            </view>

            <!-- 表单区域 -->
            <view class="form-section">
                <!-- 联系电话 -->
                <view class="form-item">
                    <view class="form-label">
                        <text class="label-text">联系电话</text>
                        <text class="required">*</text>
                    </view>
                    <input class="form-input" type="number" maxlength="11" placeholder="请输入手机号" v-model="pageData.form.phone" placeholder-class="input-placeholder" />
                </view>

                <!-- 作业区域 -->
                <view class="form-item" @click="pageData.areaShow.address = true">
                    <view class="form-label">
                        <text class="label-text">作业区域</text>
                        <text class="required">*</text>
                    </view>
                    <view class="form-picker">
                        <text :class="['picker-text', pageData.scopeText ? '' : 'placeholder']">
                            {{ pageData.scopeText || '请选择作业区域' }}
                        </text>
                        <fui-icon name="arrowright" :size="28" color="#ccc"></fui-icon>
                    </view>
                </view>

                <!-- 详细地址 -->
                <view class="form-item">
                    <view class="form-label">
                        <text class="label-text">详细地址</text>
                        <text class="required">*</text>
                    </view>
                    <input class="form-input" placeholder="村组/街道门牌号" v-model="pageData.form.address" placeholder-class="input-placeholder" />
                </view>

                <!-- 作业时间 -->
                <view class="form-item" @click="pageData.areaShow.time = true">
                    <view class="form-label">
                        <text class="label-text">作业时间</text>
                        <text class="required">*</text>
                    </view>
                    <view class="form-picker">
                        <text :class="['picker-text', pageData.form.time ? '' : 'placeholder']">
                            {{ pageData.form.time || '请选择作业周期' }}
                        </text>
                        <fui-icon name="arrowright" :size="28" color="#ccc"></fui-icon>
                    </view>
                </view>

                <!-- 需求说明 -->
                <view class="form-item">
                    <view class="form-label">
                        <text class="label-text">需求说明</text>
                        <text class="required">*</text>
                    </view>
                    <textarea class="form-textarea" placeholder="请简要说明作业要求..." v-model="pageData.form.demand" placeholder-class="input-placeholder" />
                </view>
            </view>

            <!-- 提交按钮 -->
            <view class="submit-area">
                <view class="submit-btn" @click="submit">
                    <text class="btn-text">立即预约</text>
                </view>
            </view>
        </view>
    </fui-bottom-popup>

    <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>
    .popup-wrap {
        background-color: #fff;
        border-radius: 32rpx 32rpx 0 0;
        overflow: hidden;
        padding-bottom: env(safe-area-inset-bottom);

        .popup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 32rpx 32rpx 24rpx;
            background: linear-gradient(135deg, #f8fdf9 0%, #fff 100%);
            border-bottom: 1rpx solid #f0f0f0;

            .header-left {
                display: flex;
                align-items: center;
            }

            .header-icon {
                width: 56rpx;
                height: 56rpx;
                background: linear-gradient(135deg, #fa8c16 0%, #fa541c 100%);
                border-radius: 14rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 16rpx;
                box-shadow: 0 4rpx 12rpx rgba(250, 140, 22, 0.3);
            }

            .header-title {
                font-size: 32rpx;
                font-weight: 600;
                color: #333;
            }

            .close-btn {
                width: 56rpx;
                height: 56rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f5f5f5;
                border-radius: 50%;
            }
        }

        .form-section {
            padding: 24rpx 32rpx 0;

            .form-item {
                padding: 20rpx 0;
                border-bottom: 1rpx solid #f5f5f5;

                &:last-child {
                    border-bottom: none;
                }
            }

            .form-label {
                display: flex;
                align-items: center;
                margin-bottom: 14rpx;

                .label-text {
                    font-size: 28rpx;
                    color: #333;
                    font-weight: 500;
                }

                .required {
                    color: #ff4d4f;
                    margin-left: 4rpx;
                    font-size: 28rpx;
                }
            }

            .form-input {
                width: 100%;
                height: 80rpx;
                background-color: #f7f8fa;
                border-radius: 12rpx;
                padding: 0 24rpx;
                font-size: 28rpx;
                color: #333;
                box-sizing: border-box;
            }

            .form-picker {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 80rpx;
                background-color: #f7f8fa;
                border-radius: 12rpx;
                padding: 0 24rpx;

                .picker-text {
                    font-size: 28rpx;
                    color: #333;

                    &.placeholder {
                        color: #bbb;
                    }
                }
            }

            .form-textarea {
                width: 100%;
                height: 160rpx;
                background-color: #f7f8fa;
                border-radius: 12rpx;
                padding: 20rpx 24rpx;
                font-size: 28rpx;
                color: #333;
                box-sizing: border-box;
                line-height: 1.5;
            }
        }

        .submit-area {
            padding: 32rpx 32rpx 40rpx;

            .submit-btn {
                width: 100%;
                height: 88rpx;
                background: linear-gradient(135deg, #fa8c16 0%, #fa541c 100%);
                border-radius: 44rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 8rpx 24rpx rgba(250, 140, 22, 0.4);

                .btn-text {
                    font-size: 30rpx;
                    color: #fff;
                    font-weight: 600;
                    letter-spacing: 4rpx;
                }
            }
        }
    }

    .input-placeholder {
        color: #bbb;
        font-size: 28rpx;
    }
</style>
