<template>
    <div style="height: 100%; background-color: #F5F5F5">
        <van-nav-bar
            title="首页"
            left-arrow
        />

        <van-form @submit="onSubmit" style="border-radius: 10px; margin: 10px">
            <van-field
                v-model="sectName"
                label="小区名称"
                placeholder="请输入"
                :rules="[{ required: true, message: '请填写小区名称！' }]"
            />
            <van-field
                v-model="sectAddr"
                label="小区地址"
                placeholder="请输入"
                :rules="[{ required: true, message: '请填写小区地址！' }]"
            />
            <van-field
                v-model="mpzAddr"
                label="门牌幢地址"
                placeholder="例：19号101室"
                :rules="[{ required: true, message: '请填写门牌幢地址！' }]"
            />

            <!-- 报修部位 -->
            <van-field
                readonly
                clickable
                name="picker"
                :value="repairArea"
                label="报修部位"
                placeholder="请选择"
                @click="showPicker = true"
                :rules="[{ required: true, message: '请至少选择一项！' }]"
            />
            <van-popup v-model="repairAreaPicker" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="columns"
                    @confirm="repairAreaConfirm"
                    @cancel="showrepairAreaPicker = false"
                />
            </van-popup>

            <!-- 报修类型 -->

            <van-field
                readonly
                clickable
                name="picker"
                :value="repairType"
                label="报修类型"
                placeholder="请选择"
                @click="showPicker = true"
                :rules="[{ required: true, message: '请至少选择一项！' }]"
            />
            <van-popup v-model="repairTypePicker" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="columns"
                    @confirm="repairTypeConfirm"
                    @cancel="showrepairTypePicker = false"
                />
            </van-popup>

            <van-field
                v-model="description"
                rows="2"
                autosize
                label="描述"
                type="textarea"
                maxlength="150"
                placeholder="请输入详细信息"
                show-word-limit
                :rules="[{ required: true, message: '请填写详细信息！' }]"
            />

            <van-field
                readonly
                clickable
                name="calendar"
                :value="dueDate"
                label="上门日期"
                placeholder="请选择"
                @click="showCalendar = true"
                :rules="[{ required: true, message: '请选择上门日期！' }]"
            />
            <van-calendar v-model="showCalendar" @confirm="onConfirm" />

            <van-field
                readonly
                clickable
                name="datetimePicker"
                :value="dueTime"
                label="上门时间"
                placeholder="请选择"
                @click="showPicker = true"
                :rules="[{ required: true, message: '请选择上门时间！' }]"
            />
            <van-popup v-model="showPicker" position="bottom">
                <van-datetime-picker
                    type="time"
                    @confirm="onConfirm"
                    @cancel="showPicker = false"
                />
            </van-popup>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            sectName: '',
            sectAddr: '',
            mpzAddr: '',
            repairArea: '',
            repairType: '',
            description: '',
            dueDate: '',
            dueTime: '',

            repairAreaPicker: '',
            repairTypePicker: '',

            showrepairAreaPicker: false,
            showrepairTypePicker: false,
        }
    },
    mounted() {},
    methods:{
        onConfirm() {},
        onSubmit() {
            const parseForm = {
                stNameFrst: sectName,
            }
        },
        repairAreaConfirm() {},
        repairTypeConfirm() {}
    }
}
</script>
