<script setup lang="ts">
    import { reactive } from 'vue'
    import * as NongjifuwuAPI from '@/api/model/nongjifuwu'
    import { useUserStore } from '@/store/modules/user'
    import { getDictData, getText } from '@/utils/dict/area'

    const { getUserInfo } = useUserStore()

    const pageData = reactive({
        show: false,
        areaShow: {
            time: false,
            classify: false,
            address: false,
        },
        options: null,
        scopeText: null,
        content: '',
        form: {
            machineId: '',
            serviceType: '',
            userId: '',
            time: '',
            startTime: '',
            endTime: '',
            scope: '',
            address: '',
            phone: '',
            demand: '',
        },
        rules: [
            {
                name: 'phone',
                rule: ['required'],
                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: ['请填写需求'],
            },
        ],
    })
    const dict = reactive({
        show: {
            time: false,
        },
    })

    function handleTimeChange(e) {
        pageData.form.startTime = e.startDate.result
        pageData.form.endTime = e.endDate.result
        pageData.form.time = `${e.startDate.result} 至 ${e.endDate.result}`
        dict.show.time = false
    }
    function handleTimeCancel() {
        dict.show.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
        pageData.areaShow.address = false
    }
    function reset() {
        pageData.form = {
            machineId: '',
            serviceType: '',
            userId: '',
            time: '',
            startTime: '',
            endTime: '',
            scope: '',
            address: '',
            phone: '',
            demand: '',
        }
        pageData.scopeText = null
    }
    const formRef = ref()
    function submit() {
        formRef.value.validator(pageData.form, pageData.rules, true).then((res) => {
            if (res.isPassed) {
                NongjifuwuAPI.farmMachineRegister(pageData.form).then(() => {
                    reset()
                    close()
                    uni.showToast({
                        title: '提交成功',
                        icon: 'success',
                    })
                })
            }
        })
    }
    function handleChangeAddress(e) {
        pageData.form.scope = e.value.join(',')
        pageData.scopeText = getText(pageData.form.scope, ' / ')
        pageData.areaShow.address = false
    }
    onShow(() => {
        pageData.options = getDictData()
    })
    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="24"
                    type="number"
                    maxlength="11"
                    placeholder="请填写手机号码"
                    v-model="pageData.form.phone"
                    required
                    placeholderStyle="margin-left: 10rpx;"
                />
                <fui-input
                    marginTop="30"
                    size="24"
                    disabled
                    @click="pageData.areaShow.address = true"
                    placeholder="请选择作业区域"
                    v-model="pageData.scopeText"
                    required
                    placeholderStyle="margin-left: 10rpx;"
                />
                <fui-input
                    marginTop="30"
                    size="24"
                    placeholder="请填写详细地址"
                    v-model="pageData.form.address"
                    required
                    placeholderStyle="margin-left: 10rpx;"
                />
                <fui-input
                    marginTop="30"
                    size="24"
                    placeholder="请选择作业时间"
                    v-model="pageData.form.time"
                    @click="dict.show.time = true"
                    required
                    placeholderStyle="margin-left: 10rpx;"
                />
                <fui-textarea
                    v-model="pageData.form.demand"
                    :marginTop="30"
                    size="24"
                    placeholder="简要说明作业要求"
                    flexStart
                    required
                    placeholderStyle="margin-left: 10rpx;"
                    height="100rpx"
                />
                <view style="margin-top: 30rpx">
                    <fui-button type="warning" text="提交" bold radius="96rpx" @click="submit" />
                </view>
            </fui-form>
        </view>
    </fui-dialog>
    <fui-date-picker :show="dict.show.time" type="3" range @change="handleTimeChange" @cancel="handleTimeCancel" />
    <fui-picker
        :show="pageData.areaShow.address"
        :options="pageData.options"
        :linkage="true"
        :layer="3"
        @change="handleChangeAddress"
        @cancel="pageData.areaShow.address = false"
    />
</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>
