<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>
