<template>
  <a-card>
    <a-col
      :xs="{span: 24}"
      :sm="{span: 20}"
      :xl="{span: 18}">
      <a-form
        :form="form"
        @submit="handleSubmit">
        <a-form-item
          label="提前预约间隔"
          :label-col="{span: 6}"
          :wrapper-col="{span: 18}">
          <a-input
            type="number"
            addonAfter="天"
            v-decorator="[
                'pre_booking_interval_day',
                {rules: [
                {required: true, message: '请输入提前预约间隔'},
                {pattern: /^[1-9]\d*$/, message: '请输入大于1的正整数'},
                ],
                validateTrigger: 'blur',
                initialValue: setting.pre_booking_interval_day}
              ]">
          </a-input>
        </a-form-item>
        <a-form-item
          label="预约间隔(DEV)"
          :label-col="{span: 6}"
          :wrapper-col="{span: 18}">
          <a-input
            disabled
            type="number"
            addonAfter="分钟"
            v-decorator="[
                'booking_interval',
                {rules: [
                {required: true, message: '请输入预约间隔'},
                {pattern: /(^[1-9]\d*$)/, message: '请输入正整数'},
                ], validateTrigger: 'blur',
                initialValue: setting.booking_interval}
              ]">
          </a-input>
        </a-form-item>
        <a-form-item
          label="开始时间"
          :label-col="{span: 6}"
          :wrapper-col="{span: 18}">
          <a-time-picker
            :minuteStep="30"
            :secondStep="60"
            style="width: 100%;"
            v-decorator="[
            'start_time',{
              rules: [{ type: 'object', required: true, message: '请输入开始时间' }],
              initialValue: setting.start_time
            }]"></a-time-picker>
        </a-form-item>
        <a-form-item
          label="结束时间"
          :label-col="{span: 6}"
          :wrapper-col="{span: 18}">
          <a-time-picker style="width: 100%;" v-decorator="[
            'end_time',{
              rules: [{ type: 'object', required: true, message: '请选择结束时间' }],
              initialValue: setting.end_time
            }]"></a-time-picker>
        </a-form-item>
        <a-form-item
          label="惩罚积分数"
          :label-col="{span: 6}"
          :wrapper-col="{span: 18}">
          <a-input
            type="number"
            addonAfter="分"
            v-decorator="[
                'punish_point',
                {rules: [
                {required: true, message: '请输入惩罚积分数'},
                {pattern: /(^[1-9]\d*$)/, message: '请输入大于1的正整数'},
                ], validateTrigger: 'blur',
                initialValue: setting.punish_point}
              ]">
          </a-input>
        </a-form-item>
        <a-form-item
          label="奖励积分数"
          :label-col="{span: 6}"
          :wrapper-col="{span: 18}">
          <a-input
            type="number"
            addonAfter="分"
            v-decorator="[
                'reward_point',
                {rules: [
                {required: true, message: '请输入奖励积分数'},
                {pattern: /(^[1-9]\d*$)/, message: '请输入大于1的正整数'},
                ], validateTrigger: 'blur',
                initialValue: setting.reward_point}
              ]">
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSubmit" style="float: right">
            保存
          </a-button>
        </a-form-item>
      </a-form>
    </a-col>
  </a-card>
</template>

<script>
  import api from '../../api/setting'
  import moment from 'moment'

  export default {
    name: 'BookingSetting',
    data () {
      return {
        setting: {},
        form: this.$form.createForm(this),
      }
    },
    mounted () {
      this.getData()
    },
    methods: {
      getData () {
        api.getSettingDetail()
          .then(data => {
            data.start_time = new moment(data.start_time, 'HH:mm:ss')
            data.end_time = new moment(data.end_time, 'HH:mm:ss')
            this.setting = data
          })
      },
      handleSubmit (e) {
        e.preventDefault()
        this.form.validateFields((error, data) => {
            if (!error) {
              data.start_time = data.start_time.format('HH:mm:ss')
              data.end_time = data.end_time.format('HH:mm:ss')
              api.updateSettingDetail(data)
                .then(data => {
                  this.$notification.success({ message: '成功', description: '保存成功', key: 'SUCCESS' })
                  this.getData()
                })
            }
          }
        )
      },
    }
  }
</script>

<style scoped lang="less">

</style>