<template>
  <a-row class="date-picker-wrapper">
    <a-button class="left" icon="left" type="primary" @click="handlePrevious">前一天</a-button>
    <span
      class="date"
      v-if="!status.showDatePicker"
      @click="status.showDatePicker = true">
        {{dateString}}
      </span>
    <a-date-picker
      v-if="status.showDatePicker"
      class="date-picker"
      format="YYYY 年 MM 月 DD 日"
      @change="handleDateChange"
      @openChange="handleDatePickerClose"
      :disabledDate="disabledDate"
      :allowClear="false"
      :value="date">
    </a-date-picker>
    <a-button
      class="right"
      type="primary"
      :disabled="date.format('YYYY-MM-DD') === maxDate.format('YYYY-MM-DD')"
      @click="handleNext">
      后一天
      <a-icon type="right"></a-icon>
    </a-button>
  </a-row>
</template>

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

  export default {
    name: 'DatePickerBar',
    props: {
      defaultDate: Object
    },
    data () {
      return {
        status: {
          showDatePicker: false
        },
        date: this.defaultDate,
        dateString: '',
        setting: {}
      }
    },
    mounted () {
      settingAPI.getSettingDetail()
        .then(data => {
          this.setting = data
        })
      this.getDateString()
    },
    methods: {
      getDateString () {
        this.dateString = this.date.format('YYYY 年 MM 月 DD 日')
      },
      handleDateChange (date) {
        this.date = date
        this.getDateString()
        this.$emit('change', this.date)
      },
      handleDatePickerClose (status) {
        if (!status) this.status.showDatePicker = false
      },
      handlePrevious () {
        this.date.subtract(1, 'days')
        this.getDateString()
        this.$emit('change', this.date)
      },
      handleNext () {
        this.date.add(1, 'days')
        this.getDateString()
        this.$emit('change', this.date)
      },
      disabledDate (currentDate) {
        return currentDate > this.maxDate
      }
    },
    computed: {
      maxDate () {
        return new moment().add(this.setting.pre_booking_interval_day, 'days')
      }
    }
  }
</script>

<style scoped lang="less">
  .date-picker-wrapper {
    text-align: center;

    .left {
      float: left;
    }

    .date {
      font-size: 18px;
      vertical-align: -8px;
    }

    .date-picker {
      width: 200px;
    }

    .right {
      float: right;
    }
  }
</style>