<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="postPerson"
                label="报修人"
                placeholder="请输入报修人"
                :rules="[{ required: true, message: '此项为必填项！' }]"
                required
                clearable
                label-width='8em'
            />

            <van-field
                v-model="phone"
                rows="2"
                autosize
                label="联系电话"
                type="tel"
                maxlength="150"
                placeholder="请输入手机号码"
                :rules="[{ required: true, message: '请输入正确的手机号！' ,validator: validator}]"
                required
                clearable
                label-width='8em'
            />
            
            <van-field
                v-model="repairAddr"
                label="报修地址"
                placeholder="请输入"
                :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: '请至少选择一项！' }]"
                required
                clearable
                label-width='8em'
            />
            <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="picker"
                :value="dueTime"
                label="期望时间"
                placeholder="请选择"
                @click="showDueTimePicker = true"
                :rules="[{ required: true, message: '请至少选择一项！' }]"
                required
                clearable
                label-width='8em'
            />
            <van-popup v-model="showDueTimePicker" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="dueTimeColumns"
                    @confirm="dueTimeConfirm"
                    @cancel="showDueTimePicker = 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: ['自用部位', '公用部位'],
      dueTimeColumns: ['上午', '下午'],

      postPerson: '',
      repairAddr: '',

      repairArea: '',
      repairType: '',
      description: '',
      dueDate: '',
      dueTime: '',
      phone: '',

      repairAreaPicker: '',
      repairTypePicker: '',

      showrepairAreaPicker: false,
      showrepairTypePicker: false,

      showCalendar: false,
      showTime: false,
      showDialog: false,
      showDueTimePicker: false
    }
  },
  mounted() {
  },
  methods: {
    onSubmit() {
      this.$ajax.post({
        url: this.$api.POST_RESERVATION_FORM,
        params: {
          'reportorName': this.postPerson,
          'address': this.repairAddr,
          'place': this.repairArea,
          'phone': this.phone,
          'dscr': this.description,
          'homeDate': this.dueDate,
          'homeTime': this.dueTime
        }
      }).then(res => {
        if(res.code == 200) {
          this.$notify({ type: 'primary', message: '提交成功！' })
          this.showDialog = !this.showDialog
        }
      })
    },
    validator(val) {
      return /^1[3-9][0-9]{9}$/.test(val)
    },
    repairAreaConfirm(val) {
      this.repairArea = val
      this.showrepairAreaPicker = !this.showrepairAreaPicker
    },
    dueTimeConfirm(val) {
      this.dueTime = val
      this.showDueTimePicker = !this.showDueTimePicker
    },
    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.postPerson = ''
      this.repairAddr = ''
      this.repairArea = ''
      this.repairType = ''
      this.description = ''
      this.phone = ''
      this.dueDate = ''
      this.dueTime = ''
    }
  }
}
</script>
