<template>
    <div style="height: 100%; background-color: #F5F5F5">
        <van-dialog v-model="showDialog" title="是否再填写一份？" showConfirmButton show-cancel-button @confirm='clearAllFormFields'></van-dialog>
        <van-nav-bar
            title="首页"
        />

        <van-form @submit="onSubmit" style="border-radius: 10px; margin: 10px">
            <van-field
                v-model="sectName"
                label="小区名称"
                placeholder="请输入"
                :rules="[{ required: true, message: '此项为必填项！' }]"
                required
                clearable
                label-width='8em'
            />
            <van-field
                v-model="sectAddrRoad"
                label="小区地址(路名)"
                placeholder="请输入"
                :rules="[{ required: true, message: '此项为必填项！' }]"
                required
                clearable
                label-width='8em'
            />

            <van-field
                v-model="sectAddrLong"
                label="小区地址(弄/号)"
                placeholder="请输入"
                :rules="[{ required: true, message: '此项为必填项！' }]"
                required
                clearable
                label-width='8em'
            />
            <van-field
                v-model="mpzAddr"
                label="门牌幢地址"
                placeholder="例：19号101室"
                :rules="[{ required: true, message: '此项为必填项！' }]"
                required
                clearable
                label-width='8em'
            />

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

            <!-- 报修类型 -->

            <!-- <van-field
                readonly
                clickable
                name="picker"
                :value="repairType"
                label="报修类型"
                placeholder="请选择"
                @click="showrepairTypePicker = true"
                :rules="[{ required: true, message: '请至少选择一项！' }]"
            />
            <van-popup v-model="showrepairTypePicker" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="typeColumns"
                    @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: '此项为必填项！' }]"
                required
                clearable
                label-width='8em'
            />

            <van-field
                readonly
                clickable
                name="calendar"
                :value="dueDate"
                label="上门日期"
                placeholder="请选择"
                @click="showCalendar = true"
                :rules="[{ required: true, message: '此项为必填项！' }]"
                required
                clearable
                label-width='8em'
            />
            <van-calendar v-model="showCalendar" @confirm="calendarOnConfirm" />

            <van-field
                readonly
                clickable
                name="datetimePicker"
                :value="dueTime"
                label="上门时间"
                placeholder="请选择"
                @click="showTime = true"
                :rules="[{ required: true, message: '此项为必填项！' }]"
                required
                clearable
                label-width='8em'
            />
            <van-popup v-model="showTime" position="bottom">
                <van-datetime-picker
                    type="time"
                    @confirm="timeOnConfirm"
                    @cancel="showTime = 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 {
            areaColumns: [],
            typeColumns: [],

            sectName: '',
            sectAddrRoad: '',
            sectAddrLong: '',
            mpzAddr: '',
            repairArea: '',
            repairType: '',
            description: '',
            dueDate: '',
            dueTime: '',

            repairAreaPicker: '',
            repairTypePicker: '',

            showrepairAreaPicker: false,
            showrepairTypePicker: false,

            showCalendar: false,
            showTime: false,
            showDialog: false
        }
    },
    mounted() {
    },
    methods:{
        onConfirm() {},
        onSubmit() {
            this.$ajax.post({
                url: this.$api.POST_RESERVATION_FORM,
                params: {
                    "stNameFrst": this.sectName,
                    "unitLoad": this.sectAddrRoad,
                    "unitLong": this.sectAddrLong,
                    "addrFrst": this.mpzAddr,
                    "place": this.repairArea,
                    "type": this.repairType,
                    "dscr": this.description,
                    "homeDate": this.dueDate,
                    "homeTime": this.dueTime
                }
            }).then(res => {
              if(res.code == 200) {
                  this.$notify({ type: 'primary', message: '提交成功！' });
                  this.showDialog = !this.showDialog
              }
            })
        },
        repairAreaConfirm() {},
        repairTypeConfirm() {},
        calendarOnConfirm(val) {
            this.dueDate = this.$moment(val).format('YYYY-MM-DD')
            this.showCalendar = !this.showCalendar
        },
        timeOnConfirm(val) {
            this.dueTime = val
            this.showTime = !this.showTime
        },
        clearAllFormFields() {
            this.sectName = ''
            this.sectAddrRoad = ''
            this.sectAddrLong = ''
            this.mpzAddr = ''
            this.repairArea = ''
            this.repairType = ''
            this.description = ''
            this.dueDate = ''
            this.dueTime = ''
        }
    }
}
</script>
